/* ─── GLOBAL PLACEHOLDER STYLING: theme-aware and readable ─── */ input::placeholder, textarea::placeholder, select::placeholder, .amti-input::placeholder, .amti-form-input::placeholder, .amti-form-control::placeholder, .amti-search-input::placeholder, .amti-smart-search-input::placeholder, .products-search::placeholder, .zn-input::placeholder, .zn-textarea::placeholder, .os-input::placeholder, .os-textarea::placeholder { color: var(--placeholder-color, rgba(148, 163, 184, 0.18)) !important; opacity: 1 !important; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--placeholder-color, rgba(148, 163, 184, 0.18)) !important; opacity: 1 !important; } input::-moz-placeholder, textarea::-moz-placeholder { color: var(--placeholder-color, rgba(148, 163, 184, 0.18)) !important; opacity: 1 !important; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: var(--placeholder-color, rgba(148, 163, 184, 0.18)) !important; opacity: 1 !important; } /* ─── INPUT PERFORMANCE: kill layout-triggering transitions, preserve focus feedback ─── */ /* Permite transição de border-color e box-shadow (foco/hover) sem causar repaints de layout. Removemos transform/top/left/width/height que são pesados, mas mantemos foco visual. */ input, textarea, select, .amti-form-control, .zn-input, .zn-select, .zn-textarea { transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important; animation: none !important; will-change: auto !important; } /* ─── GPU PERFORMANCE: kill backdrop-filter on always-visible elements ─── */ .pdv-cart, .pdv-cart-summary, .pdv-product-card, .pdv-search-wrapper, .design-glassmini, .design-glassmini .amti-modern-calendar, .theme-glass, .wtheme-glass, .drag-ghost, .amti-drag-ghost, .pdv-widget-results, .amti-context-menu, .amti-context-submenu { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ─── GPU PERFORMANCE: kill will-change on always-visible elements ─── */ .amti-nav-item button, .amti-nav-item button span, .amti-os-search-panel, .os-card-search-panel, .amti-search-panel { will-change: auto !important; } /* ─── GLOBAL ENGINE PERFORMANCE OPTIMIZATIONS (STANDARD / DEFAULT MODE) ─── */ /* 3. Pausa automática de animações e spinners em sub-árvores ocultas/inativas (0% de CPU em repouso) */ .amti-tab-pane:not(.active) *, .amti-modal.hidden *, .hidden *, [aria-hidden="true"] * { animation-play-state: paused !important; } /* 4. Otimização de renderização de linhas de tabela (Isolamento de hover por linha) */ .amti-table tbody tr { contain: layout style; } /* 4.1. Suspensão total de GPU e renderização quando a aba do navegador estiver em segundo plano / minimizada */ body.amti-tab-hidden { --amti-blur-scale: 0 !important; --amti-glow-scale: 0 !important; --amti-animation-scale: 0 !important; } body.amti-tab-hidden *, body.amti-tab-hidden *::before, body.amti-tab-hidden *::after { animation-play-state: paused !important; transition: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.amti-tab-hidden canvas { will-change: auto !important; } /* 4.2. Animação interna e destaque acelerados por GPU para botão Salvar OS em estado alterado (dirty) Consolidado na seção "SALVAR OS - UNSAVED MODIFICATIONS" (linhas 9085+) */ /* 5. Aceleração de hardware e renderização nítida para canvas */ canvas { image-rendering: auto; } /* 5.1 Supressão de resize de Chart.js DURANTE a transição da sidebar ───────────────────────────────────────────────────────────────────── Quando a sidebar anima width (380ms), o flex layout recalcula a largura do content-container → ResizeObserver dos 5+ canvas do Chart.js dispara dezenas de chart.update() pesados POR FRAME → jank visível. Solução: durante a animação (.amti-sidebar-animating no body), todos os frames de gráficos financeiros recebem contain:strict (tamanho intrínseco fixo) e os canvas recebem pointer-events:none — o ResizeObserver NÃO dispara porque o layout interno do frame não muda. Ao final da transição (transitionend), o JS remove a classe e chama chart.resize() UMA vez para cada chart. */ body.amti-sidebar-animating .amti-finance-chart-frame { contain: strict !important; contain-intrinsic-size: auto 320px; } body.amti-sidebar-animating canvas { pointer-events: none; } /* Suprimir backdrop-filter durante animação da sidebar para reduzir GPU */ body.amti-sidebar-animating .amti-sidebar::before { opacity: 0 !important; transition: none !important; } /* 6. Suavização de renderização tipográfica */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Sortable table headers */ .amti-table th[data-sort] { cursor: pointer; user-select: none; position: relative; } .amti-table th[data-sort]:hover { opacity: 0.85; } .amti-table th.sort-asc::after, .amti-table th.sort-desc::after { content: ''; display: inline-block; position: static; vertical-align: middle; margin-left: 5px; transform: none; border-left: 5px solid transparent; border-right: 5px solid transparent; } .amti-table th.sort-asc::after { border-bottom: 6px solid var(--sort-arrow-color, #ffffff); } .amti-table th.sort-desc::after { border-top: 6px solid var(--sort-arrow-color, #ffffff); } :root { color-scheme: dark; /* background (uses variable so themes can override it cleanly) */ --bg-main: linear-gradient(180deg, #050a10 0%, #04070b 50%, #06070a 100%); --bg-card: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(8, 15, 28, 0.98)); --card-surface: linear-gradient(145deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 15, 28, 0.98) 45%, rgba(7, 11, 18, 0.98) 100%); --card-surface-hover: linear-gradient(145deg, rgba(17, 24, 39, 0.99) 0%, rgba(12, 18, 30, 0.98) 45%, rgba(10, 14, 21, 0.98) 100%); --button-surface: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(8, 15, 28, 0.98)); --button-surface-hover: linear-gradient(180deg, rgba(17, 24, 39, 1), rgba(15, 23, 42, 0.98)); --card-glow: 0 12px 28px rgba(0, 0, 0, 0.45); --card-glow-hover: 0 18px 40px rgba(0, 0, 0, 0.60); --bg-card-soft: rgba(15, 23, 42, 0.82); --bg-input: rgba(15, 23, 42, 0.92); --placeholder-color: #94a3b8; --border-color: rgba(148, 163, 184, 0.16); --border-focus: #22d3ee; --surface-strong: linear-gradient(145deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 15, 28, 0.98) 48%, rgba(4, 10, 18, 0.98) 100%); --surface-strong-hover: linear-gradient(145deg, rgba(17, 24, 39, 0.99) 0%, rgba(13, 19, 31, 0.98) 48%, rgba(10, 14, 21, 0.98) 100%); --accent-soft: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(129, 140, 248, 0.12) 50%, rgba(192, 132, 252, 0.08)); --sort-arrow-color: #ffffff; --text-primary: #eff6ff; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --color-cyan: #22d3ee; --color-emerald: #34d399; --color-rose: #fb7185; --color-amber: #fbbf24; --color-indigo: #818cf8; --shadow-soft: 0 18px 34px rgba(2, 6, 23, 0.35); --shadow-glow: 0 0 0 1px rgba(148, 163, 184, 0.08), 0 16px 30px rgba(15, 23, 42, 0.38), 0 0 18px rgba(34, 211, 238, 0.06); --radius-xl: 18px; --radius-lg: 14px; --radius-md: 12px; --radius-sm: 10px; --nav-item-radius: 12px; --close-btn-radius: 8px; --accent-gradient: linear-gradient(135deg, #22d3ee 0%, #818cf8 50%, #a78bfa 100%); --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --topbar-bg: linear-gradient(90deg, #010204 0%, #03050a 30%, #060a12 65%, #090e18 100%); --table-header-bg: #0f172a; } :root[data-theme='light'], html[data-theme='light'] { color-scheme: light; --bg-main: #d0d5dd; --bg-card: #eef1f6; --card-surface: #eef1f6; --card-surface-hover: #e8ecf2; --button-surface: #eef1f6; --button-surface-hover: #e5e9f0; --bg-card-soft: #e6eaf0; --bg-input: #e2e6ed; --placeholder-color: #475569; --border-color: rgba(15, 23, 42, 0.12); --border-focus: #0284c7; --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --text-1: #0f172a; --text-2: #334155; --text-3: #64748b; --surface-strong-hover: #e8ecf2; --card-glow-hover: none; --shadow-soft: 0 8px 20px rgba(15, 23, 42, 0.06); --shadow-glow: 0 0 0 1px rgba(15, 23, 42, 0.05), 0 6px 18px rgba(15,23,42,0.06), 0 0 12px rgba(56, 189, 248, 0.02); --sort-arrow-color: #475569; --topbar-bg: linear-gradient(90deg, #a4b2c4 0%, #bcc8d7 30%, #dbe3ec 65%, #eef1f6 100%); --table-header-bg: #ffffff; --nav-item-radius: 12px; --close-btn-radius: 8px; } :root[data-theme='block-steel'] { color-scheme: dark; --bg-main: linear-gradient(180deg, #18202c 0%, #0e131b 100%); --bg-card: linear-gradient(180deg, #242d38 0%, #171e26 100%); --card-surface: linear-gradient(180deg, #242d38 0%, #171e26 100%); --card-surface-hover: linear-gradient(180deg, #2a3543 0%, #1b232c 100%); --button-surface: linear-gradient(180deg, #374352 0%, #202832 100%); --button-surface-hover: linear-gradient(180deg, #414e5f 0%, #27303c 100%); --bg-card-soft: #1d252f; --bg-input: #12181f; --border-color: #3b4756; --border-focus: #8fa3b5; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --surface-strong-hover: #202933; --card-glow-hover: none; --shadow-soft: 0 4px 12px rgba(0,0,0,0.3); --shadow-glow: none; --sort-arrow-color: #f1f5f9; --topbar-bg: linear-gradient(90deg, #04070b 0%, #0b1118 30%, #131c26 65%, #182230 100%); --table-header-bg: #1c232c; --placeholder-color: #a6b5c6; --primary: #8fa3b5; --color-cyan: #8fa3b5; --color-emerald: #7ea38b; --color-rose: #a37e82; --color-amber: #a3957e; --color-indigo: #7e87a3; --surface-strong: #171e26; --accent-soft: #242d38; --accent-gradient: linear-gradient(180deg, #3c4b5c 0%, #222c36 100%); /* Reset radius */ --radius-xl: 0px !important; --radius-lg: 0px !important; --radius-md: 0px !important; --radius-sm: 0px !important; --nav-item-radius: 0px !important; --close-btn-radius: 0px !important; } /* Force sharp corners on everything in block-steel */ html[data-theme='block-steel'] *, html[data-theme='block-steel'] button, html[data-theme='block-steel'] input, html[data-theme='block-steel'] select, html[data-theme='block-steel'] textarea, html[data-theme='block-steel'] div, html[data-theme='block-steel'] a, html[data-theme='block-steel'] span, html[data-theme='block-steel'] table, html[data-theme='block-steel'] th, html[data-theme='block-steel'] td, html[data-theme='block-steel'] tr { border-radius: 0px !important; } /* Bevel effect/metal style for cards */ html[data-theme='block-steel'] .amti-card, html[data-theme='block-steel'] .amti-grid-card, html[data-theme='block-steel'] .amti-stat-card, html[data-theme='block-steel'] .amti-archive-card, html[data-theme='block-steel'] .pdv-product-card, html[data-theme='block-steel'] .amti-card-library-item, html[data-theme='block-steel'] .amti-modal-content, html[data-theme='block-steel'] .amti-settings-card, html[data-theme='block-steel'] .amti-grid-card.os-card, html[data-theme='block-steel'] .amti-pdv-cart, html[data-theme='block-steel'] .amti-pdv-catalog-card { background: linear-gradient(180deg, #283341 0%, #1a222a 100%) !important; border: 1px solid #4a5768 !important; border-top: 1px solid #627286 !important; /* light reflection on top */ border-bottom: 2px solid #0f141a !important; /* dark shadow on bottom */ box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important; color: var(--text-primary) !important; } /* Bevel/Metal style for buttons */ html[data-theme='block-steel'] .amti-btn { background: linear-gradient(180deg, #3c4b5c 0%, #222c36 100%) !important; border: 1px solid #4f5f72 !important; border-top: 1px solid #6b7d93 !important; border-bottom: 2px solid #141b21 !important; color: #eff6ff !important; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.2) !important; } html[data-theme='block-steel'] .amti-btn:hover { background: linear-gradient(180deg, #47586c 0%, #27323f 100%) !important; border-color: #596b80 !important; } html[data-theme='block-steel'] .amti-btn-primary { background: linear-gradient(180deg, #4a638c 0%, #293853 100%) !important; border-color: #5c78a6 !important; border-top-color: #7894c2 !important; border-bottom-color: #172132 !important; } html[data-theme='block-steel'] .amti-btn-primary:hover { background: linear-gradient(180deg, #5672a0 0%, #304160 100%) !important; } html[data-theme='block-steel'] .amti-btn-danger { background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%) !important; border-color: #991b1b !important; border-top-color: #dc2626 !important; border-bottom-color: #450a0a !important; color: #fef2f2 !important; } html[data-theme='block-steel'] .amti-btn-danger:hover { background: linear-gradient(180deg, #991b1b 0%, #5c0a0a 100%) !important; } /* Metallic input borders */ html[data-theme='block-steel'] .amti-form-control { background-color: #12181f !important; border: 1px solid #3c4856 !important; color: #f1f5f9 !important; } /* block-steel focus: see PER-THEME FOCUS signatures at end of file */ /* Perfil ultra: ajustes do tema Block Steel para renderização leve */ html[data-theme='block-steel'].amti-performance-mode .amti-card, html[data-theme='block-steel'].amti-performance-mode .amti-grid-card, html[data-theme='block-steel'].amti-performance-mode .amti-stat-card, html[data-theme='block-steel'].amti-performance-mode .amti-archive-card, html[data-theme='block-steel'].amti-performance-mode .pdv-product-card, html[data-theme='block-steel'].amti-performance-mode .amti-modal-content, html[data-theme='block-steel'].amti-performance-mode .amti-btn, body.amti-performance-mode html[data-theme='block-steel'] .amti-card, body.amti-performance-mode html[data-theme='block-steel'] .amti-grid-card, body.amti-performance-mode html[data-theme='block-steel'] .amti-stat-card, body.amti-performance-mode html[data-theme='block-steel'] .amti-btn, html[data-theme='block-steel'].amti-ultra-performance-mode .amti-card, html[data-theme='block-steel'].amti-ultra-performance-mode .amti-grid-card, html[data-theme='block-steel'].amti-ultra-performance-mode .amti-stat-card, html[data-theme='block-steel'].amti-ultra-performance-mode .amti-btn, body.amti-ultra-performance-mode html[data-theme='block-steel'] .amti-card, body.amti-ultra-performance-mode html[data-theme='block-steel'] .amti-grid-card, body.amti-ultra-performance-mode html[data-theme='block-steel'] .amti-stat-card, body.amti-ultra-performance-mode html[data-theme='block-steel'] .amti-btn { background: var(--bg-card) !important; background-image: none !important; border: 1px solid var(--border-color) !important; box-shadow: none !important; text-shadow: none !important; transition: none !important; } /* ── block-steel: Modal glass, form fields, select options ───────────────── */ html[data-theme='block-steel'] .os-modal-section { background: linear-gradient(135deg, rgba(30,40,52,0.6), rgba(20,28,38,0.8)) !important; border: 1px solid rgba(143,163,181,0.10) !important; border-left: 3px solid rgba(143,163,181,0.18) !important; } html[data-theme='block-steel'] .os-modal-section-header { background: rgba(42,54,68,0.5) !important; border-bottom-color: rgba(143,163,181,0.08) !important; } html[data-theme='block-steel'] .os-modal-section--accent { border-left-color: #8fa3b5 !important; } html[data-theme='block-steel'] .os-modal-section--accent-info { border-left-color: #6bb8d6 !important; } html[data-theme='block-steel'] .os-modal-section--accent-warning { border-left-color: #d4a24e !important; } html[data-theme='block-steel'] .os-modal-section--accent-danger { border-left-color: #c75858 !important; } html[data-theme='block-steel'] .os-modal-section--accent-success { border-left-color: #5bb88a !important; } html[data-theme='block-steel'] .section-icon-badge.badge-primary { background: rgba(143,163,181,0.14) !important; color: #8fa3b5 !important; } html[data-theme='block-steel'] .section-icon-badge.badge-info { background: rgba(107,184,214,0.14) !important; color: #6bb8d6 !important; } html[data-theme='block-steel'] .os-services-total-bar { background: linear-gradient(135deg, rgba(143,163,181,0.06), rgba(100,120,145,0.04)) !important; border-top: 1px solid rgba(143,163,181,0.16) !important; } html[data-theme='block-steel'] .amti-form-control, html[data-theme='block-steel'] input, html[data-theme='block-steel'] textarea, html[data-theme='block-steel'] select { background: #12181f !important; background-color: #12181f !important; border-color: #3c4856 !important; color: #f1f5f9 !important; } html[data-theme='block-steel'] select option:checked, html[data-theme='block-steel'] .amti-form-control option:checked, html[data-theme='block-steel'] .amti-form-control option:selected { background: rgba(143,163,181,0.12) !important; color: #f1f5f9 !important; } html[data-theme='block-steel'] select option:hover, html[data-theme='block-steel'] .amti-form-control option:hover { background: rgba(143,163,181,0.08) !important; } /* ── block-steel: Cart inner elements ─────────────────────────────────────── */ html[data-theme='block-steel'] .amti-pdv-cart-header { background: rgba(42,54,68,0.5) !important; border-bottom-color: rgba(143, 163, 181, 0.18) !important; color: #f1f5f9 !important; } html[data-theme='block-steel'] .amti-pdv-cart-header i { color: #8fa3b5 !important; filter: drop-shadow(0 0 6px rgba(143, 163, 181, 0.3)) !important; } html[data-theme='block-steel'] .pdv-cart-items { color: #f1f5f9 !important; } html[data-theme='block-steel'] .pdv-cart-summary { background: rgba(12, 16, 22, 0.6) !important; border-top-color: rgba(143, 163, 181, 0.10) !important; backdrop-filter: none !important; } html[data-theme='block-steel'] .amti-pdv-summary-row { border-color: rgba(143, 163, 181, 0.12) !important; color: #f1f5f9 !important; } html[data-theme='block-steel'] #pdvCartTotal { color: #8fa3b5 !important; text-shadow: 0 0 14px rgba(143, 163, 181, 0.3) !important; } html[data-theme='block-steel'] .pdv-empty-cart { color: rgba(143, 163, 181, 0.3) !important; } /* Light theme overrides - neutral headers & card separation */ /* Light theme topbar handled in unified topbar theme mapping */ html[data-theme='light'] .amti-card, html[data-theme='light'] .amti-grid-card, html[data-theme='light'] .amti-stat-card, html[data-theme='light'] .amti-archive-card, html[data-theme='light'] .pdv-product-card, html[data-theme='light'] .amti-card-library-item, html[data-theme='light'] .amti-modal-content, html[data-theme='light'] .amti-settings-card, html[data-theme='light'] .amti-grid-card.os-card, html[data-theme='light'] .amti-pdv-cart, html[data-theme='light'] .amti-pdv-catalog-card { background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.03) 0%, transparent 65%), #fafafa !important; border: 1px solid var(--border-color) !important; box-shadow: 0 8px 24px rgba(15,23,42,0.06), 0 0 0 1px rgba(100,116,139,0.06) !important; color: var(--text-primary) !important; } /* Settings shell: large screen-filling background in #EEF1F6 */ html[data-theme='light'] .amti-settings-shell { background: #eef1f6 !important; background-image: none !important; } /* Minha Conta modal: #EEF1F6 to match settings pages */ html[data-theme='light'] #myAccountModal .amti-modal-content { background: #eef1f6 !important; background-image: none !important; } /* AI advisor cards: #FAFAFA in light theme */ html[data-theme='light'] .ai-advisor-chat, html[data-theme='light'] .ai-advisor-suggestions { background: #fafafa !important; background-image: none !important; } /* Small soft cards: snow white to stand out from the gray page */ html[data-theme='light'] .amti-soft-card, html[data-theme='light'] .amti-settings-card-soft { background: #fafafa !important; background-image: none !important; } /* Início page cards: #FAFAFA in light theme */ :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-home :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .amti-grid-card.os-card, .amti-card-library-item, .amti-grid-card.shortcut-card, .amti-grid-card.ai-tips-live-card, .amti-grid-card.agenda-card ) { background: #ffffff !important; } /* Marca: garantir nome da empresa legível no tema light */ html[data-theme='light'] .amti-brand-name { background: none !important; background-image: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: var(--text-primary) !important; color: var(--text-primary) !important; } /* Melhorar contraste e visibilidade do campo de pesquisa (PDV) no tema Light */ html[data-theme='light'] .amti-pdv-catalog-card input.amti-form-control#pdvSearchProduct, html[data-theme='light'] .amti-pdv-catalog-card input#pdvSearchProduct, html[data-theme='light'] .amti-pdv-catalog-card .products-search, html[data-theme='light'] input.products-search, html[data-theme='light'] .amti-pdv-catalog-card input[type="text"].amti-form-control { background: var(--bg-input) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; padding: 14px 18px !important; height: 56px !important; box-shadow: var(--shadow-soft) !important; border-radius: 12px !important; } html[data-theme='light'] .amti-pdv-catalog-card input::placeholder, html[data-theme='light'] input#pdvSearchProduct::placeholder, html[data-theme='light'] input.products-search::placeholder { color: var(--placeholder-color) !important; opacity: 1; } html[data-theme='light'] .amti-pdv-catalog-card input:focus, html[data-theme='light'] input#pdvSearchProduct:focus, html[data-theme='light'] input.products-search:focus { outline: none !important; box-shadow: 0 8px 24px rgba(15,23,42,0.06) !important; border-color: rgba(15,23,42,0.12) !important; } /* Tone down bright cyan accents for Light theme */ html[data-theme='light'] .amti-nav-item button:hover { background: rgba(148,163,184,0.06); color: var(--text-primary); border-color: rgba(15,23,42,0.06); box-shadow: none; } html[data-theme='light'] .amti-nav-item.active button { background: linear-gradient(135deg, #e8ecf3 0%, #f0f3f8 100%); color: var(--text-primary); font-weight: 600; border-radius: 12px; box-shadow: inset 3px 0 rgba(15,23,42,0.06), 0 6px 12px rgba(15,23,42,0.03); } html[data-theme='light'] .amti-nav-group.open > button { background: linear-gradient(135deg, #e8ecf3 0%, #f0f3f8 100%); color: var(--text-primary); border-color: rgba(15,23,42,0.06); box-shadow: 0 6px 12px rgba(15,23,42,0.03); } html[data-theme='light'] .amti-grid-card.os-card { border: 1px solid rgba(15,23,42,0.06); box-shadow: var(--shadow-soft); background: var(--card-surface); } html[data-theme='light'] .amti-grid-card.os-card:hover { border-color: rgba(15,23,42,0.10); box-shadow: var(--shadow-glow); } html[data-theme='light'] .amti-brand-logo { box-shadow: none; background: transparent; color: var(--text-primary); } html[data-theme='light'] .amti-brand-logo::before { background: radial-gradient(circle, rgba(37, 99, 235, 0.14) 0%, rgba(14, 165, 233, 0.06) 45%, transparent 70%); } html[data-theme='light'] .amti-btn:hover { border-color: rgba(15,23,42,0.08); box-shadow: 0 8px 18px rgba(15,23,42,0.06); } html[data-theme='light'] .amti-btn-primary { background: var(--accent-gradient); border-color: rgba(15,23,42,0.06); color: #03111d; box-shadow: 0 10px 18px rgba(15,23,42,0.05); } html[data-theme='light'] .amti-stat-card:hover { border-color: rgba(15,23,42,0.06); } html[data-theme='light'] .amti-archive-card { border: 1px solid rgba(15,23,42,0.06); } html[data-theme='light'] .amti-context-menu { background: var(--card-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-soft); } /* Reduce saturation of cyan accents in light theme variables */ :root[data-theme='light'] { --color-cyan: #4a5a6a; --accent-soft: rgba(100,116,139,0.08); --accent-gradient: linear-gradient(135deg, #e2e6ed 0%, #f0f3f8 100%); } /* Light theme - sidebar, inputs and button color corrections */ html[data-theme='light'] .amti-sidebar { background: linear-gradient(180deg, #eef1f6, #e5e9ef); border-right: 1px solid var(--border-color); box-shadow: none; color: var(--text-secondary); } html[data-theme='light'] .amti-sidebar::before { background: linear-gradient(135deg, rgba(148,163,184,0.02), transparent 22%), linear-gradient(180deg, rgba(148,163,184,0.02), transparent 35%); } /* Nav items: make icons and labels readable and high-contrast in light theme */ :is(html[data-theme='light'], html.theme-light, body.theme-light) .amti-nav-item button { color: #1e293b !important; background: transparent; border-color: transparent; } :is(html[data-theme='light'], html.theme-light, body.theme-light) .amti-nav-item button i { color: #3b82f6 !important; } :is(html[data-theme='light'], html.theme-light, body.theme-light) .amti-nav-item button span { color: #1e293b !important; font-weight: 600 !important; } :is(html[data-theme='light'], html.theme-light, body.theme-light) .amti-nav-item button:hover { background: rgba(37, 99, 235, 0.08) !important; color: #0f172a !important; } :is(html[data-theme='light'], html.theme-light, body.theme-light) .amti-nav-item button:hover i { color: #1d4ed8 !important; } :is(html[data-theme='light'], html.theme-light, body.theme-light) .amti-nav-item.active button { background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(56, 189, 248, 0.12)) !important; color: #1d4ed8 !important; border-left: 4px solid #2563eb !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12) !important; } :is(html[data-theme='light'], html.theme-light, body.theme-light) .amti-nav-item.active button i { color: #2563eb !important; filter: none !important; } :is(html[data-theme='light'], html.theme-light, body.theme-light) .amti-nav-item.active button span { color: #0f172a !important; font-weight: 700 !important; } /* User Profile & "Minha Conta" button in Light Ice */ :is(html[data-theme='light'], html.theme-light, body.theme-light, html[data-theme='block-light'], html.theme-block-light, body.theme-block-light) .amti-brand { border-bottom: 1px solid rgba(15, 23, 42, 0.12); background: transparent; } :is(html[data-theme='light'], html.theme-light, body.theme-light, html[data-theme='block-light'], html.theme-block-light, body.theme-block-light) :is(.amti-brand-name, #sidebarBrandName) { background: none !important; background-image: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: #0f172a !important; color: #0f172a !important; font-weight: 800 !important; opacity: 1 !important; } :is(html[data-theme='light'], html.theme-light, body.theme-light, html[data-theme='block-light'], html.theme-block-light, body.theme-block-light) .amti-user-profile { border-top: 1px solid rgba(15, 23, 42, 0.12); } :is(html[data-theme='light'], html.theme-light, body.theme-light) .amti-logout-btn, :is(html[data-theme='light'], html.theme-light, body.theme-light) #myAccountBtn { color: #0f172a !important; background: transparent !important; } :is(html[data-theme='light'], html.theme-light, body.theme-light) .amti-logout-btn i, :is(html[data-theme='light'], html.theme-light, body.theme-light) #myAccountBtn i { color: #2563eb !important; font-size: 1.35rem !important; } :is(html[data-theme='light'], html.theme-light, body.theme-light) .amti-logout-btn span, :is(html[data-theme='light'], html.theme-light, body.theme-light) .amti-logout-btn .amti-user-action-label, :is(html[data-theme='light'], html.theme-light, body.theme-light) #myAccountGreetingLabel { color: #0f172a !important; font-weight: 600 !important; } :is(html[data-theme='light'], html.theme-light, body.theme-light) .amti-logout-btn:hover, :is(html[data-theme='light'], html.theme-light, body.theme-light) #myAccountBtn:hover { background: rgba(37, 99, 235, 0.08) !important; color: #0f172a !important; } :is(html[data-theme='light'], html.theme-light, body.theme-light) .amti-logout-btn:hover i, :is(html[data-theme='light'], html.theme-light, body.theme-light) #myAccountBtn:hover i { color: #1d4ed8 !important; } :is(html[data-theme='light'], html.theme-light, body.theme-light) .amti-logout-btn.active, :is(html[data-theme='light'], html.theme-light, body.theme-light) #myAccountBtn.active { background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(56, 189, 248, 0.12)) !important; border-left: 3px solid #2563eb !important; color: #1d4ed8 !important; } /* Form controls: override dark backgrounds */ html[data-theme='light'] .amti-form-control, html[data-theme='light'] .amti-form-control:not(select):not(input[type="checkbox"]) { background: var(--bg-input) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; box-shadow: none !important; } html[data-theme='light'] select.amti-form-control, html[data-theme='light'] select { background: var(--bg-input) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; } /* Perfil ultra: bordas mais fortes para campos de texto em tema Light */ html[data-theme='light'] body.amti-performance-mode .amti-form-control, html[data-theme='light'] body.amti-performance-mode input, html[data-theme='light'] body.amti-performance-mode textarea, html[data-theme='light'] body.amti-performance-mode select, html[data-theme='light'] body.amti-performance-mode .amti-form-control:not(select) { border-width: 2px !important; border-style: solid !important; border-color: rgba(15,23,42,0.12) !important; box-shadow: none !important; background: var(--bg-input) !important; color: var(--text-primary) !important; border-radius: var(--radius-md) !important; } html[data-theme='light'] body.amti-performance-mode .amti-form-control:focus, html[data-theme='light'] body.amti-performance-mode input:focus, html[data-theme='light'] body.amti-performance-mode textarea:focus, html[data-theme='light'] body.amti-performance-mode select:focus { border-color: rgba(15,23,42,0.20) !important; box-shadow: 0 6px 16px rgba(15,23,42,0.06) !important; outline: none !important; } /* Modal and cards should be light and legible */ /* Início: modernização dos cards na área principal (#tab-home) */ #tab-home .amti-card, #tab-home .amti-grid-card, #tab-home .amti-stat-card, #tab-home .amti-archive-card, #tab-home .pdv-product-card, #tab-home .amti-grid-card.os-card, #tab-home .amti-card-library-item, #tab-home .amti-grid-card.shortcut-card, #tab-home .amti-grid-card.agenda-card, #tab-home .amti-grid-card.ai-tips-live-card, #tab-home .amti-grid-card.clock-widget-card, #tab-home .amti-grid-card.calendar-widget-card, #tab-home .amti-grid-card.pdv-widget-card { padding: 18px; border-radius: 16px; background: var(--amti-card-custom-bg, var(--card-surface, linear-gradient(145deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 15, 28, 0.98) 45%, rgba(7, 11, 18, 0.98) 100%))) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important; transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms cubic-bezier(.2,.9,.2,1), border-color 260ms cubic-bezier(.2,.9,.2,1), background 260ms cubic-bezier(.2,.9,.2,1); position: relative; overflow: hidden; } /* Card header refinements */ #tab-home .amti-card .amti-card-header { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(148, 163, 184, 0.12); position: relative; z-index: 2; } #tab-home .amti-card .amti-card-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.2px; color: var(--text-primary); } /* Sheen/reflexo metálico deslizante desativado por solicitação */ #tab-home .amti-grid-card::after, #tab-home .amti-grid-card:hover::after { display: none !important; content: none !important; } /* Hover moderno: elevação natural e sombra profunda idêntica às outras páginas (ativo apenas quando suspensão estiver ligada) */ :is(html, body):not(.amti-no-card-hover):not(.amti-performance-mode):not(.amti-ultra-performance-mode) #tab-home :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .amti-grid-card.os-card, .amti-card-library-item, .amti-grid-card.shortcut-card, .amti-grid-card.agenda-card, .amti-grid-card.ai-tips-live-card, .amti-grid-card.clock-widget-card, .amti-grid-card.calendar-widget-card, .amti-grid-card.pdv-widget-card ):hover { transform: translateY(-4px) !important; border-color: rgba(255, 255, 255, 0.16) !important; background: var(--amti-card-custom-bg, var(--card-surface-hover, linear-gradient(145deg, rgba(17, 24, 39, 0.99) 0%, rgba(12, 18, 30, 0.98) 45%, rgba(10, 14, 21, 0.98) 100%))) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.60) !important; will-change: transform; } html[data-theme='light']:not(.amti-no-card-hover):not(.amti-performance-mode):not(.amti-ultra-performance-mode) #tab-home :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .amti-grid-card.os-card, .amti-card-library-item, .amti-grid-card.shortcut-card, .amti-grid-card.agenda-card, .amti-grid-card.ai-tips-live-card ):hover { transform: translateY(-4px) !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important; border-color: rgba(15, 23, 42, 0.15) !important; } /* Micro-interações para botões do card */ #tab-home .amti-grid-card .amti-card-btn, #tab-home .amti-card .amti-card-btn { transition: transform 180ms ease, box-shadow 180ms ease; } #tab-home .amti-grid-card .amti-card-btn:hover, #tab-home .amti-card .amti-card-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(2,6,23,0.12); } /* Light theme: make modal overlay subtle and modal content fully opaque */ /* Ensure modal header/body/footer use light surfaces (override dark gradients) */ /* ─── Light Ice / Light Theme: High-Contrast Labels & Typography in Popups ─── */ html[data-theme='light'] label, html[data-theme='light'] .amti-form-group label, html[data-theme='light'] .form-label, html[data-theme='light'] .amti-form-label, html[data-theme='light'] .zn-input-group label, html[data-theme='light'] .color-picker-group label, html[data-theme='light'] .hardware-card label, html[data-theme='light'] .time-row label, html[data-theme='light'] .confidence-row label, html[data-theme='light'] #productModal .form-group label, html[data-theme='light'] #productModal .ai-info-field label, html[data-theme='light'] .feedback-field-label, html[data-theme='light'] .amti-modal label, html[data-theme='light'] .os-modal label, html[data-theme='light'] .zn-modal label, html[data-theme='light'] .amti-modal-body label, html[data-theme='light'] .os-modal-body label, html[data-theme='light'] .os-modal-section-body label, html[data-theme='light'] .amti-form-group > label { color: #1e293b !important; font-weight: 600 !important; font-size: 0.84rem; letter-spacing: 0.01em; opacity: 1 !important; } /* Modal Title */ :is(html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light) :is( .amti-modal-header h3, .os-modal-header h3, .zn-modal-header h3, .amti-modal-header h2, .os-modal-header h2 ) { color: #0f172a !important; font-weight: 700 !important; } :is(html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light) :is( .amti-modal-header h3 i, .os-modal-header h3 i, .amti-modal-header h2 i, .os-modal-header h2 i ) { color: #2563eb !important; } /* Section Header inside Modals */ html[data-theme='light'] .os-modal-section { background: #ffffff !important; border: 1px solid rgba(15,23,42,0.08) !important; border-left: 3px solid rgba(15,23,42,0.12) !important; box-shadow: 0 1px 4px rgba(15,23,42,0.04) !important; } html[data-theme='light'] .os-modal-section-header { background: rgba(226, 232, 240, 0.75) !important; border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important; color: #0f172a !important; font-weight: 700 !important; letter-spacing: 0.02em !important; } html[data-theme='light'] .os-modal-section--accent { border-left-color: #6366f1 !important; } html[data-theme='light'] .os-modal-section--accent-info { border-left-color: #0ea5e9 !important; } html[data-theme='light'] .os-modal-section--accent-warning { border-left-color: #f59e0b !important; } html[data-theme='light'] .os-modal-section--accent-danger { border-left-color: #ef4444 !important; } html[data-theme='light'] .os-modal-section--accent-success { border-left-color: #22c55e !important; } html[data-theme='light'] .section-icon-badge.badge-primary { background: rgba(99,102,241,0.12) !important; color: #6366f1 !important; } html[data-theme='light'] .section-icon-badge.badge-info { background: rgba(14,165,233,0.12) !important; color: #0ea5e9 !important; } /* Step Progress in Modal */ html[data-theme='light'] .amti-step-pill { color: #475569 !important; font-weight: 600 !important; border-bottom: 2px solid rgba(15, 23, 42, 0.1) !important; } html[data-theme='light'] .amti-step-pill.active { color: #0284c7 !important; font-weight: 800 !important; border-bottom: 2px solid #0284c7 !important; } /* Combobox Trigger (e.g. "-- Cadastrar Novo Cliente --") */ html[data-theme='light'] .amti-combobox-trigger { background-color: #e2e8f0 !important; border: 1px solid rgba(15, 23, 42, 0.15) !important; color: #0f172a !important; font-weight: 600 !important; } html[data-theme='light'] .amti-combobox-trigger span, html[data-theme='light'] #flowClientDisplay { color: #0f172a !important; font-weight: 600 !important; } html[data-theme='light'] .amti-combobox-arrow { color: #475569 !important; } /* Flow Note (— OU CADASTRE UM NOVO CLIENTE ABAIXO —) */ html[data-theme='light'] .amti-flow-note { color: #475569 !important; font-weight: 700 !important; font-size: 0.76rem !important; letter-spacing: 0.05em !important; } /* Inputs in Modals */ html[data-theme='light'] .amti-modal .amti-form-control, html[data-theme='light'] .os-modal .amti-form-control, html[data-theme='light'] .os-modal-section-body .amti-form-control { background-color: #e8ecf2 !important; border: 1px solid rgba(15, 23, 42, 0.14) !important; color: #0f172a !important; font-weight: 500 !important; } html[data-theme='light'] .amti-modal .amti-form-control:focus, html[data-theme='light'] .os-modal .amti-form-control:focus, html[data-theme='light'] .os-modal-section-body .amti-form-control:focus { background-color: #ffffff !important; border-color: #0284c7 !important; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important; } html[data-theme='light'] .os-services-total-bar { background: rgba(241,245,249,0.8) !important; border-top: 1px solid rgba(15,23,42,0.08) !important; } /* Remove heavy ::before sheen on modals in light theme to avoid tinting */ /* ----------------------------------------------------------------- PDV INNER NAVIGATION & PANELS ----------------------------------------------------------------- */ .pdv-inner-nav { display: flex; align-items: center; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; background: rgba(0,0,0,0.12); } .pdv-inner-nav-btn { display: flex; align-items: center; gap: 8px; padding: 9px 18px; border: none; border-radius: 8px 8px 0 0; background: transparent; color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 0.18s, color 0.18s; font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; } .pdv-inner-nav-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-main); } .pdv-inner-nav-btn.active { background: rgba(6,182,212,0.1); color: var(--color-cyan); border-bottom: 2px solid var(--color-cyan); font-weight: 600; } .pdv-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* Ensure the frente-caixa panel fills available height */ #pdvPanelFrenteCaixa { flex: 1; overflow: hidden; } #tab-sales { flex-direction: column; } /* ----------------------------------------------------------------- PDV TOTAL ROW (bold total) ----------------------------------------------------------------- */ .amti-pdv-total-row { font-size: 1.1rem; font-weight: 700; border-top: 1px solid rgba(255,255,255,0.1) !important; padding-top: 12px !important; margin-top: 4px; } /* ----------------------------------------------------------------- PDV CONFIG PANEL ----------------------------------------------------------------- */ .pdv-config-card { margin-bottom: 16px; } .pdv-config-card:last-child { margin-bottom: 0; } .pdv-config-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .pdv-config-row:last-child { border-bottom: none; padding-bottom: 0; } .pdv-config-row:first-child { padding-top: 0; } /* Variante vertical: label+desc acima, conteúdo abaixo (ex: linha de pagamentos) */ .pdv-config-row--full { flex-direction: column; align-items: flex-start; gap: 12px; } .pdv-config-row--full .pdv-config-info { width: 100%; } .pdv-config-row--full .pdv-config-payments { width: 100%; } .pdv-config-info { flex: 1; min-width: 0; } .pdv-config-label { font-size: 0.9rem; font-weight: 600; color: var(--text-main); margin-bottom: 4px; } .pdv-config-desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; } .pdv-config-payments { display: flex; flex-wrap: wrap; gap: 8px; } .pdv-config-check-item { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); font-size: 0.82rem; color: var(--text-secondary); cursor: pointer; transition: all 0.16s; font-family: inherit; user-select: none; } .pdv-config-check-item:hover { background: rgba(255,255,255,0.08); color: var(--text-main); } .pdv-config-check-item input[type="checkbox"] { accent-color: var(--color-cyan); width: 15px; height: 15px; } .pdv-config-check-item:has(input:checked) { background: rgba(6,182,212,0.12); border-color: rgba(6,182,212,0.4); color: var(--color-cyan); } /* Light theme overrides for PDV inner nav */ html[data-theme='light'] .pdv-inner-nav { background: rgba(241,245,249,0.8); border-bottom-color: rgba(15,23,42,0.08); } html[data-theme='light'] .pdv-inner-nav-btn { color: #475569; } html[data-theme='light'] .pdv-inner-nav-btn:hover { background: rgba(15,23,42,0.04); color: #1e293b; } html[data-theme='light'] .pdv-inner-nav-btn.active { background: rgba(6,182,212,0.08); color: #0891b2; } html[data-theme='light'] .pdv-config-row { border-bottom-color: rgba(15,23,42,0.06); } html[data-theme='light'] .pdv-config-label { color: #1e293b; } html[data-theme='light'] .pdv-config-check-item { border-color: rgba(15,23,42,0.12); background: rgba(15,23,42,0.03); color: #475569; } html[data-theme='light'] .pdv-config-check-item:hover { background: rgba(15,23,42,0.06); color: #1e293b; } html[data-theme='light'] .pdv-config-check-item:has(input:checked) { background: rgba(8,145,178,0.1); border-color: rgba(8,145,178,0.4); color: #0891b2; } /* PDV cart header and product cards */ html[data-theme='light'] .amti-pdv-cart-header { background: rgba(238,241,246,0.8); color: var(--text-primary); border-bottom: 1px solid var(--border-color); } html[data-theme='light'] .amti-pdv-cart-header i { color: #475569 !important; filter: none !important; } html[data-theme='light'] .pdv-cart-items { color: #1e293b !important; } html[data-theme='light'] .pdv-cart-summary { background: rgba(241,245,249,0.8) !important; border-top-color: rgba(15,23,42,0.08) !important; } html[data-theme='light'] .amti-pdv-summary-row { border-color: rgba(15,23,42,0.10) !important; color: #1e293b !important; } html[data-theme='light'] #pdvCartTotal { color: #0f172a !important; text-shadow: none !important; } html[data-theme='light'] .pdv-empty-cart { color: rgba(15,23,42,0.3) !important; } html[data-theme='light'] .amti-pdv-catalog-card, html[data-theme='light'] .pdv-product-card { background: var(--card-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-soft); } /* Buttons that used white text: make them dark text on light backgrounds */ html[data-theme='light'] .amti-btn-emerald, html[data-theme='light'] .amti-btn-cyan, html[data-theme='light'] .amti-btn-danger { color: var(--text-primary) !important; border-color: rgba(15,23,42,0.06) !important; box-shadow: 0 8px 18px rgba(15,23,42,0.04) !important; } /* Context menus */ html[data-theme='light'] .amti-context-menu { background: var(--card-surface); background-color: var(--card-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-soft); } /* Center empty state rows for OS tables */ .amti-table .os-empty-row td { text-align: center; color: var(--text-secondary); padding: 18px 12px; } /* Reduce overly-saturated accent usage */ html[data-theme='light'] .pdv-product-card::before { background: linear-gradient(90deg, rgba(99,102,241,0.18), rgba(170,170,170,0.08)); } /* Generic inline-style overrides: captura elementos que ainda recebem backgrounds escuros via inline style */ html[data-theme='light'] [style*="rgba(15, 23, 42"] { background: var(--card-surface) !important; background-image: none !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-soft) !important; } html[data-theme='light'] [style*="rgba(8, 15, 28"] { background: var(--card-surface) !important; background-image: none !important; } html[data-theme='light'] [style*="background: rgba(0, 0, 0"] { background: rgba(238,241,246,0.8) !important; color: var(--text-primary) !important; } /* Catch inline dark backgrounds written without spaces (e.g. rgba(0,0,0,0.3)) */ html[data-theme='light'] [style*="rgba(15,23,42"], html[data-theme='light'] [style*="rgba(8,15,28"], html[data-theme='light'] [style*="rgba(0,0,0"] { background: var(--card-surface) !important; background-image: none !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } /* If element has inline dark background AND inline white color, make text dark (preserve badges with colored bg) */ html[data-theme='light'] [style*="rgba(15, 23, 42"][style*="color: #fff"], html[data-theme='light'] [style*="rgba(15,23,42"][style*="color: #fff"], html[data-theme='light'] [style*="rgba(0, 0, 0"][style*="color: #fff"], html[data-theme='light'] [style*="rgba(0,0,0"][style*="color: #fff"], html[data-theme='block-light'] [style*="rgba(15, 23, 42"][style*="color: #fff"], html[data-theme='block-light'] [style*="rgba(15,23,42"][style*="color: #fff"], html[data-theme='block-light'] [style*="rgba(0, 0, 0"][style*="color: #fff"], html[data-theme='block-light'] [style*="rgba(0,0,0"][style*="color: #fff"] { color: var(--text-primary) !important; } /* block-light: override inline dark backgrounds without white text */ html[data-theme='block-light'] [style*="rgba(15,23,42"], html[data-theme='block-light'] [style*="rgba(15, 23, 42"], html[data-theme='block-light'] [style*="rgba(8,15,28"], html[data-theme='block-light'] [style*="rgba(8, 15, 28"], html[data-theme='block-light'] [style*="rgba(0,0,0"], html[data-theme='block-light'] [style*="rgba(0, 0, 0"] { background: var(--card-surface) !important; background-image: none !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } /* ─── PERFIL ULTRA — Cores ricas e fiéis aos temas originais ─── */ html[data-theme='dark'] body.amti-performance-mode { --bg-main: #050a10; --bg-card: #0c1424; --card-surface: #0c1424; --card-surface-hover: #101c30; --button-surface: #101e36; --button-surface-hover: #152644; --card-glow: none; --card-glow-hover: none; --bg-card-soft: #09101d; --bg-input: #0e1728; --border-color: rgba(148, 163, 184, 0.16); --border-focus: #22d3ee; --surface-strong: #0c1424; --surface-strong-hover: #101c30; --accent-soft: rgba(56, 189, 248, 0.12); --text-primary: #eff6ff; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-glow: none; --accent-gradient: #22d3ee; --topbar-bg: linear-gradient(90deg, #010204 0%, #03050a 30%, #060a12 65%, #090e18 100%); --table-header-bg: #0a1322; } html[data-theme='light'] body.amti-performance-mode { --bg-main: #eef1f6; --bg-card: #eef1f6; --card-surface: #eef1f6; --card-surface-hover: #e8ecf2; --button-surface: #e2e6ed; --button-surface-hover: #d7dce5; --card-glow: none; --card-glow-hover: none; --bg-card-soft: #e6eaf0; --bg-input: #e2e6ed; --border-color: rgba(15, 23, 42, 0.12); --border-focus: #0284c7; --surface-strong: #eef1f6; --surface-strong-hover: #e8ecf2; --accent-soft: #e4e8ef; --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --shadow-soft: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-glow: none; --accent-gradient: #0284c7; --topbar-bg: linear-gradient(90deg, #a4b2c4 0%, #bcc8d7 30%, #dbe3ec 65%, #eef1f6 100%); --table-header-bg: #f8fafc; } html[data-theme='block-steel'] body.amti-performance-mode { --bg-main: #10161f; --bg-card: #1c2430; --card-surface: #1c2430; --card-surface-hover: #222d3b; --button-surface: #273444; --button-surface-hover: #314053; --card-glow: none; --card-glow-hover: none; --bg-card-soft: #171f2a; --bg-input: #121820; --border-color: #3b4756; --border-focus: #8fa3b5; --surface-strong: #171e26; --surface-strong-hover: #202933; --accent-soft: #242d38; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.4); --shadow-glow: none; --accent-gradient: #8fa3b5; --topbar-bg: linear-gradient(90deg, #04070b 0%, #0b1118 30%, #131c26 65%, #182230 100%); --table-header-bg: #171f29; } html[data-theme='block-blue'] body.amti-performance-mode { --bg-main: #050c18; --bg-card: #0b1a33; --card-surface: #0b1a33; --card-surface-hover: #0f2244; --button-surface: #10274e; --button-surface-hover: #153365; --card-glow: none; --card-glow-hover: none; --bg-card-soft: #081427; --bg-input: #061021; --border-color: #1a355e; --border-focus: #00d2ff; --surface-strong: #0b1a33; --surface-strong-hover: #0f2244; --accent-soft: #081427; --text-primary: #f0f5ff; --text-secondary: #c2d1e8; --text-muted: #829abf; --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-glow: none; --accent-gradient: #00d2ff; --topbar-bg: linear-gradient(90deg, #010408 0%, #030814 30%, #061122 65%, #0b182e 100%); --table-header-bg: #08152b; } html[data-theme='block-light'] body.amti-performance-mode { --bg-main: #cbd5e1; --bg-card: #f8fafc; --card-surface: #f8fafc; --card-surface-hover: #f1f5f9; --button-surface: #e2e8f0; --button-surface-hover: #cbd5e1; --card-glow: none; --card-glow-hover: none; --bg-card-soft: #f1f5f9; --bg-input: #ffffff; --border-color: #94a3b8; --border-focus: #1e293b; --surface-strong: #f8fafc; --surface-strong-hover: #f1f5f9; --accent-soft: #f1f5f9; --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --shadow-soft: 0 2px 8px rgba(30, 41, 59, 0.08); --shadow-glow: none; --accent-gradient: #1e293b; --topbar-bg: linear-gradient(90deg, #708196 0%, #8b9cb0 30%, #aab8c8 65%, #cbd5e1 100%); --table-header-bg: #e2e8f0; } html[data-theme='dark-block'] body.amti-performance-mode { --bg-main: #000000; --bg-card: #0a0a0a; --card-surface: #0a0a0a; --card-surface-hover: #121212; --button-surface: #111111; --button-surface-hover: #1a1a1a; --card-glow: none; --card-glow-hover: none; --bg-card-soft: #050505; --bg-input: #040404; --border-color: #222222; --border-focus: #444444; --surface-strong: #080808; --surface-strong-hover: #141414; --accent-soft: #111111; --text-primary: #ffffff; --text-secondary: #aaaaaa; --text-muted: #666666; --shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.6); --shadow-glow: none; --accent-gradient: #666666; --topbar-bg: linear-gradient(90deg, #000000 0%, #020203 30%, #060608 65%, #0d0d10 100%); --table-header-bg: #070707; } /* ─── MODO ULTRA DESEMPENHO — Cores idênticas com renderização ultra-otimizada ─── */ html[data-theme='dark'] body.amti-ultra-performance-mode { --bg-main: #050a10; --bg-card: #0c1424; --card-surface: #0c1424; --card-surface-hover: #101c30; --button-surface: #101e36; --button-surface-hover: #152644; --card-glow: none; --card-glow-hover: none; --bg-card-soft: #09101d; --bg-input: #0e1728; --border-color: rgba(148, 163, 184, 0.16); --border-focus: #22d3ee; --surface-strong: #0c1424; --surface-strong-hover: #101c30; --accent-soft: rgba(56, 189, 248, 0.12); --text-primary: #eff6ff; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --shadow-soft: none; --shadow-glow: none; --accent-gradient: #22d3ee; --topbar-bg: linear-gradient(90deg, #010204 0%, #03050a 30%, #060a12 65%, #090e18 100%); --table-header-bg: #0a1322; } html[data-theme='light'] body.amti-ultra-performance-mode { --bg-main: #d0d5dd; --bg-card: #eef1f6; --card-surface: #eef1f6; --card-surface-hover: #e8ecf2; --button-surface: #e2e6ed; --button-surface-hover: #d7dce5; --card-glow: none; --card-glow-hover: none; --bg-card-soft: #e6eaf0; --bg-input: #e2e6ed; --border-color: rgba(15, 23, 42, 0.12); --border-focus: #0284c7; --surface-strong: #eef1f6; --surface-strong-hover: #e8ecf2; --accent-soft: #e4e8ef; --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #6b7c8a; --shadow-soft: none; --shadow-glow: none; --accent-gradient: #0284c7; --topbar-bg: linear-gradient(90deg, #a4b2c4 0%, #bcc8d7 30%, #dbe3ec 65%, #eef1f6 100%); --table-header-bg: #f8fafc; } html[data-theme='block-steel'] body.amti-ultra-performance-mode { --bg-main: #10161f; --bg-card: #1c2430; --card-surface: #1c2430; --card-surface-hover: #222d3b; --button-surface: #273444; --button-surface-hover: #314053; --card-glow: none; --card-glow-hover: none; --bg-card-soft: #171f2a; --bg-input: #121820; --border-color: #3b4756; --border-focus: #8fa3b5; --surface-strong: #171e26; --surface-strong-hover: #202933; --accent-soft: #242d38; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --shadow-soft: none; --shadow-glow: none; --accent-gradient: #8fa3b5; --topbar-bg: linear-gradient(90deg, #04070b 0%, #0b1118 30%, #131c26 65%, #182230 100%); --table-header-bg: #171f29; } html[data-theme='block-blue'] body.amti-ultra-performance-mode { --bg-main: #050c18; --bg-card: #0b1a33; --card-surface: #0b1a33; --card-surface-hover: #0f2244; --button-surface: #10274e; --button-surface-hover: #153365; --card-glow: none; --card-glow-hover: none; --bg-card-soft: #081427; --bg-input: #061021; --border-color: #1a355e; --border-focus: #00d2ff; --surface-strong: #0b1a33; --surface-strong-hover: #0f2244; --accent-soft: #081427; --text-primary: #f0f5ff; --text-secondary: #c2d1e8; --text-muted: #829abf; --shadow-soft: none; --shadow-glow: none; --accent-gradient: #00d2ff; --topbar-bg: linear-gradient(90deg, #010408 0%, #030814 30%, #061122 65%, #0b182e 100%); --table-header-bg: #08152b; } html[data-theme='block-light'] body.amti-ultra-performance-mode { --bg-main: #cbd5e1; --bg-card: #f8fafc; --card-surface: #f8fafc; --card-surface-hover: #f1f5f9; --button-surface: #e2e8f0; --button-surface-hover: #cbd5e1; --card-glow: none; --card-glow-hover: none; --bg-card-soft: #f1f5f9; --bg-input: #ffffff; --border-color: #94a3b8; --border-focus: #1e293b; --surface-strong: #f8fafc; --surface-strong-hover: #f1f5f9; --accent-soft: #f1f5f9; --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --shadow-soft: none; --shadow-glow: none; --accent-gradient: #1e293b; --topbar-bg: linear-gradient(90deg, #708196 0%, #8b9cb0 30%, #aab8c8 65%, #cbd5e1 100%); --table-header-bg: #e2e8f0; } html[data-theme='dark-block'] body.amti-ultra-performance-mode { --bg-main: #000000; --bg-card: #0a0a0a; --card-surface: #0a0a0a; --card-surface-hover: #121212; --button-surface: #111111; --button-surface-hover: #1a1a1a; --card-glow: none; --card-glow-hover: none; --bg-card-soft: #050505; --bg-input: #040404; --border-color: #222222; --border-focus: #444444; --surface-strong: #080808; --surface-strong-hover: #141414; --accent-soft: #111111; --text-primary: #ffffff; --text-secondary: #aaaaaa; --text-muted: #666666; --shadow-soft: none; --shadow-glow: none; --accent-gradient: #666666; --topbar-bg: linear-gradient(90deg, #000000 0%, #020203 30%, #060608 65%, #0d0d10 100%); --table-header-bg: #070707; } /* ─── MODAIS, POPUPS E ALERTAS NO PERFIL ULTRA ─── */ :is(body, html).amti-performance-mode .amti-modal { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--modal-backdrop, rgba(4, 6, 12, 0.88)) !important; } :is(body, html).amti-ultra-performance-mode .amti-modal { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(2, 4, 10, 0.96) !important; animation: none !important; transition: none !important; box-shadow: none !important; } :is(body, html).amti-performance-mode :is(.amti-modal-content, .swal2-popup, .amti-context-menu, .select2-dropdown) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important; } :is(body, html).amti-ultra-performance-mode :is(.amti-modal-content, .swal2-popup, .amti-context-menu, .select2-dropdown) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; } body.amti-performance-mode .amti-modal-header, body.amti-ultra-performance-mode .amti-modal-header { background: var(--topbar-bg, var(--bg-card-soft)) !important; border-bottom: 1px solid var(--border-color) !important; } body.amti-performance-mode .amti-modal-footer, body.amti-ultra-performance-mode .amti-modal-footer { background: var(--bg-card-soft, var(--bg-card)) !important; border-top: 1px solid var(--border-color) !important; } body.amti-performance-mode .os-modal-section, body.amti-ultra-performance-mode .os-modal-section { background: var(--bg-card-soft, var(--bg-card)) !important; border: 1px solid var(--border-color) !important; } body.amti-performance-mode .os-modal-section-header, body.amti-ultra-performance-mode .os-modal-section-header { background: var(--bg-input, var(--bg-card)) !important; border-bottom: 1px solid var(--border-color) !important; } /* ─── TABELAS: LINHAS MAIS FORTES E CONTRASTE MELHOR NO TEMA LIGHT ─── */ html[data-theme='light'] .amti-table th { background: rgba(0,0,0,0.02); border-bottom: 2px solid rgba(15,23,42,0.10); color: var(--text-secondary); } html[data-theme='light'] .amti-table td { border-bottom: 1px solid rgba(15,23,42,0.08); } html[data-theme='light'] .amti-table tr:hover td { background: rgba(0,0,0,0.015); } html[data-theme='light'] .amti-table .amti-table-resizer::before { background: rgba(15,23,42,0.25); } /* ═══════════════════════════════════════════════════════════════════════ ULTRA PROFILE — Optimized for resource-limited hardware Uses specific selectors instead of expensive wildcards (*) ═══════════════════════════════════════════════════════════════════════ */ /* Reduz efeitos decorativos no perfil ultra */ body.amti-performance-mode .amti-card, body.amti-performance-mode .amti-grid-card, body.amti-performance-mode .amti-sidebar, body.amti-performance-mode .amti-table-container, body.amti-performance-mode .amti-modern-calendar, body.amti-performance-mode .amti-clock-widget, body.amti-performance-mode .amti-digital-clock { box-shadow: none !important; background-image: none !important; background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; } /* O tema Light usa as mesmas variáveis no perfil ultra */ html[data-theme='light'] body.amti-performance-mode .amti-card, html[data-theme='light'] body.amti-performance-mode .amti-grid-card, html[data-theme='light'] body.amti-performance-mode .amti-sidebar, html[data-theme='light'] body.amti-performance-mode .amti-table-container, html[data-theme='light'] body.amti-performance-mode .amti-modern-calendar, html[data-theme='light'] body.amti-performance-mode .amti-clock-widget, html[data-theme='light'] body.amti-performance-mode .amti-digital-clock { border: 1px solid var(--border-color) !important; background: var(--bg-card) !important; } /* Perfil ultra: painel de configurações */ html[data-theme='light'] body.amti-performance-mode .amti-settings-shell { background: var(--bg-card) !important; background-image: none !important; } /* Perfil ultra: modal Minha Conta */ html[data-theme='light'] body.amti-performance-mode #myAccountModal .amti-modal-content { background: var(--bg-card) !important; background-image: none !important; } /* Perfil ultra: cards do Gerente IA */ html[data-theme='light'] body.amti-performance-mode .ai-advisor-chat, html[data-theme='light'] body.amti-performance-mode .ai-advisor-suggestions { background: var(--bg-card) !important; background-image: none !important; } /* Perfil ultra: cards secundários */ html[data-theme='light'] body.amti-performance-mode .amti-soft-card, html[data-theme='light'] body.amti-performance-mode .amti-settings-card-soft { background: var(--bg-card) !important; background-image: none !important; } /* Perfil ultra: cards da página inicial */ html[data-theme='light'] body.amti-performance-mode #tab-home .amti-card, html[data-theme='light'] body.amti-performance-mode #tab-home .amti-grid-card, html[data-theme='light'] body.amti-performance-mode #tab-home .amti-stat-card, html[data-theme='light'] body.amti-performance-mode #tab-home .amti-archive-card, html[data-theme='light'] body.amti-performance-mode #tab-home .pdv-product-card, html[data-theme='light'] body.amti-performance-mode #tab-home .amti-grid-card.os-card, html[data-theme='light'] body.amti-performance-mode #tab-home .amti-card-library-item, html[data-theme='light'] body.amti-performance-mode #tab-home .amti-grid-card.shortcut-card, html[data-theme='light'] body.amti-performance-mode #tab-home .amti-grid-card.ai-tips-live-card { background: var(--bg-card) !important; } /* ── light: Modal glass, form fields, select options ─────────────────────── */ html[data-theme='light'] .amti-form-control, html[data-theme='light'] input, html[data-theme='light'] textarea, html[data-theme='light'] select { background: #e2e6ed !important; background-color: #e2e6ed !important; border-color: rgba(15,23,42,0.12) !important; color: #1e293b !important; } html[data-theme='light'] .amti-form-control:focus { background-color: #dde1e8 !important; border-color: #5eead4 !important; box-shadow: 0 0 0 3px rgba(94,234,212,0.12) !important; } html[data-theme='light'] select option:checked, html[data-theme='light'] .amti-form-control option:checked, html[data-theme='light'] .amti-form-control option:selected { background: rgba(15,23,42,0.08) !important; color: #1e293b !important; } html[data-theme='light'] select option:hover, html[data-theme='light'] .amti-form-control option:hover { background: rgba(15,23,42,0.05) !important; } body.amti-performance-mode .amti-card-body, body.amti-performance-mode .amti-card-header { box-shadow: none !important; background-image: none !important; color: var(--text-primary) !important; } body.amti-performance-mode .amti-dashboard-grid { background: transparent !important; box-shadow: none !important; background-image: none !important; } /* Remove gradientes de fundo no perfil ultra */ html[data-theme='dark'] body.amti-performance-mode, html[data-theme='dark'] body.amti-ultra-performance-mode { background: var(--bg-main) !important; } html[data-theme='light'] body.amti-performance-mode, html[data-theme='light'] body.amti-ultra-performance-mode { background: var(--bg-main) !important; } html[data-theme='block-steel'] body.amti-performance-mode, html[data-theme='block-steel'] body.amti-ultra-performance-mode { background: var(--bg-main) !important; } html[data-theme='block-blue'] body.amti-performance-mode, html[data-theme='block-blue'] body.amti-ultra-performance-mode { background: var(--bg-main) !important; } html[data-theme='block-light'] body.amti-performance-mode, html[data-theme='block-light'] body.amti-ultra-performance-mode { background: var(--bg-main) !important; } html[data-theme='dark-block'] body.amti-performance-mode, html[data-theme='dark-block'] body.amti-ultra-performance-mode { background: var(--bg-main) !important; } /* ─── PSEUDO-ELEMENTS: target specific components, NOT wildcard ─── */ body.amti-performance-mode .amti-card::before, body.amti-performance-mode .amti-card::after, body.amti-performance-mode .amti-grid-card::before, body.amti-performance-mode .amti-grid-card::after, body.amti-performance-mode .amti-sidebar::before, body.amti-performance-mode .amti-sidebar::after, body.amti-performance-mode .amti-topbar::before, body.amti-performance-mode .amti-topbar::after, body.amti-performance-mode .amti-modal-content::before, body.amti-performance-mode .amti-modal-content::after, body.amti-performance-mode .amti-brand-logo::before, body.amti-performance-mode .amti-brand-logo::after, body.amti-performance-mode .amti-nav-item::before, body.amti-performance-mode .amti-nav-item::after { background-image: none !important; box-shadow: none !important; text-shadow: none !important; display: none !important; } /* ─── ANIMATIONS: disable on specific elements, NOT wildcard ─── */ body.amti-performance-mode .amti-card, body.amti-performance-mode .amti-grid-card, body.amti-performance-mode .amti-table-container, body.amti-performance-mode .amti-sidebar, body.amti-performance-mode .amti-topbar, body.amti-performance-mode .amti-modal, body.amti-performance-mode .amti-modal-content, body.amti-performance-mode .amti-brand-logo, body.amti-performance-mode .amti-brand-name, body.amti-performance-mode .amti-stat-card, body.amti-performance-mode .amti-archive-card, body.amti-performance-mode .pdv-product-card, body.amti-performance-mode .amti-card-library-item, body.amti-performance-mode .amti-modern-calendar, body.amti-performance-mode .amti-clock-widget, body.amti-performance-mode .amti-digital-clock { animation: none !important; scroll-behavior: auto !important; } /* ─── TRANSITIONS: ultra-short (80ms) instead of 0s — preserves visual feedback ─── */ body.amti-performance-mode .amti-card, body.amti-performance-mode .amti-grid-card, body.amti-performance-mode .amti-stat-card, body.amti-performance-mode .amti-archive-card { transition: border-color 80ms ease !important; } body.amti-performance-mode .amti-btn, body.amti-performance-mode .amti-nav-item button, body.amti-performance-mode .amti-logout-btn { transition: background 80ms ease, color 80ms ease !important; } body.amti-performance-mode .amti-form-control, body.amti-performance-mode input, body.amti-performance-mode textarea, body.amti-performance-mode select { transition: none !important; } body.amti-performance-mode .amti-modal-body::-webkit-scrollbar-thumb { transition: none !important; } /* ─── HOVER: border-color only, no transforms ─── */ body.amti-performance-mode .amti-card:hover, body.amti-performance-mode .amti-grid-card:hover, body.amti-ultra-performance-mode .amti-card:hover, body.amti-ultra-performance-mode .amti-grid-card:hover { transform: none !important; box-shadow: none !important; border-color: var(--border-focus) !important; } body.amti-performance-mode .amti-nav-item:hover { transform: none !important; } /* ─── GLOW/BLUR/ANIMATION HELPER CLASSES (used when effects are individually toggled) ─── */ /* ── amti-hide-glow: remove ALL glow/shadow layers using :is() consolidation ── */ body.amti-hide-glow :is( .amti-card, .amti-grid-card, .amti-sidebar, .amti-modal-content, .amti-topbar, .amti-brand-logo, .amti-stat-card, .amti-archive-card, .pdv-product-card, .amti-card-library-item, .amti-grid-card.shortcut-card, .amti-grid-card.ai-tips-live-card, .amti-modern-calendar, .amti-clock-widget, .amti-digital-clock, .ai-advisor-chat, .ai-advisor-suggestions, .amti-table-container, .amti-os-search-panel, .os-card-search-panel, .amti-search-panel, .amti-context-menu, .amti-context-submenu, .pdv-cart, .pdv-cart-summary, .pdv-widget-results, .back-to-top-fab, .theme-glass, .wtheme-glass, .amti-theme-preview-card, .amti-startup-loader ) { box-shadow: none !important; text-shadow: none !important; filter: none !important; background-image: none !important; } /* Flatten card backgrounds — replace gradient surfaces with flat --bg-card */ body.amti-hide-glow :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .amti-card-library-item, .amti-grid-card.shortcut-card, .amti-grid-card.ai-tips-live-card, .amti-grid-card.os-card ) { background: var(--bg-card, #0c1322) !important; border-color: var(--border-color, rgba(148,163,184,0.12)) !important; } /* Hide decorative pseudo-elements (::before top-line, ::after sheen) */ body.amti-hide-glow :is( .amti-card, .amti-grid-card, .amti-modal-content, .amti-sidebar, .amti-topbar, .amti-brand-logo, .amti-nav-item )::before, body.amti-hide-glow :is( .amti-card, .amti-grid-card, .amti-modal-content, .amti-sidebar, .amti-topbar, .amti-brand-logo, .amti-nav-item )::after { background-image: none !important; box-shadow: none !important; text-shadow: none !important; display: none !important; } /* ── amti-hide-glow HOVER overrides ── */ body.amti-hide-glow :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .amti-grid-card.os-card, .amti-card-library-item, .amti-grid-card.shortcut-card, .amti-grid-card.ai-tips-live-card ):hover { box-shadow: none !important; text-shadow: none !important; background: var(--bg-card, #0c1322) !important; border-color: var(--border-color, rgba(148,163,184,0.12)) !important; } html[data-theme='light'] body.amti-hide-glow :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .amti-card-library-item, .amti-grid-card.shortcut-card, .amti-grid-card.ai-tips-live-card, .amti-grid-card.os-card ) { background: #f8fafc !important; border-color: rgba(15,23,42,0.08) !important; } html[data-theme='light'] body.amti-hide-glow :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .amti-grid-card.os-card, .amti-card-library-item, .amti-grid-card.shortcut-card, .amti-grid-card.ai-tips-live-card ):hover { box-shadow: none !important; background: #f8fafc !important; border-color: rgba(15,23,42,0.08) !important; } html[data-theme='dark-block'] body.amti-hide-glow :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .amti-card-library-item, .amti-grid-card.shortcut-card, .amti-grid-card.ai-tips-live-card, .amti-grid-card.os-card ) { background: #111214 !important; border-color: rgba(255,255,255,0.06) !important; } html[data-theme='dark-block'] body.amti-hide-glow :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .amti-card-library-item, .amti-grid-card.os-card, .amti-grid-card.shortcut-card, .amti-grid-card.ai-tips-live-card ):hover { box-shadow: none !important; background: #111214 !important; border-color: rgba(255,255,255,0.06) !important; } /* ── amti-hide-blur: remove backdrop-filter using :is() consolidation ── */ body.amti-hide-blur :is( .amti-card, .amti-grid-card, .amti-sidebar, .amti-topbar, .amti-modal, .amti-modal-content, .amti-os-search-panel, .os-card-search-panel, .amti-search-panel, .pdv-cart-summary, .pdv-widget-results, .theme-glass, .wtheme-glass, .amti-startup-loader, .drag-ghost, .amti-drag-ghost, .amti-context-menu, .amti-context-submenu, .design-glassmini, .amti-digital-clock, .amti-clock-widget, .modal, .toast, .auth-card ) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Keep the modal backdrop solid without background filters. */ body.amti-hide-blur.amti-has-open-modal::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Keep popup and modal overlays free of background filters, including inline styles. */ :is(body, html).amti-hide-blur :is( #feedbackOverlay, #osUnsavedPopup, .zn-modal-overlay, #amtiValidationPopup, #updateProgressModal, #amtiSuccessPopup, #restoreProgressModal, #userLogDetailModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, .amti-modal-backdrop-blur ) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── amti-hide-animations: disable all transitions and CSS animations ── */ body.amti-hide-animations *, body.amti-hide-animations *::before, body.amti-hide-animations *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* Lightweight pulse for alert button in performance/ultra modes — only transform, no pseudo-elements */ @keyframes aiAlertPulsePerf { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } body.amti-hide-animations .ai-alert-mode { animation: aiAlertPulsePerf 2s ease-in-out infinite !important; } body.amti-hide-animations .ai-alert-mode.ai-alert-glow { animation: aiAlertPulsePerf 2s ease-in-out infinite !important; } body.amti-hide-animations .ai-alert-mode.ai-alert-sound-waves { animation: aiAlertPulsePerf 2s ease-in-out infinite !important; } body.amti-hide-animations .ai-alert-mode.ai-alert-phone-ring { animation: aiAlertPulsePerf 2s ease-in-out infinite !important; } body.amti-hide-animations .ai-alert-mode.ai-alert-magnetic-pulse { animation: aiAlertPulsePerf 2s ease-in-out infinite !important; } body.amti-hide-animations .ai-alert-mode.ai-alert-neon-digital { animation: aiAlertPulsePerf 2s ease-in-out infinite !important; } body.amti-hide-animations .ai-alert-mode.ai-alert-digital-scan { animation: aiAlertPulsePerf 2s ease-in-out infinite !important; } body.amti-hide-animations .ai-alert-mode.ai-alert-square-pulse { animation: aiAlertPulsePerf 2s ease-in-out infinite !important; } body.amti-hide-animations .ai-alert-mode.ai-alert-glitch-block { animation: aiAlertPulsePerf 2s ease-in-out infinite !important; } body.amti-hide-animations .ai-alert-mode.ai-alert-flip-cube, body.amti-hide-animations .ai-alert-mode.ai-alert-border-spin, body.amti-hide-animations .ai-alert-mode.ai-alert-pop-block { animation: aiAlertPulsePerf 2s ease-in-out infinite !important; } /* Preserve essential interactive feedback even when animations are off */ body.amti-hide-animations input[type="checkbox"], body.amti-hide-animations input[type="radio"] { transition: none !important; } body.amti-hide-animations .amti-form-control:focus, body.amti-hide-animations input:focus, body.amti-hide-animations textarea:focus, body.amti-hide-animations select:focus { transition: border-color 0.1s ease, box-shadow 0.1s ease !important; } /* ── amti-no-card-hover: disable card lift/suspension on hover ── */ body.amti-no-card-hover .amti-card:hover, body.amti-no-card-hover .amti-grid-card:hover, body.amti-no-card-hover .amti-stat-card:hover, body.amti-no-card-hover .amti-archive-card:hover, body.amti-no-card-hover .pdv-product-card:hover, body.amti-no-card-hover .amti-grid-card.os-card:hover, body.amti-no-card-hover .amti-card-library-item:hover, body.amti-no-card-hover .amti-grid-card.shortcut-card:hover, body.amti-no-card-hover .amti-grid-card.ai-tips-live-card:hover { transform: none !important; } body.amti-no-card-hover #tab-home .amti-card:hover, body.amti-no-card-hover #tab-home .amti-grid-card:hover, body.amti-no-card-hover #tab-home .amti-stat-card:hover, body.amti-no-card-hover #tab-home .amti-archive-card:hover, body.amti-no-card-hover #tab-home .pdv-product-card:hover, body.amti-no-card-hover #tab-home .amti-grid-card.os-card:hover, body.amti-no-card-hover #tab-home .amti-card-library-item:hover, body.amti-no-card-hover #tab-home .amti-grid-card.shortcut-card:hover, body.amti-no-card-hover #tab-home .amti-grid-card.ai-tips-live-card:hover { transform: none !important; } body.amti-no-card-hover .amti-grid-card::after { transform: translateX(-110%) !important; opacity: 0 !important; } body.amti-no-card-hover #tab-home .amti-grid-card::after { transform: translateX(-110%) !important; opacity: 0 !important; } body.amti-no-card-hover .amti-card .amti-card-btn:hover { transform: none !important; box-shadow: none !important; } /* Dim the page behind open modals without blurring its contents. */ body.amti-has-open-modal::after { content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--modal-backdrop, rgba(4, 6, 12, 0.82)) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 9990 !important; pointer-events: none; transform: translateZ(0); will-change: opacity; contain: strict; } /* Keep every background dialog dimmed and non-interactive beneath the active one. */ .amti-modal-underlay { filter: brightness(0.5) !important; pointer-events: none !important; } /* Perfil ultra: mantém o fundo do modal leve e sem filtros. */ :is(body, html).amti-performance-mode.amti-has-open-modal::after, body.amti-performance-mode.amti-has-open-modal::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--modal-backdrop, rgba(4, 6, 12, 0.88)) !important; /* Fundo escuro semi-transparente limpo, legível e leve */ } /* Modo ultra desempenho: desativa desfoque, fundo de alto contraste opaco, zero animações e zero sombras */ :is(body, html).amti-ultra-performance-mode.amti-has-open-modal::after, body.amti-ultra-performance-mode.amti-has-open-modal::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(2, 4, 10, 0.96) !important; animation: none !important; transition: none !important; box-shadow: none !important; } * { box-sizing: border-box; margin: 0; padding: 0; } html { overflow: hidden !important; height: 100vh !important; max-height: 100vh !important; } body { background: var(--bg-main); color: var(--text-primary) !important; font-family: var(--font-family) !important; overflow: hidden !important; height: 100vh !important; max-height: 100vh !important; width: 100%; } /* Scrollbar styles */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-main); } ::-webkit-scrollbar-thumb { background: var(--bg-input); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Dashboard Shell Layout */ .amti-shell { display: flex; min-height: 100vh; height: 100vh; max-height: 100vh; width: 100%; overflow: hidden; background: var(--bg-main); } /* A tarja de contrato fica fora do shell; o shell ocupa apenas o espaço restante da viewport para manter todo o conteúdo acessível. */ body.has-contract-expiration-banner { display: flex; flex-direction: column; min-height: 100vh; height: 100vh; overflow: hidden; } body.has-contract-expiration-banner .amti-shell { height: calc(100vh - 38px); min-height: 0; max-height: calc(100vh - 38px); flex: 1 1 auto; } body.has-contract-expiration-banner .amti-sidebar, body.has-contract-expiration-banner .amti-main { height: 100%; max-height: 100%; } .amti-sidebar-overlay { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 35; } body.mobile-sidebar-open .amti-sidebar-overlay { opacity: 1; pointer-events: auto; } @media (max-width: 1023px) { body.mobile-sidebar-open { overflow: hidden; } } /* ═══════════════════════════════════════ SIDEBAR — layout principal ═══════════════════════════════════════ */ .amti-sidebar { width: 260px; min-width: 260px; height: 100vh; min-height: 0; position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; flex-shrink: 0; overflow: hidden; background: linear-gradient(180deg, rgba(7, 10, 16, 0.98) 0%, rgba(4, 7, 11, 0.98) 46%, rgba(2, 5, 8, 0.98) 100%); border-right: 1px solid rgba(148, 163, 184, 0.14); box-shadow: inset -1px 0 0 rgba(148, 163, 184, 0.06), 0 18px 30px rgba(2, 6, 23, 0.35); /* ─── Smooth width transition ─── */ transition: width 380ms cubic-bezier(0.4, 0, 0.2, 1), min-width 380ms cubic-bezier(0.4, 0, 0.2, 1); /* Prevent content reflow during transition */ contain: layout style; } body:not(.amti-hide-animations):not(.amti-performance-mode):not(.amti-ultra-performance-mode):not(.sidebar-mode-hover) .amti-sidebar, body.amti-motion-enabled:not(.sidebar-mode-hover) .amti-sidebar { transition: width 380ms cubic-bezier(0.4, 0, 0.2, 1), min-width 380ms cubic-bezier(0.4, 0, 0.2, 1) !important; /* GPU layer promotion — width não pode ser composited, mas transform promove a camada de pintura para o compositor, minimizando repaint cruzado */ transform: translateZ(0); backface-visibility: hidden; } body:not(.amti-hide-animations):not(.amti-performance-mode):not(.amti-ultra-performance-mode) .amti-nav-item button span, body.amti-motion-enabled .amti-nav-item button span, body:not(.amti-hide-animations):not(.amti-performance-mode):not(.amti-ultra-performance-mode) .amti-brand-name, body.amti-motion-enabled .amti-brand-name, body:not(.amti-hide-animations):not(.amti-performance-mode):not(.amti-ultra-performance-mode) .amti-user-name, body.amti-motion-enabled .amti-user-name, body:not(.amti-hide-animations):not(.amti-performance-mode):not(.amti-ultra-performance-mode) .amti-user-role, body.amti-motion-enabled .amti-user-role, body:not(.amti-hide-animations):not(.amti-performance-mode):not(.amti-ultra-performance-mode) .amti-user-info, body.amti-motion-enabled .amti-user-info { transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), transform 280ms cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Decorative overlay — MUST be absolute so it doesn't steal flex space */ .amti-sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(135deg, rgba(56, 189, 248, 0.04), transparent 22%), linear-gradient(180deg, rgba(129, 140, 248, 0.03), transparent 35%); } /* All direct sidebar children sit above the decorative overlay */ .amti-sidebar > * { position: relative; z-index: 1; } /* ─── Mode: expanded ─── */ body.sidebar-mode-expanded .amti-sidebar { width: 260px; min-width: 260px; } /* ─── Mode: hover (collapsed by default, expands on hover) ─── */ body.sidebar-mode-hover .amti-sidebar { width: 72px; min-width: 72px; } body.sidebar-mode-hover .amti-sidebar:hover { width: 260px; min-width: 260px; } @media (min-width: 1024px) { /* Mantem a largura do conteudo fixa enquanto o menu expande sobre a pagina. */ body.sidebar-mode-hover .amti-shell { position: relative; } body.sidebar-mode-hover .amti-shell > .amti-sidebar { position: absolute; inset: 0 auto 0 0; z-index: 50; min-width: 72px !important; transition: width 220ms cubic-bezier(0.2, 0.8, 0.2, 1) !important; } body.sidebar-mode-hover .amti-shell > .amti-sidebar:hover { min-width: 72px !important; } body.sidebar-mode-hover .amti-shell > .amti-main { margin-left: 72px; } } @media (min-width: 1024px) and (prefers-reduced-motion: reduce) { body.sidebar-mode-hover .amti-shell > .amti-sidebar { transition-duration: .01ms !important; } } /* ─── Mode: collapsed (always icon-only) ─── */ body.sidebar-mode-collapsed .amti-sidebar { width: 72px; min-width: 72px; /* No overflow-y:auto here — space-evenly handles distribution */ overflow: hidden; } /* ────────────────────────────────────────────── SIDEBAR TEXT FADE — brand-name e user-profile (span do nav-item tem sua própria regra abaixo) ────────────────────────────────────────────── */ /* Brand name e user profile: fade suave */ .amti-brand-name, .amti-nav-item button .amti-submenu-arrow, .amti-user-name, .amti-user-role, .amti-user-action-label, .amti-user-info { transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), transform 280ms cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; white-space: nowrap; flex-shrink: 1; min-width: 0; } /* ── COLAPSADO: oculta elementos de texto ── */ body.sidebar-mode-hover .amti-sidebar:not(:hover) .amti-brand-name, body.sidebar-mode-hover .amti-sidebar:not(:hover) .amti-nav-item button .amti-submenu-arrow, body.sidebar-mode-hover .amti-sidebar:not(:hover) .amti-user-name, body.sidebar-mode-hover .amti-sidebar:not(:hover) .amti-user-role, body.sidebar-mode-hover .amti-sidebar:not(:hover) .amti-user-action-label, body.sidebar-mode-hover .amti-sidebar:not(:hover) .amti-user-info, body.sidebar-mode-collapsed .amti-brand-name, body.sidebar-mode-collapsed .amti-nav-item button .amti-submenu-arrow, body.sidebar-mode-collapsed .amti-user-name, body.sidebar-mode-collapsed .amti-user-role, body.sidebar-mode-collapsed .amti-user-action-label, body.sidebar-mode-collapsed .amti-user-info { opacity: 0; transform: translateX(4px); /* Puxa para a direita, evitando invadir a área do ícone */ pointer-events: none; } /* ── EXPANDIDO: exibe elementos de texto ── */ body.sidebar-mode-hover .amti-sidebar:hover .amti-brand-name, body.sidebar-mode-hover .amti-sidebar:hover .amti-nav-item button .amti-submenu-arrow, body.sidebar-mode-hover .amti-sidebar:hover .amti-user-name, body.sidebar-mode-hover .amti-sidebar:hover .amti-user-role, body.sidebar-mode-hover .amti-sidebar:hover .amti-user-action-label, body.sidebar-mode-hover .amti-sidebar:hover .amti-user-info, body.sidebar-mode-expanded .amti-brand-name, body.sidebar-mode-expanded .amti-nav-item button .amti-submenu-arrow, body.sidebar-mode-expanded .amti-user-name, body.sidebar-mode-expanded .amti-user-role, body.sidebar-mode-expanded .amti-user-action-label, body.sidebar-mode-expanded .amti-user-info { opacity: 1; transform: translateX(0); pointer-events: auto; } /* ═══════════════════════════════════════ BRAND HEADER — logo + nome ═══════════════════════════════════════ */ .amti-brand { flex: 0 0 72px; width: 100%; box-sizing: border-box; height: 72px; min-height: 72px; max-height: 72px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; /* (71px largura interna útil - 62px logo) / 2 = 4.5px -> Centralização exata com margens externas perfeitamente padronizadas em todos os 4 lados (7px físicos a 1.5x) */ padding: 0 4.5px; border-bottom: 1px solid var(--border-color); overflow: hidden; transition: padding 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease; } .amti-sidebar-close { display: none; flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; max-width: 36px; max-height: 36px; aspect-ratio: 1 / 1; box-sizing: border-box; padding: 0; margin-left: auto; align-items: center; justify-content: center; align-self: center; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: var(--close-btn-radius, 10px); background: rgba(148, 163, 184, 0.08); color: var(--text-primary); cursor: pointer; } .amti-sidebar-close i { line-height: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; } .amti-sidebar-close:hover, .amti-sidebar-close:focus-visible { background: rgba(56, 189, 248, 0.18); border-color: rgba(56, 189, 248, 0.42); } /* Remover os overrides que causavam reflow e saltos! O layout é fixo e apenas a largura do sidebar recorta o texto */ .amti-brand-logo { position: relative; flex-shrink: 0; width: 62px; height: 62px; min-width: 62px; max-width: 62px; margin: 0; padding: 0; box-sizing: border-box; border-radius: 10px; background: transparent; display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; font-size: 1.35rem; box-shadow: none; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); isolation: isolate; } /* Efeito de luz suave, circular e natural por trás da logo */ .amti-brand-logo::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(56, 189, 248, 0.24) 0%, rgba(99, 102, 241, 0.12) 45%, transparent 72%); opacity: 0.85; filter: none; pointer-events: none; z-index: 0; transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease; } .amti-brand-logo:hover::before { opacity: 1; filter: none; transform: scale(1.18); background: radial-gradient(circle, rgba(56, 189, 248, 0.38) 0%, rgba(99, 102, 241, 0.20) 48%, transparent 75%); } .amti-brand-logo:hover { transform: scale(1.04); } /* Quando não há imagem (apenas texto de inicial da empresa) */ .amti-brand-logo:not(:has(img)) { background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(99, 102, 241, 0.25) 100%); border: 1px solid rgba(56, 189, 248, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .amti-brand-logo img { position: relative; z-index: 1; display: block; width: 62px; height: 62px; min-width: 62px; min-height: 62px; max-width: 62px; max-height: 62px; margin: 0; padding: 0; box-sizing: border-box; object-fit: contain; border-radius: 10px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)); transition: filter 0.3s ease; } .amti-brand-logo:hover img { filter: drop-shadow(0 4px 14px rgba(56, 189, 248, 0.45)); } .amti-brand-name { font-size: 0.97rem; font-weight: 700; letter-spacing: 0.1px; line-height: 1.25; white-space: normal; word-break: break-word; color: var(--text-primary); flex-shrink: 1; } :is( html[data-theme='dark'], html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='dark-block'], html:not([data-theme]), body.theme-dark, body.theme-block-steel, body.theme-block-blue, body.theme-dark-block ) .amti-brand-name { background: linear-gradient(to right, #ffffff, #d4d4d8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Marca: garantia absoluta de contraste nos temas claros (Light Ice e Block Light) */ :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) :is(.amti-brand-name, #sidebarBrandName), :is( html[data-theme='light'], html.theme-light, body.theme-light ) .amti-sidebar :is(.amti-brand-name, #sidebarBrandName) { background: none !important; background-image: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: #0f172a !important; color: #0f172a !important; font-weight: 800 !important; opacity: 1 !important; visibility: visible !important; } /* Modern back button used in standalone fragments */ .amti-back-btn { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(90deg, rgba(34,211,238,0.06), rgba(129,140,248,0.04)); border: 1px solid rgba(34,211,238,0.08); color: var(--text-primary); border-radius: var(--radius-md); font-weight: 700; cursor: pointer; transition: background 160ms ease, transform 120ms ease, box-shadow 160ms ease; } .amti-back-btn i { font-size: 0.95rem; } .amti-back-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(2,6,23,0.35); background: linear-gradient(90deg, rgba(34,211,238,0.12), rgba(129,140,248,0.06)); } /* Hide mobile hamburger on desktop/landscape */ @media (min-width: 1024px) { .amti-btn.amti-mobile-nav-toggle { display: none !important; } } /* Dashboard editable grid styles */ .amti-dashboard-controls { display: flex; gap: 8px; padding: 8px 0; align-items: center; justify-content: space-between; width: 100%; } .amti-dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; grid-auto-rows: 120px; min-height: auto; align-content: start; width: 100%; max-width: 100%; overflow: visible; } .amti-dashboard-grid > * { min-width: 0; max-width: 100%; width: 100%; } .amti-dashboard-grid .amti-grid-card, .amti-dashboard-grid .amti-card { min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; } .amti-dashboard-grid .amti-card-body, .amti-dashboard-grid .amti-grid-card .amti-card-body { min-width: 0; max-width: 100%; width: 100%; overflow: auto; overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Give the Início grid comfortable padding now that the hero wrapper was removed */ #tab-home .amti-dashboard-grid { /* Alinha a borda do grid com a área de conteúdo (mesma margem esquerda do card de Ordens) Removemos a centralização para que a coluna inicial fique alinhada com as cards padrão. */ padding: 0; margin: 0; width: 100%; max-width: none; box-sizing: border-box; } @media (max-width: 1199px) { .amti-dashboard-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } } @media (max-width: 899px) { .amti-dashboard-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 599px) { .amti-dashboard-grid { grid-template-columns: 1fr; gap: 10px; } /* Mobile portrait: make rows auto and force cards to full-width stack Clear grid-row spanning so inline `grid-row-end` styles don't break flow */ .amti-dashboard-grid { grid-auto-rows: auto !important; overflow-x: hidden; } .amti-dashboard-grid .amti-grid-card, .amti-dashboard-grid .amti-card { grid-row-start: auto !important; grid-row-end: auto !important; min-height: auto !important; padding: 12px; border-radius: 12px; width: 100%; max-width: 100%; min-width: 0; } } .amti-grid-card { background: var(--surface-strong, linear-gradient(145deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 15, 28, 0.98) 48%, rgba(4, 10, 18, 0.98) 100%)); border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 16px; padding: 16px; min-height: 80px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30); transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), opacity 120ms ease, border-color 180ms var(--ease); position: relative; contain: layout style; backface-visibility: hidden; transform: translate3d(0, 0, 0); } .amti-grid-card.amti-static-card { cursor: default; } .amti-grid-card.amti-static-card:hover { transform: none; } :is(html, body):not(.amti-no-card-hover):not(.amti-performance-mode):not(.amti-ultra-performance-mode) .amti-grid-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.18); background: var(--surface-strong-hover, linear-gradient(145deg, rgba(17, 24, 39, 0.99) 0%, rgba(12, 18, 30, 0.98) 48%, rgba(10, 14, 21, 0.98) 100%)); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); } html[data-theme='light']:not(.amti-no-card-hover):not(.amti-performance-mode):not(.amti-ultra-performance-mode) .amti-grid-card:hover { transform: translateY(-3px); border-color: rgba(148,163,184,0.15); box-shadow: 0 12px 28px rgba(15,23,42,0.08); } .amti-grid-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.2), transparent); border-radius: 8px 8px 0 0; pointer-events: none; } .amti-grid-card::after, .amti-grid-card:hover::after { display: none !important; content: none !important; } .amti-grid-card.dragging { opacity: 0; /* Act as an invisible gap for live-swapping */ cursor: grabbing; pointer-events: none; /* Previne interferências durante o drag */ } /* O elemento fantasma que flutua durante o arraste */ .drag-ghost { border: 1px solid rgba(56, 189, 248, 0.45) !important; border-radius: 16px !important; background: var(--surface-strong, rgba(15, 23, 42, 0.95)) !important; backdrop-filter: none !important; pointer-events: none !important; cursor: grabbing !important; z-index: 99999 !important; } /* ========================================================================== AMTI DASHBOARD HOME CARDS UNIFIED DESIGN SYSTEM Modern, cohesive, responsive and optimized for low-end devices ========================================================================== */ .amti-grid-card .amti-card-header, .amti-grid-card .os-card-header, .amti-grid-card .agenda-card-header, .amti-grid-card .pdv-widget-header, .amti-grid-card .amti-smart-search-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 0 0 12px 0 !important; border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important; margin-bottom: 14px !important; min-height: 44px !important; flex: 0 0 auto !important; position: relative !important; } html[data-theme='light'] :is(.amti-grid-card .amti-card-header, .amti-grid-card .os-card-header, .amti-grid-card .agenda-card-header, .amti-grid-card .pdv-widget-header, .amti-grid-card .amti-smart-search-header) { border-bottom-color: rgba(148, 163, 184, 0.18) !important; } /* Header Main (Avatar + Titles) */ .amti-card-header-main, .pdv-widget-header-main, .amti-smart-search-title-wrap { display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; margin: 0 !important; gap: 12px !important; min-width: 0 !important; flex: 1 1 auto !important; } /* Header Avatar Icon Bubble */ .amti-card-header-avatar, .pdv-widget-header-avatar, .amti-smart-search-glow-icon { width: 36px !important; min-width: 36px !important; height: 36px !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.95rem !important; flex-shrink: 0 !important; background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(37, 99, 235, 0.10) 100%) !important; border: 1px solid rgba(56, 189, 248, 0.28) !important; color: #38bdf8 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } /* Themed Avatar Icon Bubbles */ .amti-card-header-avatar.brain-avatar { background: linear-gradient(135deg, rgba(56, 189, 248, 0.20), rgba(129, 140, 248, 0.18)) !important; border-color: rgba(56, 189, 248, 0.35) !important; color: #38bdf8 !important; } .amti-card-header-avatar.os-avatar { background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(14, 165, 233, 0.08)) !important; border-color: rgba(56, 189, 248, 0.32) !important; color: #38bdf8 !important; } .amti-card-header-avatar.agenda-avatar { background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(147, 51, 234, 0.08)) !important; border-color: rgba(168, 85, 247, 0.32) !important; color: #c084fc !important; } .amti-card-header-avatar.ai-avatar { background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(16, 185, 129, 0.08)) !important; border-color: rgba(34, 197, 94, 0.32) !important; color: #4ade80 !important; } .amti-card-header-avatar.notes-avatar { background: linear-gradient(135deg, rgba(234, 179, 8, 0.18), rgba(202, 138, 4, 0.08)) !important; border-color: rgba(234, 179, 8, 0.32) !important; color: #facc15 !important; } .amti-card-header-avatar.clock-avatar { background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(6, 182, 212, 0.08)) !important; border-color: rgba(14, 165, 233, 0.32) !important; color: #38bdf8 !important; } .amti-card-header-avatar.calendar-avatar { background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(225, 29, 72, 0.08)) !important; border-color: rgba(244, 63, 94, 0.32) !important; color: #fb7185 !important; } .amti-card-header-avatar.shortcut-avatar { background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(79, 70, 229, 0.08)) !important; border-color: rgba(99, 102, 241, 0.32) !important; color: #818cf8 !important; } .amti-card-header-avatar.finance-avatar { background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(5, 150, 105, 0.08)) !important; border-color: rgba(16, 185, 129, 0.32) !important; color: #34d399 !important; } /* Header Titles */ .amti-card-header-titles, .pdv-widget-header-titles, .amti-smart-search-title-text { display: flex !important; flex-direction: column !important; gap: 5px !important; min-width: 0 !important; } .amti-card-header-title, .pdv-widget-header-title, .amti-smart-search-title-text strong { font-size: 0.95rem !important; font-weight: 700 !important; color: var(--text-primary, #f8fafc) !important; -webkit-text-fill-color: var(--text-primary, #f8fafc) !important; letter-spacing: -0.01em !important; line-height: 1.25 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) :is(.amti-card-header-title, .pdv-widget-header-title, .amti-smart-search-title-text strong, .amti-card-title, .os-card-title) { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; font-weight: 700 !important; } :is( html[data-theme='dark'], html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='dark-block'], body.theme-dark, body.theme-block-steel, body.theme-block-blue, body.theme-dark-block ) :is(.amti-card-header-title, .pdv-widget-header-title, .amti-smart-search-title-text strong, .amti-card-title, .os-card-title) { color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; font-weight: 700 !important; } .amti-card-header-subtitle, .pdv-widget-header-subtitle, .amti-smart-search-subtitle { font-size: 0.8rem !important; color: var(--text-secondary, #cbd5e1) !important; -webkit-text-fill-color: var(--text-secondary, #cbd5e1) !important; font-weight: 500 !important; line-height: 1.2 !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .amti-card-header-subtitle i, .pdv-widget-header-subtitle i, .amti-smart-search-subtitle i { color: var(--color-cyan, #38bdf8) !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) :is(.amti-card-header-subtitle, .pdv-widget-header-subtitle, .amti-smart-search-subtitle) { color: #334155 !important; -webkit-text-fill-color: #334155 !important; font-weight: 600 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) :is(.amti-card-header-subtitle i, .pdv-widget-header-subtitle i, .amti-smart-search-subtitle i) { color: #1d4ed8 !important; } :is( html[data-theme='dark'], html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='dark-block'], body.theme-dark, body.theme-block-steel, body.theme-block-blue, body.theme-dark-block ) :is(.amti-card-header-subtitle, .pdv-widget-header-subtitle, .amti-smart-search-subtitle) { color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; font-weight: 500 !important; } :is( html[data-theme='dark'], html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='dark-block'], body.theme-dark, body.theme-block-steel, body.theme-block-blue, body.theme-dark-block ) :is(.amti-card-header-subtitle i, .pdv-widget-header-subtitle i, .amti-smart-search-subtitle i) { color: #38bdf8 !important; } /* Live status pulse dot */ .amti-live-dot { width: 7px; height: 7px; border-radius: 50%; background-color: #22c55e; box-shadow: 0 0 8px #22c55e; display: inline-block; animation: amtiPulseDot 2s infinite ease-in-out; flex-shrink: 0; } .amti-live-dot.is-offline { background-color: #ef4444; box-shadow: 0 0 8px #ef4444; } @keyframes amtiPulseDot { 0%, 100% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.2); opacity: 1; } } /* Header actions container */ .amti-card-header-actions, .os-card-actions, .agenda-card-actions { display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; } /* Unified buttons in card headers */ .amti-card-header-actions .amti-btn, .os-card-actions .amti-btn, .agenda-card-actions .amti-btn { height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 12px !important; font-size: 0.8rem !important; font-weight: 600 !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; white-space: nowrap !important; } .agenda-header-actions { position: relative; gap: 8px !important; } .agenda-search-control, .agenda-filter-control { position: relative; display: inline-flex; align-items: center; } .agenda-search-control { gap: 8px; } .agenda-header-actions .agenda-search-toggle { width: 36px; height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 !important; } .agenda-search-input { width: min(240px, 32vw); min-width: 150px; height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0; box-sizing: border-box; } .agenda-filter-menu[hidden], .agenda-search-input[hidden] { display: none !important; } .agenda-filter-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; display: flex; flex-direction: column; min-width: 170px; padding: 6px; border: 1px solid var(--border-color, rgba(148, 163, 184, 0.25)); border-radius: 10px; background: var(--bg-card, #1f2937); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24); } .agenda-filter-option { display: flex; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; } .agenda-filter-option:hover, .agenda-filter-option:focus-visible { background: var(--bg-hover, rgba(148, 163, 184, 0.14)); outline: none; } .agenda-filter-option.is-selected { color: var(--color-indigo, #818cf8); font-weight: 700; } @media (max-width: 560px) { .agenda-header-actions { flex-wrap: wrap; justify-content: flex-end; } .agenda-search-input { width: min(190px, 48vw); min-width: 120px; } } /* Save badge in Anotações - removed by request */ .amti-notes-save-badge { display: none !important; } /* Modern Slate Notepad for Anotações Individuais */ /* ── Caderninho de Anotações Minimalista (Anotações Individuais) ── */ .amti-notes-wrapper { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; flex: 1 1 auto !important; min-height: 0 !important; position: relative !important; border-radius: var(--radius-md, 8px) !important; overflow: hidden !important; box-sizing: border-box !important; background-color: #1a2320 !important; background-image: /* Pauta suave de caderno escolar */ linear-gradient(180deg, transparent 31px, rgba(148, 163, 184, 0.05) 32px), /* Manchas foscas de grafite apagado por borracha escolar */ radial-gradient(ellipse 65% 42% at 28% 28%, rgba(255, 255, 255, 0.04) 0%, transparent 68%), radial-gradient(ellipse 72% 48% at 74% 68%, rgba(255, 255, 255, 0.028) 0%, transparent 72%), radial-gradient(ellipse 48% 55% at 55% 44%, rgba(0, 0, 0, 0.38) 0%, transparent 70%), radial-gradient(ellipse 85% 35% at 20% 82%, rgba(148, 163, 184, 0.035) 0%, transparent 65%), radial-gradient(ellipse 50% 60% at 82% 20%, rgba(0, 0, 0, 0.28) 0%, transparent 65%) !important; background-size: 100% 32px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important; border: 1px solid rgba(148, 163, 184, 0.22) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 0 14px rgba(0, 0, 0, 0.25) !important; } :is( html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='block-light'], html[data-theme='dark-block'], html[data-theme^='block-'], html.theme-block-steel, html.theme-block-blue, html.theme-block-light, html.theme-dark-block ) :is(.amti-notes-wrapper, .amti-notes-textarea, .sync-user-notes, #agendaUserNotes) { border-radius: 0px !important; } :is( html[data-theme='dark'], html[data-theme='light'], html:not([data-theme^='block-']):not([data-theme='dark-block']) ) :is(.amti-notes-wrapper, .amti-notes-textarea, .sync-user-notes, #agendaUserNotes) { border-radius: 8px !important; } html[data-theme='light'] .amti-notes-wrapper, html[data-theme='block-light'] .amti-notes-wrapper { background-color: #fbfbf9 !important; background-image: linear-gradient(180deg, transparent 31px, rgba(100, 116, 139, 0.09) 32px), radial-gradient(ellipse 65% 42% at 28% 28%, rgba(100, 116, 139, 0.045) 0%, transparent 68%), radial-gradient(ellipse 72% 48% at 74% 68%, rgba(148, 163, 184, 0.055) 0%, transparent 72%), radial-gradient(ellipse 48% 55% at 55% 44%, rgba(15, 23, 42, 0.035) 0%, transparent 70%), radial-gradient(ellipse 85% 35% at 20% 82%, rgba(100, 116, 139, 0.04) 0%, transparent 65%) !important; border-color: rgba(148, 163, 184, 0.32) !important; box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06), inset 0 0 12px rgba(15, 23, 42, 0.04) !important; } .amti-notes-textarea, .amti-notes-wrapper .sync-user-notes, .amti-notes-wrapper #agendaUserNotes, #agendaUserNotes { width: 100% !important; height: 100% !important; flex: 1 1 auto !important; min-height: 0 !important; background: transparent !important; background-color: transparent !important; color: #f1f5f9 !important; font-family: 'Caveat', 'Segoe UI', cursive, sans-serif !important; font-size: 1.35rem !important; line-height: 32px !important; padding: 2px 14px 6px 14px !important; border: none !important; outline: none !important; box-shadow: none !important; resize: none !important; box-sizing: border-box !important; letter-spacing: 0.01em !important; } html[data-theme='light'] .amti-notes-textarea, html[data-theme='light'] .amti-notes-wrapper .sync-user-notes, html[data-theme='light'] .amti-notes-wrapper #agendaUserNotes, html[data-theme='light'] #agendaUserNotes, html[data-theme='block-light'] .amti-notes-textarea, html[data-theme='block-light'] .amti-notes-wrapper .sync-user-notes, html[data-theme='block-light'] .amti-notes-wrapper #agendaUserNotes, html[data-theme='block-light'] #agendaUserNotes { color: #1e293b !important; } /* Chalkboard placeholder styling */ :is(.amti-notes-textarea, .sync-user-notes, #agendaUserNotes)::placeholder { color: var(--placeholder-color, #94a3b8) !important; opacity: 1 !important; font-family: 'Caveat', 'Segoe UI', cursive, sans-serif !important; font-size: 1.25rem !important; font-style: italic !important; } html[data-theme='light'] :is(.amti-notes-textarea, .sync-user-notes, #agendaUserNotes)::placeholder, html[data-theme='block-light'] :is(.amti-notes-textarea, .sync-user-notes, #agendaUserNotes)::placeholder { color: var(--placeholder-color, #475569) !important; opacity: 1 !important; } /* Chalkboard scrollbar styling */ :is(.amti-notes-textarea, .sync-user-notes, #agendaUserNotes)::-webkit-scrollbar { width: 6px !important; } :is(.amti-notes-textarea, .sync-user-notes, #agendaUserNotes)::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.25) !important; border-radius: 4px !important; } :is(.amti-notes-textarea, .sync-user-notes, #agendaUserNotes)::-webkit-scrollbar-track { background: transparent !important; } .amti-user-notes-card :is(.amti-notes-textarea, .sync-user-notes, #agendaUserNotes) { scrollbar-width: thin !important; scrollbar-color: transparent transparent !important; scrollbar-gutter: stable !important; } .amti-user-notes-card :is(.amti-notes-textarea, .sync-user-notes, #agendaUserNotes)::-webkit-scrollbar { width: 6px !important; } .amti-user-notes-card:hover :is(.amti-notes-textarea, .sync-user-notes, #agendaUserNotes) { scrollbar-color: rgba(148, 163, 184, 0.42) transparent !important; } .amti-user-notes-card:hover :is(.amti-notes-textarea, .sync-user-notes, #agendaUserNotes)::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.42) !important; } /* Card header separator on Agenda cards (harmonized with Home cards) */ #tab-agenda .os-card .os-card-header, #tab-agenda .os-card .amti-card-header { border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important; padding: 0 0 10px 0 !important; margin: 0 0 12px 0 !important; } /* AI Quick Tips container - rigorosamente padronizado com os demais cards */ .amti-grid-card.ai-tips-live-card .amti-card-header { margin-bottom: 14px !important; padding: 0 0 12px 0 !important; border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important; } .amti-grid-card.ai-tips-live-card .amti-card-body, .ai-tips-live-card .amti-card-body { padding: 0 !important; margin: 0 !important; flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } .amti-grid-card.ai-tips-live-card .amti-ai-tip-card, .ai-tips-live-card .amti-ai-tip-card, .amti-ai-tip-card, div.amti-ai-tip-card { background: rgba(8, 14, 26, 0.65) !important; border: 1px solid rgba(148, 163, 184, 0.18) !important; border-radius: 0 !important; -webkit-border-radius: 0 !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; max-height: 100% !important; gap: 0 !important; padding: 10px 14px !important; margin-top: 0 !important; } .amti-grid-card.ai-tips-live-card .amti-ai-tip-copy, .ai-tips-live-card .amti-ai-tip-copy { background: transparent !important; border: none !important; border-radius: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; gap: 0 !important; padding: 0 !important; } /* Barra de rolagem estilizada para o card interno de dicas */ .amti-grid-card.ai-tips-live-card .amti-ai-tip-copy::-webkit-scrollbar, .ai-tips-live-card .amti-ai-tip-copy::-webkit-scrollbar { width: 6px !important; } .amti-grid-card.ai-tips-live-card .amti-ai-tip-copy::-webkit-scrollbar-track, .ai-tips-live-card .amti-ai-tip-copy::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.25) !important; } .amti-grid-card.ai-tips-live-card .amti-ai-tip-copy::-webkit-scrollbar-thumb, .ai-tips-live-card .amti-ai-tip-copy::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.35) !important; border-radius: 0 !important; } .amti-grid-card.ai-tips-live-card .amti-ai-tip-copy::-webkit-scrollbar-thumb:hover, .ai-tips-live-card .amti-ai-tip-copy::-webkit-scrollbar-thumb:hover { background: rgba(56, 189, 248, 0.6) !important; } /* Temas Claros: Light e Block Light para Dicas do Gerente IA */ :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) :is( .amti-grid-card.ai-tips-live-card .amti-ai-tip-card, .ai-tips-live-card .amti-ai-tip-card, .amti-ai-tip-card, div.amti-ai-tip-card ) { background: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important; } html[data-theme='light'] :is( .amti-grid-card.ai-tips-live-card .amti-ai-tip-card, .ai-tips-live-card .amti-ai-tip-card, .amti-ai-tip-card, div.amti-ai-tip-card ) { background: rgba(248, 250, 252, 0.95) !important; border-color: rgba(148, 163, 184, 0.28) !important; border-radius: 8px !important; } :is( html[data-theme='block-light'], html.theme-block-light, body.theme-block-light ) :is( .amti-grid-card.ai-tips-live-card .amti-ai-tip-card, .ai-tips-live-card .amti-ai-tip-card, .amti-ai-tip-card, div.amti-ai-tip-card ) { border-radius: 0px !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) :is( .amti-grid-card.ai-tips-live-card .amti-ai-tip-copy::-webkit-scrollbar-track, .ai-tips-live-card .amti-ai-tip-copy::-webkit-scrollbar-track ) { background: rgba(0, 0, 0, 0.04) !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) :is( .amti-grid-card.ai-tips-live-card .amti-ai-tip-copy::-webkit-scrollbar-thumb, .ai-tips-live-card .amti-ai-tip-copy::-webkit-scrollbar-thumb ) { background: #94a3b8 !important; border-radius: 0 !important; } .amti-ai-tip-item { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 10px 14px !important; background: transparent !important; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 0 !important; font-size: 0.85rem !important; color: var(--text-primary) !important; line-height: 1.45 !important; } .amti-ai-tip-item:last-child { border-bottom: none !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-ai-tip-item { background: transparent !important; border-bottom: 1px solid #e2e8f0 !important; color: #0f172a !important; } .amti-ai-tip-item i { color: #38bdf8 !important; margin-top: 3px !important; font-size: 0.9rem !important; flex-shrink: 0 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-ai-tip-item i { color: #0284c7 !important; } /* Agenda card header - strictly single line (nowrap) with compact '+' button aligned with title */ .amti-grid-card.agenda-card .amti-card-header, .amti-grid-card.agenda-card .os-card-header, .amti-grid-card.agenda-card .agenda-card-header, .amti-grid-card .agenda-card-header { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 8px !important; } .amti-grid-card.agenda-card .agenda-card-actions, .amti-grid-card.agenda-card .os-card-actions, .agenda-card-actions { display: flex !important; align-items: center !important; flex-shrink: 0 !important; margin-left: auto !important; } /* ── Botão Adicionar da Agenda ── */ /* 1 Coluna (size-small ou padrão sem classe multi-coluna): estritamente '+' quadrado */ .amti-grid-card.agenda-card:not(.size-medium):not(.size-large):not(.size-full) .agenda-card-actions .amti-btn, .amti-grid-card.agenda-card:not(.size-medium):not(.size-large):not(.size-full) .os-card-actions .amti-btn, .amti-grid-card.agenda-card:not(.size-medium):not(.size-large):not(.size-full) .amti-agenda-add-btn, .amti-grid-card.agenda-card.size-small .agenda-card-actions .amti-btn, .amti-grid-card.agenda-card.size-small .os-card-actions .amti-btn, .amti-grid-card.agenda-card.size-small .amti-agenda-add-btn, .agenda-card-actions .amti-btn, .agenda-card-actions .amti-agenda-add-btn { width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: var(--radius-md, 8px) !important; font-size: 0 !important; line-height: 1 !important; } .amti-grid-card.agenda-card:not(.size-medium):not(.size-large):not(.size-full) .amti-agenda-add-btn i, .amti-grid-card.agenda-card.size-small .amti-agenda-add-btn i, .agenda-card-actions .amti-btn i, .agenda-card-actions .amti-agenda-add-btn i { font-size: 0.95rem !important; } .amti-grid-card.agenda-card:not(.size-medium):not(.size-large):not(.size-full) .amti-agenda-add-btn span, .amti-grid-card.agenda-card.size-small .amti-agenda-add-btn span, .agenda-card-actions .amti-btn span, .agenda-card-actions .amti-agenda-add-btn span { display: none !important; } /* 2, 3 e 4 Colunas (size-medium, size-large, size-full): o botão volta a ser '+ Compromisso' */ .amti-grid-card.agenda-card.size-medium .agenda-card-actions .amti-btn, .amti-grid-card.agenda-card.size-medium .os-card-actions .amti-btn, .amti-grid-card.agenda-card.size-medium .amti-agenda-add-btn, .amti-grid-card.agenda-card.size-large .agenda-card-actions .amti-btn, .amti-grid-card.agenda-card.size-large .os-card-actions .amti-btn, .amti-grid-card.agenda-card.size-large .amti-agenda-add-btn, .amti-grid-card.agenda-card.size-full .agenda-card-actions .amti-btn, .amti-grid-card.agenda-card.size-full .os-card-actions .amti-btn, .amti-grid-card.agenda-card.size-full .amti-agenda-add-btn { width: auto !important; min-width: auto !important; max-width: none !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; border-radius: var(--radius-md, 8px) !important; font-size: 0.82rem !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; } .amti-grid-card.agenda-card.size-medium .amti-agenda-add-btn i, .amti-grid-card.agenda-card.size-large .amti-agenda-add-btn i, .amti-grid-card.agenda-card.size-full .amti-agenda-add-btn i { font-size: 0.85rem !important; } .amti-grid-card.agenda-card.size-medium .amti-agenda-add-btn span, .amti-grid-card.agenda-card.size-large .amti-agenda-add-btn span, .amti-grid-card.agenda-card.size-full .amti-agenda-add-btn span, .amti-grid-card.agenda-card.size-medium .amti-agenda-btn-text, .amti-grid-card.agenda-card.size-large .amti-agenda-btn-text, .amti-grid-card.agenda-card.size-full .amti-agenda-btn-text { display: inline !important; font-size: 0.82rem !important; font-weight: 600 !important; } /* ── Padronização do botão de Agenda em todos os temas: segue borda quadrada se o tema for quadrado ── */ :is( html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='block-light'], html[data-theme='dark-block'], html[data-theme^='block-'], html.theme-block-steel, html.theme-block-blue, html.theme-block-light, html.theme-dark-block ) :is( .amti-grid-card.agenda-card .amti-agenda-add-btn, .amti-grid-card.agenda-card .agenda-card-actions .amti-btn, .amti-grid-card.agenda-card .os-card-actions .amti-btn, .agenda-card-actions .amti-btn, .agenda-card-actions .amti-agenda-add-btn ) { border-radius: 0px !important; } :is( html[data-theme='dark'], html[data-theme='light'], html:not([data-theme^='block-']):not([data-theme='dark-block']) ) :is( .amti-grid-card.agenda-card .amti-agenda-add-btn, .amti-grid-card.agenda-card .agenda-card-actions .amti-btn, .amti-grid-card.agenda-card .os-card-actions .amti-btn, .agenda-card-actions .amti-btn, .agenda-card-actions .amti-agenda-add-btn ) { border-radius: 8px !important; } /* ═════════════════════════════════════════════════════════════════════════ AGENDA DE COMPROMISSOS — CARD DA PÁGINA "INÍCIO" Efeito no quadrado em volta da agenda no estilo de "Dicas do Gerente IA" ═════════════════════════════════════════════════════════════════════════ */ #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item), #tab-home .agenda-items-container :is(.agenda-item-compact, .agenda-item) { padding: 10px 14px !important; margin-bottom: 8px !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; box-sizing: border-box !important; } #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item):not(.agenda-expired):not(.agenda-near), #tab-home .agenda-items-container :is(.agenda-item-compact, .agenda-item):not(.agenda-expired):not(.agenda-near) { background: rgba(8, 14, 26, 0.65) !important; border: 1px solid rgba(148, 163, 184, 0.18) !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35) !important; } #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item):last-child, #tab-home .agenda-items-container :is(.agenda-item-compact, .agenda-item):last-child { margin-bottom: 0 !important; } #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item):not(.agenda-expired):not(.agenda-near):hover, #tab-home .agenda-items-container :is(.agenda-item-compact, .agenda-item):not(.agenda-expired):not(.agenda-near):hover { background: rgba(15, 23, 42, 0.85) !important; border-color: rgba(148, 163, 184, 0.35) !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.25) !important; } /* Compromissos expirados no card da página "Início" — idêntico à página Agenda */ #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item).agenda-expired, #tab-home .agenda-items-container :is(.agenda-item-compact, .agenda-item).agenda-expired { border: 1px solid rgba(239, 68, 68, 0.35) !important; border-left: 4px solid #ef4444 !important; animation: agendaExpiredBanner 1.5s ease-in-out infinite !important; position: relative !important; } #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item).agenda-expired .agenda-title, #tab-home .agenda-items-container :is(.agenda-item-compact, .agenda-item).agenda-expired .agenda-title { color: #ef4444 !important; } #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item).agenda-expired:hover, #tab-home .agenda-items-container :is(.agenda-item-compact, .agenda-item).agenda-expired:hover { border-color: rgba(239, 68, 68, 0.55) !important; border-left-color: #f87171 !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(239, 68, 68, 0.15) !important; } /* Compromissos próximos no card da página "Início" */ #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item).agenda-near, #tab-home .agenda-items-container :is(.agenda-item-compact, .agenda-item).agenda-near { border: 1px solid rgba(99, 102, 241, 0.35) !important; border-left: 4px solid var(--color-indigo, #6366f1) !important; animation: agendaNearPulse 2s ease-in-out infinite !important; position: relative !important; } /* Cantos fiéis aos temas (0px estrito nos temas Block, 8px nos temas convencionais) */ :is( html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='dark-block'], html[data-theme='block-light'], html[data-theme*='block'], body.theme-block-steel, body.theme-block-blue, body.theme-dark-block, body.theme-block-light ) #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item, .mini-agenda-view) { border-radius: 0px !important; } :is( html[data-theme='dark'], html[data-theme='light'], body.theme-dark, body.theme-light ) #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item) { border-radius: 8px !important; } /* Temas Claros: Light e Block Light para Agenda no Início */ :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item):not(.agenda-expired):not(.agenda-near), :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-home .agenda-items-container :is(.agenda-item-compact, .agenda-item):not(.agenda-expired):not(.agenda-near) { background: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item):not(.agenda-expired):not(.agenda-near):hover, :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-home .agenda-items-container :is(.agenda-item-compact, .agenda-item):not(.agenda-expired):not(.agenda-near):hover { background: #f8fafc !important; border-color: #94a3b8 !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item) .agenda-title, :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-home .agenda-items-container :is(.agenda-item-compact, .agenda-item) .agenda-title { color: #0f172a !important; font-weight: 600 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item) [style*="color:var(--text-secondary)"], :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-home .agenda-items-container :is(.agenda-item-compact, .agenda-item) [style*="color:var(--text-secondary)"] { color: #475569 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item) .amti-badge, :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-home .agenda-items-container :is(.agenda-item-compact, .agenda-item) .amti-badge { background-color: #f1f5f9 !important; color: #334155 !important; border: 1px solid #cbd5e1 !important; font-weight: 600 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item).agenda-expired, :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-home .agenda-items-container :is(.agenda-item-compact, .agenda-item).agenda-expired { border: 1px solid rgba(239, 68, 68, 0.35) !important; border-left: 4px solid #dc2626 !important; background: #fef2f2 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-home .amti-grid-card.agenda-card :is(.agenda-item-compact, .agenda-item).agenda-expired .agenda-title, :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-home .agenda-items-container :is(.agenda-item-compact, .agenda-item).agenda-expired .agenda-title { color: #dc2626 !important; } /* ═════════════════════════════════════════════════════════════════════════ MODAL DE VISUALIZAÇÃO DE COMPROMISSO (AGENDA) Popup moderno, elegante, integrado aos temas e altamente responsivo ═════════════════════════════════════════════════════════════════════════ */ #viewAgendaModal .amti-modal-content.view-agenda-modal-content { max-width: 580px; width: 95vw; margin: auto; border-radius: var(--r-xl, 14px); background: var(--bg-card, #131a25); border: 1px solid var(--border, rgba(148, 163, 184, 0.18)); box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05); overflow: hidden; display: flex; flex-direction: column; } :is( html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='dark-block'], html[data-theme='block-light'], html[data-theme*='block'] ) #viewAgendaModal .amti-modal-content.view-agenda-modal-content { border-radius: 0px !important; } #viewAgendaModal .amti-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.14)); background: var(--bg-card-soft, rgba(15, 23, 42, 0.8)); } #viewAgendaModal .amti-modal-header h3 { margin: 0; font-size: 1.15rem; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--text-primary, #f8fafc); } #viewAgendaModal .amti-modal-body { padding: 20px; max-height: calc(85vh - 140px); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } /* Loading state */ .view-agenda-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; gap: 12px; color: var(--text-secondary, #94a3b8); font-size: 0.95rem; } .view-agenda-loading i { font-size: 2rem; color: var(--primary, #38bdf8); } /* Hero Section */ .view-agenda-hero { background: var(--bg-card-soft, rgba(15, 23, 42, 0.6)); border: 1px solid var(--border, rgba(148, 163, 184, 0.16)); border-radius: var(--r-lg, 10px); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; } :is(html[data-theme*='block']) .view-agenda-hero { border-radius: 0px !important; } .view-agenda-hero-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary, #f8fafc); line-height: 1.35; word-break: break-word; } .view-agenda-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .view-agenda-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; font-size: 0.85rem; font-weight: 500; background: rgba(148, 163, 184, 0.12); color: var(--text-secondary, #cbd5e1); border: 1px solid rgba(148, 163, 184, 0.16); } .view-agenda-chip i { font-size: 0.82rem; } .view-agenda-chip-datetime { background: rgba(56, 189, 248, 0.12); color: var(--primary, #38bdf8); border-color: rgba(56, 189, 248, 0.25); } .view-agenda-chip-sempre { background: rgba(245, 158, 11, 0.14); color: #f59e0b; border-color: rgba(245, 158, 11, 0.28); } /* Section Box */ .view-agenda-section { border: 1px solid var(--border, rgba(148, 163, 184, 0.16)); border-radius: var(--r-md, 8px); overflow: hidden; background: var(--bg-card-soft, rgba(15, 23, 42, 0.4)); } :is(html[data-theme*='block']) .view-agenda-section { border-radius: 0px !important; } .view-agenda-section-header { padding: 10px 14px; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; background: rgba(148, 163, 184, 0.08); color: var(--text-secondary, #94a3b8); border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.12)); } .view-agenda-section-header i { font-size: 0.9rem; color: var(--primary, #38bdf8); } .view-agenda-section-body { padding: 12px 14px; font-size: 0.92rem; line-height: 1.5; color: var(--text-primary, #e2e8f0); } /* Client Card */ .view-agenda-client-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .view-agenda-client-info { display: flex; flex-direction: column; gap: 4px; } .view-agenda-client-name { font-weight: 600; font-size: 1rem; color: var(--text-primary, #f8fafc); display: flex; align-items: center; gap: 6px; } .view-agenda-client-contact { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--text-secondary, #94a3b8); flex-wrap: wrap; } .view-agenda-client-actions { display: flex; align-items: center; gap: 8px; } .view-agenda-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(148, 163, 184, 0.12); color: var(--text-primary, #f8fafc); border: 1px solid rgba(148, 163, 184, 0.2); text-decoration: none; transition: all 0.2s ease; font-size: 1rem; } .view-agenda-icon-btn:hover { background: rgba(148, 163, 184, 0.24); transform: translateY(-1px); } .view-agenda-icon-btn.btn-whatsapp { background: rgba(37, 211, 102, 0.15); color: #25d366; border-color: rgba(37, 211, 102, 0.3); } .view-agenda-icon-btn.btn-whatsapp:hover { background: rgba(37, 211, 102, 0.28); } .view-agenda-icon-btn.btn-phone { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border-color: rgba(56, 189, 248, 0.3); } .view-agenda-icon-btn.btn-phone:hover { background: rgba(56, 189, 248, 0.28); } /* User Tags in Modal */ .view-agenda-users-list { display: flex; flex-wrap: wrap; gap: 6px; } .view-agenda-user-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; background: rgba(99, 102, 241, 0.15); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.25); font-size: 0.82rem; font-weight: 500; } /* Description Box */ .view-agenda-desc-content { white-space: pre-wrap; word-break: break-word; color: var(--text-secondary, #cbd5e1); font-size: 0.92rem; line-height: 1.55; } /* Footer Action Buttons */ #viewAgendaModal .view-agenda-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border, rgba(148, 163, 184, 0.14)); background: var(--bg-card-soft, rgba(15, 23, 42, 0.8)); } #viewAgendaModal .view-agenda-footer .amti-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; height: 38px; font-size: 0.88rem; font-weight: 500; border-radius: 6px; transition: all 0.2s ease; white-space: nowrap; } :is(html[data-theme*='block']) #viewAgendaModal .view-agenda-footer .amti-btn { border-radius: 0px !important; } /* Mobile Responsiveness */ @media (max-width: 640px) { #viewAgendaModal .amti-modal-content.view-agenda-modal-content { width: 96vw; margin: 10px auto; max-height: 92vh; } #viewAgendaModal .amti-modal-body { padding: 14px; gap: 12px; } #viewAgendaModal .view-agenda-hero-title { font-size: 1.1rem; } #viewAgendaModal .view-agenda-footer { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; padding: 10px 14px !important; } #viewAgendaModal .view-agenda-footer .amti-btn { width: 100% !important; height: 42px !important; min-height: 42px !important; padding: 0 8px !important; font-size: 0.85rem !important; box-sizing: border-box !important; } .view-agenda-client-card { flex-direction: column; align-items: flex-start; } .view-agenda-client-actions { width: 100%; justify-content: flex-start; margin-top: 6px; } } /* Unified Empty States */ .amti-empty-state { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 24px 16px !important; color: #94a3b8 !important; } .amti-empty-state i { font-size: 1.8rem !important; color: rgba(148, 163, 184, 0.35) !important; margin-bottom: 8px !important; } .amti-empty-title { font-weight: 600 !important; font-size: 0.9rem !important; color: #cbd5e1 !important; } html[data-theme='light'] .amti-empty-title { color: #475569 !important; } .amti-empty-subtitle { font-size: 0.78rem !important; color: #64748b !important; margin-top: 2px !important; } #aiChatMessages[data-ai-history-state="loading"] > .ai-welcome-bubble, #aiChatMessages[data-ai-history-state="error"] > .ai-welcome-bubble { display: none; } .ai-chat-history-loading, .ai-chat-history-error { display: none; padding: 16px; color: var(--text-secondary, #94a3b8); text-align: center; } #aiChatMessages[data-ai-history-state="loading"] > .ai-chat-history-loading, #aiChatMessages[data-ai-history-state="error"] > .ai-chat-history-error { display: block; } .ai-chat-history-error button { margin-left: 8px; color: var(--text-primary, #e2e8f0); text-decoration: underline; } .ai-chat-history-older { align-self: center; flex: 0 0 auto; margin: 0 auto 12px; padding: 7px 14px; border: 1px solid var(--border-color, rgba(148, 163, 184, 0.22)); border-radius: 999px; background: var(--surface-secondary, rgba(148, 163, 184, 0.08)); color: var(--text-secondary, #94a3b8); font: inherit; font-size: 0.78rem; cursor: pointer; } .ai-chat-history-older:hover:not(:disabled) { color: var(--text-primary, #e2e8f0); background: var(--surface-hover, rgba(148, 163, 184, 0.14)); } .ai-chat-history-older:disabled { cursor: wait; opacity: 0.7; } .ai-chat-history-older[hidden] { display: none !important; } /* Make only the header draggable on desktop (> 900px) */ @media (min-width: 901px) { .amti-dashboard-grid .amti-grid-card:not(.amti-static-card) > .amti-card-header { cursor: grab; touch-action: none; } .amti-dashboard-grid .amti-grid-card:not(.amti-static-card) > .amti-card-header:active { cursor: grabbing; } } /* Global modern card styles applied across the dashboard */ .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .amti-card-library-item, .amti-grid-card.shortcut-card, .amti-grid-card.agenda-card, .amti-grid-card.ai-tips-live-card, .amti-grid-card.clock-widget-card, .amti-grid-card.calendar-widget-card, .amti-grid-card.pdv-widget-card { padding: 18px; border-radius: 16px; background: var(--amti-card-custom-bg, var(--card-surface, linear-gradient(145deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 15, 28, 0.98) 45%, rgba(7, 11, 18, 0.98) 100%))) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important; transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms cubic-bezier(.2,.9,.2,1), border-color 260ms cubic-bezier(.2,.9,.2,1), background 260ms cubic-bezier(.2,.9,.2,1); position: relative; overflow: hidden; min-width: 0; max-width: 100%; box-sizing: border-box; } /* Card header refinements (global) */ .amti-card .amti-card-header { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(148, 163, 184, 0.12); position: relative; z-index: 2; } .amti-card .amti-card-title { font-size: 1.05rem; font-weight:700; color: var(--text-primary); } /* Sheen/reflexo metálico deslizante desativado por solicitação */ .amti-grid-card::after, html[data-theme='light'] .amti-grid-card::after, .amti-grid-card:hover::after { display: none !important; content: none !important; } /* Hover moderno global: elevação natural e sombra profunda idêntica às outras páginas (ativo apenas quando suspensão estiver ligada) */ :is(html, body):not(.amti-no-card-hover):not(.amti-performance-mode):not(.amti-ultra-performance-mode) :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .amti-grid-card.os-card, .amti-card-library-item, .amti-grid-card.shortcut-card, .amti-grid-card.agenda-card, .amti-grid-card.ai-tips-live-card, .amti-grid-card.clock-widget-card, .amti-grid-card.calendar-widget-card, .amti-grid-card.pdv-widget-card ):hover { transform: translateY(-4px) !important; border-color: rgba(255, 255, 255, 0.16) !important; background: var(--amti-card-custom-bg, var(--card-surface-hover, linear-gradient(145deg, rgba(17, 24, 39, 0.99) 0%, rgba(12, 18, 30, 0.98) 45%, rgba(10, 14, 21, 0.98) 100%))) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.60) !important; } html[data-theme='light']:not(.amti-no-card-hover):not(.amti-performance-mode):not(.amti-ultra-performance-mode) :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .amti-grid-card.os-card, .amti-card-library-item, .amti-grid-card.shortcut-card, .amti-grid-card.agenda-card, .amti-grid-card.ai-tips-live-card ):hover { transform: translateY(-4px) !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important; border-color: rgba(15, 23, 42, 0.15) !important; } /* Micro-interações para botões do card */ .amti-grid-card .amti-card-btn, .amti-card .amti-card-btn { transition: transform 180ms ease, box-shadow 180ms ease; } .amti-grid-card .amti-card-btn:hover, .amti-card .amti-card-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(2,6,23,0.12); } .amti-grid-card .amti-card-header-content { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; } .amti-grid-card .amti-card-header .amti-btn, .amti-grid-card .amti-card-header .amti-card-btn { flex: 0 0 auto; white-space: nowrap; } .amti-grid-card .amti-card-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; display: block; line-height: 1.25; } .amti-grid-card .amti-card-description { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.35; display: block; } .amti-grid-card .amti-card-body { flex: 1 1 auto; overflow: auto; overflow-x: auto; overflow-y: auto; min-height: 0; min-width: 0; max-width: 100%; width: 100%; display: flex; flex-direction: column; box-sizing: border-box; -webkit-overflow-scrolling: touch; } .amti-grid-card .amti-card-actions-bottom { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.05); } .amti-grid-card .amti-card-btn { flex: 1; min-height: 36px; font-size: 0.85rem; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius-md); border: 1px solid rgba(56, 189, 248, 0.26); background: linear-gradient(135deg, rgba(34, 211, 238, 0.24), rgba(129, 140, 248, 0.22)); color: #f8fbff; box-shadow: 0 10px 24px rgba(2, 6, 23, 0.2), 0 0 18px rgba(56, 189, 248, 0.12); transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .amti-grid-card .amti-card-btn:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(34, 211, 238, 0.34), rgba(129, 140, 248, 0.28)); box-shadow: 0 14px 28px rgba(2, 6, 23, 0.24), 0 0 22px rgba(56, 189, 248, 0.16); } .amti-grid-card .amti-card-btn i { font-size: 0.9rem; } /* Drop indicator */ .amti-dashboard-grid.drop-target::after { content: ''; position: absolute; } /* ═══════════════════════════════════════ NAV LIST — lista de itens ═══════════════════════════════════════ */ .amti-nav-list { list-style: none; margin: 0; padding: 8px 8px; display: flex; flex-direction: column; align-items: stretch; justify-content: space-evenly; gap: 0; /* flex: 1 1 auto = expande para preencher espaço no modo EXPANDED */ flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; width: 100%; box-sizing: border-box; overscroll-behavior: contain; /* scrollbar-gutter: stable removido para não roubar espaço assimétrico à direita */ -ms-overflow-style: none; } /* ─── Expanded mode nav-list ─── */ body.sidebar-mode-expanded .amti-nav-list { align-items: stretch; padding: 8px 8px; justify-content: space-evenly; } /* ─── Collapsed / hover-not-hover: distribuição exata ─── flex-basis: 0 → o container não usa o tamanho do conteúdo como base; cresce a partir de zero para preencher TODO o espaço disponível. overflow: hidden → sem scrollbar, os ícones não escapam. scrollbar-gutter: auto → sem reserva de espaço para barra. */ body.sidebar-mode-collapsed .amti-nav-list, body.sidebar-mode-hover .amti-sidebar:not(:hover) .amti-nav-list { flex: 1 1 0; min-height: 0; align-items: center; padding: 8px 8px; /* Modificado para manter 8px de cada lado e centralizar o botão de 56px perfeitamente! */ justify-content: space-evenly; overflow: hidden; /* scrollbar-gutter removido */ } /* ─── Nav items ─── flex: 0 0 auto → tamanho natural fixo. O space-evenly do container distribui o espaço entre os itens uniformemente. */ .amti-nav-list > .amti-nav-item { flex: 0 0 auto; display: flex; align-items: center; width: 100%; } .amti-nav-group { position: relative; display: flex; flex-direction: column; align-items: stretch; width: 100%; border-radius: 12px; transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } /* Modern card styles for important widgets (e.g., Ordens de Serviço) */ .amti-grid-card.os-card { background: var(--amti-card-custom-bg, linear-gradient(145deg, rgba(15, 23, 42, 0.98) 0%, rgba(17, 24, 39, 0.98) 48%, rgba(8, 15, 28, 0.98) 100%)); border: 1px solid rgba(255, 255, 255, 0.08); padding: 16px; min-height: 160px; border-radius: 16px; box-shadow: none !important; } .amti-grid-card.os-card:hover { border-color: rgba(255, 255, 255, 0.18); background: var(--amti-card-custom-bg, var(--card-surface-hover, linear-gradient(145deg, rgba(17, 24, 39, 0.99) 0%, rgba(12, 18, 30, 0.98) 45%, rgba(10, 14, 21, 0.98) 100%))); box-shadow: none !important; } .amti-grid-card.os-card .os-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap: wrap; } .amti-grid-card.os-card .os-card-title { display:flex; align-items:center; gap:6px; font-weight:700; font-size: 0.95rem; line-height: 1.2; } .amti-grid-card.os-card .os-card-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .amti-grid-card.os-card .os-card-actions .amti-btn { padding: 6px 10px; border-radius: 8px; font-size: 0.85rem; min-height: 36px; } .amti-grid-card.os-card .os-table { width: 100% !important; min-width: 100% !important; max-width: 100% !important; border-collapse: collapse; font-size: 0.9rem; box-sizing: border-box !important; } .amti-grid-card.os-card .os-table thead th { text-align:left; font-weight:600; color:var(--text-muted); padding:8px 8px; font-size:0.8rem; } .amti-grid-card.os-card .os-table thead th.amti-text-right { text-align:right; } .amti-grid-card.os-card .os-table tbody td { padding:8px 8px; border-top:1px solid rgba(255,255,255,0.02); color:var(--text-primary); } .amti-grid-card.os-card .os-table tbody tr.os-empty-row td { text-align:center; color:var(--text-muted); padding:16px 8px; } .amti-grid-card.os-card .os-table thead { background: rgba(255,255,255,0.02); border-radius: 6px; } /* Mini OS view inside a card (inline window) */ .mini-os-view { background: linear-gradient(180deg, rgba(8,12,14,0.55), rgba(4,6,8,0.55)); border: 1px solid rgba(255,255,255,0.03); padding: 8px; border-radius: var(--radius-md); color: var(--text-primary); display: block; font-size: 0.9rem; } .mini-os-view strong { font-weight:700; font-size: 0.95rem; } .mini-os-view .amti-btn { padding:5px 8px; border-radius:6px; font-size:0.8rem; margin: 2px 0; } .mini-os-view .amti-badge { font-size:0.75rem; padding:3px 6px; } display: flex; flex-direction: column; .amti-archive-card { background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(8, 12, 18, 0.98)); border: 1px solid rgba(56, 189, 248, 0.18); border-radius: 18px; box-shadow: 0 18px 34px rgba(2, 6, 23, 0.32), 0 0 0 1px rgba(148, 163, 184, 0.08); transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .amti-archive-card:hover { border-color: rgba(56, 189, 248, 0.32); transform: translateY(-1px); } .amti-archive-card[data-collapsed="true"] { border-color: rgba(56, 189, 248, 0.12); box-shadow: 0 12px 24px rgba(2, 6, 23, 0.24); } .amti-archive-card .amti-card-header { margin-bottom: 10px; } .amti-archive-card .amti-card-body { border-top: 1px solid rgba(148, 163, 184, 0.08); padding-top: 10px; } /* Make table horizontally scrollable on small devices */ @media (max-width: 700px) { .amti-grid-card.os-card .os-table-wrap { overflow-x: auto; } } /* Placeholder style used during drag */ .amti-dashboard-grid.reordering { user-select: none; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 2px, transparent 2px), radial-gradient(circle at center, rgba(14, 165, 233, 0.1) 0%, transparent 70%); background-size: 30px 30px, 30px 30px, 100% 100%; background-position: center center; background-color: var(--bg-body); border-radius: var(--radius-xl); transition: background-color 0.4s ease, background-image 0.4s ease; box-shadow: inset 0 0 40px rgba(0,0,0,0.2); } .amti-dashboard-grid.reordering .amti-grid-card { transition: transform 140ms ease, box-shadow 160ms ease, opacity 140ms ease; } .amti-grid-card.placeholder { background: linear-gradient(145deg, rgba(34, 211, 238, 0.06), rgba(129, 140, 248, 0.04)); border: 2px dashed rgba(56, 189, 248, 0.35); min-height: 80px; box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.12), 0 14px 28px rgba(8, 15, 28, 0.25); border-radius: 18px; } /* Card size selector */ .card-size-select { padding: 4px 8px; font-size: 0.85rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--text-primary); border-radius: 6px; cursor: pointer; min-width: 50px; } .card-size-select:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); } .card-size-select:focus { outline: none; border-color: var(--color-cyan); background: rgba(6, 182, 212, 0.08); } /* === Card Sizes (Widths) — travas de largura === */ .amti-grid-card.size-small { grid-column: span 1 !important; } .amti-grid-card.size-medium { grid-column: span 2 !important; } .amti-grid-card.size-large { grid-column: span 3 !important; } .amti-grid-card.size-full { grid-column: 1 / -1 !important; } /* === Card Sizes (Heights) — travas de altura === Removida height-small original; nova escala: height-small = antigo medium (~256px / 2 rows) height-medium = antigo large (~392px / 3 rows) height-large = antigo extra (~528px / 4 rows) height-xlarge = extra grande (~664px / 5 rows) */ .amti-grid-card.height-small { grid-row-end: span 2 !important; min-height: 256px !important; max-height: 264px; overflow: hidden; } .amti-grid-card.height-medium { grid-row-end: span 3 !important; min-height: 392px !important; max-height: 400px; overflow: hidden; } .amti-grid-card.height-large { grid-row-end: span 4 !important; min-height: 528px !important; max-height: 540px; overflow: hidden; } .amti-grid-card.height-xlarge { grid-row-end: span 5 !important; min-height: 664px !important; max-height: 676px; overflow: hidden; } .amti-submenu { list-style: none; display: none; flex-direction: column; gap: 4px; width: calc(100% - 4px); margin: 6px auto 0; padding: 8px; border-radius: 14px; background: linear-gradient(180deg, rgba(8, 15, 28, 0.98), rgba(10, 14, 21, 0.98)), radial-gradient(circle at top, rgba(56, 189, 248, 0.05), transparent 28%); border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 18px 32px rgba(2, 6, 23, 0.42), 0 0 0 1px rgba(56, 189, 248, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .amti-nav-group.open > .amti-submenu { position: relative; z-index: 2; } .amti-nav-group.open > .amti-submenu { display: flex; animation: submenuSlide 180ms cubic-bezier(.2,.9,.2,1); } @keyframes submenuSlide { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } body.sidebar-mode-hover .amti-sidebar:not(:hover) .amti-nav-group.open > .amti-submenu, body.sidebar-mode-collapsed .amti-nav-group.open > .amti-submenu { display: none; } .amti-nav-group .amti-submenu-arrow { margin-left: auto; font-size: 0.75rem; transition: transform 0.2s ease; } .amti-nav-group.open .amti-submenu-arrow { transform: rotate(180deg); } .amti-submenu-item button { padding-left: 14px; font-size: 0.9rem; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.02); border: 1px solid transparent; } .amti-submenu-item button:hover { background: var(--accent-soft); color: var(--text-primary); border-color: rgba(56, 189, 248, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 18px rgba(2, 6, 23, 0.18); } .amti-menu-order-list { display: flex; flex-direction: column; gap: 10px; } .amti-menu-order-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); } .amti-menu-order-actions { display: flex; gap: 6px; } .amti-btn-icon { min-width: 36px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; } .amti-btn-icon:disabled { opacity: 0.45; cursor: not-allowed; } .amti-menu-order-toggle { margin: 0 !important; transform: scale(0.8); transform-origin: center; } .amti-menu-order-card .amti-menu-order-actions { gap: 4px; } /* ────────────────────────────────────────────── NAV BUTTON — Técnica de Coluna Fixa de Ícone O botão NUNCA muda de tamanho, padding ou gap. O ícone fica SEMPRE centralizado em uma coluna fixa de 52px à esquerda. A largura do sidebar recorta o texto visualmente. Zero reflow. Zero salto de ícone. ────────────────────────────────────────────── */ .amti-nav-item button { /* Usando CSS Grid para criar 2 colunas blindadas. Coluna 1: exatos 56px para o ícone. Coluna 2: minmax(0, 1fr) garante que o texto possa encolher até 0px sem estourar o botão. */ width: 100%; height: 52px; min-height: 52px; padding: 0; border: none; border-radius: var(--nav-item-radius, 12px); background: transparent; color: var(--text-secondary); font-size: 1.06rem; font-weight: 600; letter-spacing: 0.2px; cursor: pointer; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; overflow: hidden; text-align: left; /* Apenas transições visuais — SEM mudanças de layout */ transition: background-color 240ms cubic-bezier(0.4, 0, 0.2, 1), color 220ms ease; will-change: background-color; } /* ─── Ícone: coluna fixa de 56px, SEMPRE centralizado ─── Por que 56px? O sidebar colapsado tem 72px. O ul tem padding 8px de cada lado (16px total). 72 - 16 = 56px de espaço livre. Logo, o botão colapsado tem 56px. Colocando o ícone com 56px, ele fica 100% centralizado! */ .amti-nav-item button i { /* O ícone preenche sua coluna de 56px e é centralizado perfeitamente. */ width: 100%; height: 100%; font-size: 1.38rem; display: flex; align-items: center; justify-content: center; } /* ─── Texto: esmaece sem afetar o layout ─── */ .amti-nav-item button span { width: 100%; min-width: 0; /* Permite que o texto encolha para 0px no Grid */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2; transition: opacity 280ms ease; will-change: opacity; } /* ─── COLAPSADO: só o texto esmaeça, ícone fica no lugar ─── */ body.sidebar-mode-hover .amti-sidebar:not(:hover) .amti-nav-item button span, body.sidebar-mode-collapsed .amti-nav-item button span { opacity: 0; pointer-events: none; } /* ─── EXPANDIDO: texto aparece suavemente ─── */ body.sidebar-mode-hover .amti-sidebar:hover .amti-nav-item button span, body.sidebar-mode-expanded .amti-nav-item button span { opacity: 1; pointer-events: auto; } /* ─── Nav item container: sempre stretch ─── */ .amti-nav-list > .amti-nav-item { width: 100%; display: flex; align-items: center; } /* Sem overrides de layout por modo — o sidebar resolve tudo com width */ body.sidebar-mode-hover .amti-sidebar:not(:hover) .amti-nav-item, body.sidebar-mode-collapsed .amti-nav-item { width: 100%; } .amti-nav-item button:hover { background: var(--accent-soft); color: var(--text-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 20px rgba(2, 6, 23, 0.22), 0 0 16px rgba(56, 189, 248, 0.05); } /* ─── Ativo expandido: borda esquerda via inset shadow (sem reflow) ─── */ .amti-nav-item.active button { background: linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(129, 140, 248, 0.16)); color: #ecfeff; font-weight: 600; border-radius: var(--nav-item-radius, 12px); /* inset shadow esquerdo simula border-left sem causar reflow */ box-shadow: inset 3px 0 0 var(--color-cyan), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 18px rgba(2, 6, 23, 0.22), 0 0 18px rgba(56, 189, 248, 0.08); } .amti-nav-group.open { background: linear-gradient(180deg, rgba(7, 11, 18, 0.98), rgba(5, 8, 13, 0.98)); border: 1px solid rgba(56, 189, 248, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 18px rgba(2, 6, 23, 0.22); } .amti-nav-group.open > button { background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(129, 140, 248, 0.12) 50%, rgba(192, 132, 252, 0.08)); color: var(--text-primary); border: 1px solid rgba(56, 189, 248, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 22px rgba(2, 6, 23, 0.24), 0 0 20px rgba(56, 189, 248, 0.08); } .amti-nav-group.open > button span { font-weight: 700; letter-spacing: 0.3px; } /* ─── Ativo colapsado: borda topo via inset shadow ─── */ body.sidebar-mode-hover .amti-sidebar:not(:hover) .amti-nav-item.active button, body.sidebar-mode-collapsed .amti-nav-item.active button { box-shadow: inset 0 3px 0 var(--color-cyan), inset 0 0 0 1px rgba(6, 182, 212, 0.1), 0 10px 18px rgba(2, 6, 23, 0.22); border-radius: 12px; } .amti-sidebar-nav-tooltip { --sidebar-tooltip-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(8, 15, 28, 0.98)); --sidebar-tooltip-fg: #eff6ff; --sidebar-tooltip-border: rgba(148, 163, 184, 0.3); --sidebar-tooltip-accent: #22d3ee; --sidebar-tooltip-radius: 12px; --sidebar-tooltip-shadow: 0 12px 34px rgba(0, 0, 0, 0.38), 0 0 22px rgba(34, 211, 238, 0.12); position: fixed; z-index: 1200; max-width: min(260px, calc(100vw - 100px)); padding: 10px 15px 10px 17px; border: 1px solid var(--sidebar-tooltip-border); border-left: 3px solid var(--sidebar-tooltip-accent); border-radius: var(--sidebar-tooltip-radius); background: var(--sidebar-tooltip-bg); color: var(--sidebar-tooltip-fg); box-shadow: var(--sidebar-tooltip-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 0.95rem; font-weight: 600; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-7px, -50%) scale(0.97); transform-origin: left center; transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1), transform 240ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 240ms; } .amti-sidebar-nav-tooltip.is-left { border-left: 1px solid var(--sidebar-tooltip-border); border-right: 3px solid var(--sidebar-tooltip-accent); transform: translate(7px, -50%) scale(0.97); transform-origin: right center; } .amti-sidebar-nav-tooltip::before { content: ""; position: absolute; top: 50%; left: -6px; width: 10px; height: 10px; background: var(--sidebar-tooltip-bg); border-left: 1px solid var(--sidebar-tooltip-border); border-bottom: 1px solid var(--sidebar-tooltip-border); transform: translateY(-50%) rotate(45deg); } .amti-sidebar-nav-tooltip.is-left::before { right: -6px; left: auto; border: 0; border-top: 1px solid var(--sidebar-tooltip-border); border-right: 1px solid var(--sidebar-tooltip-border); } .amti-sidebar-nav-tooltip.is-visible { opacity: 1; visibility: visible; transform: translate(0, -50%) scale(1); transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1), transform 240ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; } .amti-sidebar-nav-tooltip.is-left.is-visible { transform: translate(0, -50%) scale(1); } /* Temas NÃO-BLOCK: Bordas arredondadas suaves */ :is( html[data-theme='light'], html[data-theme='dark'], html:not([data-theme*='block']) ) .amti-sidebar-nav-tooltip { --sidebar-tooltip-radius: 12px; border-radius: 12px !important; } /* Temas BLOCK: Bordas retas / quadradas */ :is( html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='block-light'], html[data-theme='dark-block'], html[data-theme*='block'] ) .amti-sidebar-nav-tooltip { --sidebar-tooltip-radius: 0; border-radius: 0 !important; } html[data-theme='light'] .amti-sidebar-nav-tooltip { --sidebar-tooltip-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 241, 246, 0.98)); --sidebar-tooltip-fg: #0f172a; --sidebar-tooltip-border: rgba(71, 85, 105, 0.2); --sidebar-tooltip-accent: #3b82f6; --sidebar-tooltip-radius: 12px; --sidebar-tooltip-shadow: 0 12px 30px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.7); border-radius: 12px !important; } html[data-theme='block-light'] .amti-sidebar-nav-tooltip { --sidebar-tooltip-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 241, 246, 0.98)); --sidebar-tooltip-fg: #0f172a; --sidebar-tooltip-border: rgba(71, 85, 105, 0.2); --sidebar-tooltip-accent: #3b82f6; --sidebar-tooltip-radius: 0; --sidebar-tooltip-shadow: 0 12px 30px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.7); border-radius: 0 !important; } html[data-theme='block-steel'] .amti-sidebar-nav-tooltip { --sidebar-tooltip-bg: linear-gradient(180deg, #354252, #202832); --sidebar-tooltip-fg: #f1f5f9; --sidebar-tooltip-border: #66778b; --sidebar-tooltip-accent: #a9bdcf; --sidebar-tooltip-radius: 0; --sidebar-tooltip-shadow: 0 8px 20px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.12); border-radius: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-theme='block-blue'] .amti-sidebar-nav-tooltip { --sidebar-tooltip-bg: linear-gradient(135deg, rgba(8, 24, 48, 0.98), rgba(7, 18, 36, 0.98)); --sidebar-tooltip-fg: #eff8ff; --sidebar-tooltip-border: rgba(0, 210, 255, 0.52); --sidebar-tooltip-accent: #00d2ff; --sidebar-tooltip-radius: 0; --sidebar-tooltip-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 210, 255, 0.2); border-radius: 0 !important; } html[data-theme='dark-block'] .amti-sidebar-nav-tooltip { --sidebar-tooltip-bg: linear-gradient(180deg, #171717, #080808); --sidebar-tooltip-fg: #f3f4f6; --sidebar-tooltip-border: #444; --sidebar-tooltip-accent: #d1d5db; --sidebar-tooltip-radius: 0; --sidebar-tooltip-shadow: 0 10px 26px rgba(0, 0, 0, 0.65); border-radius: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; } @media (prefers-reduced-motion: reduce) { .amti-sidebar-nav-tooltip, .amti-sidebar-nav-tooltip.is-visible { transition: none; } } /* ═══════════════════════════════════════ USER PROFILE FOOTER — "Minha Conta" Segue o estilo dos outros itens de menu: sem borda, sem fundo, só ícone + texto. ═══════════════════════════════════════ */ .amti-user-profile { flex: 0 0 auto; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; padding: 0 8px; /* Padding fixo horizontal, alinhamento vertical por flexbox */ height: 72px; /* Altura fixa igual ao brand para evitar pulos verticais */ border-top: 1px solid rgba(148, 163, 184, 0.10); overflow: hidden; } /* Sem overrides de height e padding que causavam saltos! */ /* O botão "Minha Conta" — Mesma técnica de coluna fixa */ .amti-logout-btn { width: 100%; height: 52px; min-height: 52px; padding: 0; border: none; border-radius: var(--nav-item-radius, 12px); background: transparent; color: var(--text-secondary); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.2px; cursor: pointer; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; overflow: hidden; text-align: left; transition: background-color 240ms cubic-bezier(0.4, 0, 0.2, 1), color 220ms ease, box-shadow 220ms ease; will-change: background-color; } .amti-logout-btn i { width: 100%; height: 100%; font-size: 1.38rem; display: flex; align-items: center; justify-content: center; } .amti-logout-btn .amti-user-action-label { width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2; } .amti-logout-btn:hover { background: var(--accent-soft); color: var(--text-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 20px rgba(2, 6, 23, 0.22), 0 0 16px rgba(56, 189, 248, 0.05); } .amti-logout-btn.active { background: linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(129, 140, 248, 0.16)); color: #ecfeff; font-weight: 600; border-radius: var(--nav-item-radius, 12px); box-shadow: inset 3px 0 0 var(--color-cyan), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 18px rgba(2, 6, 23, 0.22), 0 0 18px rgba(56, 189, 248, 0.08); } .amti-user-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* amti-user-info fade is handled by the shared text-fade block above */ /* (no display:none needed — uses opacity + max-width transition) */ .amti-user-name { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; } .amti-user-role { font-size: 0.75rem; color: var(--text-muted); } /* ═════════════════════════════════════════════════════════════════════════ AMTI SIDEBAR & NAV ITEM THEME MAPPINGS Garante rigorosamente o estilo de cada tema no menu: - Temas "Block": cantos 100% retos (0px) na seleção, no hover e botões - Temas "Sleek/Light": cantos arredondados suaves (12px) na seleção e hover ═════════════════════════════════════════════════════════════════════════ */ /* ── 1. BLOCK STEEL: Cantos 100% Retos, Efeito Aço/Slate Industrial ── */ html[data-theme='block-steel'] .amti-nav-item button, html.theme-block-steel .amti-nav-item button, body.theme-block-steel .amti-nav-item button, html[data-theme='block-steel'] .amti-logout-btn, html.theme-block-steel .amti-logout-btn, body.theme-block-steel .amti-logout-btn { border-radius: 0px !important; color: #cbd5e1 !important; } html[data-theme='block-steel'] .amti-nav-item button:hover, html.theme-block-steel .amti-nav-item button:hover, body.theme-block-steel .amti-nav-item button:hover, html[data-theme='block-steel'] .amti-logout-btn:hover, html.theme-block-steel .amti-logout-btn:hover, body.theme-block-steel .amti-logout-btn:hover { border-radius: 0px !important; background: rgba(143, 163, 181, 0.12) !important; color: #f1f5f9 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.25) !important; } html[data-theme='block-steel'] .amti-nav-item.active button, html.theme-block-steel .amti-nav-item.active button, body.theme-block-steel .amti-nav-item.active button, html[data-theme='block-steel'] .amti-logout-btn.active, html.theme-block-steel .amti-logout-btn.active, body.theme-block-steel .amti-logout-btn.active { border-radius: 0px !important; background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(99, 102, 241, 0.16)) !important; color: #f8fafc !important; box-shadow: inset 3px 0 0 #38bdf8, 0 4px 14px rgba(2, 6, 23, 0.3) !important; } /* ── 2. BLOCK BLUE: Cantos 100% Retos, High-Tech Navy Industrial ── */ html[data-theme='block-blue'] .amti-nav-item button, html.theme-block-blue .amti-nav-item button, body.theme-block-blue .amti-nav-item button, html[data-theme='block-blue'] .amti-logout-btn, html.theme-block-blue .amti-logout-btn, body.theme-block-blue .amti-logout-btn { border-radius: 0px !important; color: #94a3b8 !important; } html[data-theme='block-blue'] .amti-nav-item button:hover, html.theme-block-blue .amti-nav-item button:hover, body.theme-block-blue .amti-nav-item button:hover, html[data-theme='block-blue'] .amti-logout-btn:hover, html.theme-block-blue .amti-logout-btn:hover, body.theme-block-blue .amti-logout-btn:hover { border-radius: 0px !important; background: rgba(0, 210, 255, 0.1) !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 12px rgba(2, 6, 23, 0.3) !important; } html[data-theme='block-blue'] .amti-nav-item.active button, html.theme-block-blue .amti-nav-item.active button, body.theme-block-blue .amti-nav-item.active button, html[data-theme='block-blue'] .amti-logout-btn.active, html.theme-block-blue .amti-logout-btn.active, body.theme-block-blue .amti-logout-btn.active { border-radius: 0px !important; background: linear-gradient(135deg, rgba(0, 210, 255, 0.2), rgba(77, 121, 255, 0.16)) !important; color: #ffffff !important; box-shadow: inset 3px 0 0 #00d2ff, 0 4px 14px rgba(2, 6, 23, 0.3) !important; } /* ── 3. DARK BLOCK: Cantos 100% Retos, Minimalista OLED Puro ── */ html[data-theme='dark-block'] .amti-nav-item button, html.theme-dark-block .amti-nav-item button, body.theme-dark-block .amti-nav-item button, html[data-theme='dark-block'] .amti-logout-btn, html.theme-dark-block .amti-logout-btn, body.theme-dark-block .amti-logout-btn { border-radius: 0px !important; } html[data-theme='dark-block'] .amti-nav-item button:hover, html.theme-dark-block .amti-nav-item button:hover, body.theme-dark-block .amti-nav-item button:hover, html[data-theme='dark-block'] .amti-logout-btn:hover, html.theme-dark-block .amti-logout-btn:hover, body.theme-dark-block .amti-logout-btn:hover { border-radius: 0px !important; } html[data-theme='dark-block'] .amti-nav-item.active button, html.theme-dark-block .amti-nav-item.active button, body.theme-dark-block .amti-nav-item.active button, html[data-theme='dark-block'] .amti-logout-btn.active, html.theme-dark-block .amti-logout-btn.active, body.theme-dark-block .amti-logout-btn.active { border-radius: 0px !important; } /* ── 4. BLOCK LIGHT: Cantos 100% Retos, Slate Industrial Claro ── */ html[data-theme='block-light'] .amti-nav-item button, html.theme-block-light .amti-nav-item button, body.theme-block-light .amti-nav-item button, html[data-theme='block-light'] .amti-logout-btn, html.theme-block-light .amti-logout-btn, body.theme-block-light .amti-logout-btn { border-radius: 0px !important; } html[data-theme='block-light'] .amti-nav-item button:hover, html.theme-block-light .amti-nav-item button:hover, body.theme-block-light .amti-nav-item button:hover, html[data-theme='block-light'] .amti-logout-btn:hover, html.theme-block-light .amti-logout-btn:hover, body.theme-block-light .amti-logout-btn:hover { border-radius: 0px !important; } html[data-theme='block-light'] .amti-nav-item.active button, html.theme-block-light .amti-nav-item.active button, body.theme-block-light .amti-nav-item.active button, html[data-theme='block-light'] .amti-logout-btn.active, html.theme-block-light .amti-logout-btn.active, body.theme-block-light .amti-logout-btn.active { border-radius: 0px !important; } /* ── 5. DARK (Dark Sleek Glass): Cantos Suaves Arredondados (12px) ── */ html[data-theme='dark'] .amti-nav-item button, html.theme-dark .amti-nav-item button, body.theme-dark .amti-nav-item button, html[data-theme='dark'] .amti-logout-btn, html.theme-dark .amti-logout-btn, body.theme-dark .amti-logout-btn { border-radius: 12px !important; } html[data-theme='dark'] .amti-nav-item button:hover, html.theme-dark .amti-nav-item button:hover, body.theme-dark .amti-nav-item button:hover, html[data-theme='dark'] .amti-logout-btn:hover, html.theme-dark .amti-logout-btn:hover, body.theme-dark .amti-logout-btn:hover { border-radius: 12px !important; } html[data-theme='dark'] .amti-nav-item.active button, html.theme-dark .amti-nav-item.active button, body.theme-dark .amti-nav-item.active button, html[data-theme='dark'] .amti-logout-btn.active, html.theme-dark .amti-logout-btn.active, body.theme-dark .amti-logout-btn.active { border-radius: 12px !important; } /* ── 6. LIGHT (Light Clean Soft): Cantos Suaves Arredondados (12px) ── */ html[data-theme='light'] .amti-nav-item button, html.theme-light .amti-nav-item button, body.theme-light .amti-nav-item button, html[data-theme='light'] .amti-logout-btn, html.theme-light .amti-logout-btn, body.theme-light .amti-logout-btn { border-radius: 12px !important; } html[data-theme='light'] .amti-nav-item button:hover, html.theme-light .amti-nav-item button:hover, body.theme-light .amti-nav-item button:hover, html[data-theme='light'] .amti-logout-btn:hover, html.theme-light .amti-logout-btn:hover, body.theme-light .amti-logout-btn:hover { border-radius: 12px !important; } html[data-theme='light'] .amti-nav-item.active button, html.theme-light .amti-nav-item.active button, body.theme-light .amti-nav-item.active button, html[data-theme='light'] .amti-logout-btn.active, html.theme-light .amti-logout-btn.active, body.theme-light .amti-logout-btn.active { border-radius: 12px !important; } /* Main Content Area */ .amti-main { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; height: 100vh; max-height: 100vh; overflow: hidden; background: var(--bg-main) !important; } .amti-topbar { min-height: 72px; height: 72px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; flex-shrink: 0; background: var(--topbar-bg, var(--bg-main)) !important; box-shadow: 0 10px 24px rgba(2, 6, 23, 0.25); gap: 16px; } /* ============================================================ SEAMLESS DASHBOARD TOPBAR THEME MAPPING Barra de títulos / header escurecida com degradê suave da esquerda (mais escuro) para a direita em TODOS os 6 temas existentes. ============================================================ */ /* 1. Block Steel */ :root[data-theme='block-steel'] .amti-topbar, html[data-theme='block-steel'] .amti-topbar, html.theme-block-steel .amti-topbar, body.theme-block-steel .amti-topbar, [data-theme='block-steel'] .amti-topbar, html[data-theme='block-steel'] body.amti-performance-mode .amti-topbar, html[data-theme='block-steel'] body.amti-ultra-performance-mode .amti-topbar { background: linear-gradient(90deg, #0e141d 0%, #121822 35%, #151d28 70%, #18202c 100%) !important; border-bottom: 1px solid #2d3744 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.32) !important; } /* 2. Dark Sleek */ :root[data-theme='dark'] .amti-topbar, html[data-theme='dark'] .amti-topbar, html.theme-dark .amti-topbar, body.theme-dark .amti-topbar, [data-theme='dark'] .amti-topbar, :root:not([data-theme]) .amti-topbar, html[data-theme='dark'] body.amti-performance-mode .amti-topbar, html[data-theme='dark'] body.amti-ultra-performance-mode .amti-topbar { background: linear-gradient(90deg, #04060c 0%, #060a12 35%, #080d17 70%, #090e18 100%) !important; border-bottom: 1px solid var(--border-color) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important; } /* 3. Block Blue */ :root[data-theme='block-blue'] .amti-topbar, html[data-theme='block-blue'] .amti-topbar, html.theme-block-blue .amti-topbar, body.theme-block-blue .amti-topbar, [data-theme='block-blue'] .amti-topbar, html[data-theme='block-blue'] body.amti-performance-mode .amti-topbar, html[data-theme='block-blue'] body.amti-ultra-performance-mode .amti-topbar { background: linear-gradient(90deg, #040b17 0%, #061020 35%, #081427 70%, #0b182e 100%) !important; border-bottom: 1px solid #142a4a !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.38) !important; } /* 4. Dark Block (OLED) */ :root[data-theme='dark-block'] .amti-topbar, html[data-theme='dark-block'] .amti-topbar, html.theme-dark-block .amti-topbar, body.theme-dark-block .amti-topbar, [data-theme='dark-block'] .amti-topbar, html[data-theme='dark-block'] body.amti-performance-mode .amti-topbar, html[data-theme='dark-block'] body.amti-ultra-performance-mode .amti-topbar { background: linear-gradient(90deg, #000000 0%, #030304 35%, #070709 70%, #0d0d10 100%) !important; border-bottom: 1px solid #1a1a1c !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important; } /* 5. Light Clean */ :root[data-theme='light'] .amti-topbar, html[data-theme='light'] .amti-topbar, html.theme-light .amti-topbar, body.theme-light .amti-topbar, [data-theme='light'] .amti-topbar, html[data-theme='light'] body.amti-performance-mode .amti-topbar, html[data-theme='light'] body.amti-ultra-performance-mode .amti-topbar { background: linear-gradient(90deg, #d2dbe6 0%, #dce4ed 35%, #e6ecf3 70%, #eef1f6 100%) !important; border-bottom: 1px solid rgba(15, 23, 42, 0.16) !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1) !important; color: #0f172a !important; } :root[data-theme='light'] .amti-topbar .amti-title-area h2, html[data-theme='light'] .amti-topbar .amti-title-area h2 { color: #0f172a !important; } :root[data-theme='light'] .amti-topbar .amti-title-area p, html[data-theme='light'] .amti-topbar .amti-title-area p { color: #334155 !important; } /* 6. Block Light */ :root[data-theme='block-light'] .amti-topbar, html[data-theme='block-light'] .amti-topbar, html.theme-block-light .amti-topbar, body.theme-block-light .amti-topbar, [data-theme='block-light'] .amti-topbar, html[data-theme='block-light'] body.amti-performance-mode .amti-topbar, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-topbar { background: linear-gradient(90deg, #a8b6c6 0%, #b8c4d3 35%, #c2cddb 70%, #cbd5e1 100%) !important; color: #0f172a !important; border-bottom: 1px solid #758599 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important; } :root[data-theme='block-light'] .amti-topbar .amti-title-area h2, html[data-theme='block-light'] .amti-topbar .amti-title-area h2 { color: #0f172a !important; font-weight: 800 !important; } :root[data-theme='block-light'] .amti-topbar .amti-title-area p, html[data-theme='block-light'] .amti-topbar .amti-title-area p { color: #334155 !important; } .amti-topbar-left { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; overflow: hidden; } .amti-mobile-nav-toggle { display: none; } .amti-title-area { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; } .amti-title-area h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); min-height: 1.2em; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; margin: 0; } .amti-title-area h2:empty { display: inline-block; min-width: 160px; background: linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 75%); background-size: 200% 100%; animation: amti-shimmer 1.5s ease-in-out infinite; border-radius: 4px; color: transparent !important; } .amti-title-area p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.35; min-height: 1.1em; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; margin: 0; } .amti-title-area p:empty { display: inline-block; min-width: 220px; background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 75%); background-size: 200% 100%; animation: amti-shimmer 1.5s ease-in-out infinite; border-radius: 4px; color: transparent !important; } .amti-topbar-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .amti-topbar-actions .amti-btn-text-short { display: none !important; } .amti-topbar-actions .amti-btn-text-full { display: inline !important; } /* Tab Content Scrollbar - 100% Seamless & Transparent Track */ .amti-content-container::-webkit-scrollbar, .amti-sidebar::-webkit-scrollbar, .amti-nav-list::-webkit-scrollbar { width: 8px; height: 8px; background: transparent !important; } .amti-content-container::-webkit-scrollbar-track, .amti-content-container::-webkit-scrollbar-track-piece, .amti-sidebar::-webkit-scrollbar-track, .amti-sidebar::-webkit-scrollbar-track-piece, .amti-nav-list::-webkit-scrollbar-track, .amti-nav-list::-webkit-scrollbar-track-piece { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; } .amti-content-container::-webkit-scrollbar-corner, .amti-sidebar::-webkit-scrollbar-corner, .amti-nav-list::-webkit-scrollbar-corner { background: transparent !important; border: none !important; } .amti-content-container::-webkit-scrollbar-thumb, .amti-sidebar::-webkit-scrollbar-thumb, .amti-nav-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: var(--radius-md); border: none !important; box-shadow: none !important; } /* ─── SCROLLBAR AUTO-HIDE FOR SCROLLING PAGES ─── */ /* Início, Controle Financeiro, Gerente IA, Configurações do Painel, Empresa e Comissões */ .amti-content-container:is( :has(#tab-home.active), :has(#tab-finance.active), :has(#tab-ai-advisor.active), :has(#tab-settings.active), :has(#tab-company.active), :has(#tab-comissao-tecnica.active) ) { scrollbar-color: transparent transparent; scrollbar-width: thin; padding-right: 8px; } .amti-content-container:is( :has(#tab-home.active), :has(#tab-finance.active), :has(#tab-ai-advisor.active), :has(#tab-settings.active), :has(#tab-company.active), :has(#tab-comissao-tecnica.active) )::-webkit-scrollbar { width: 8px; background: transparent !important; } .amti-content-container:is( :has(#tab-home.active), :has(#tab-finance.active), :has(#tab-ai-advisor.active), :has(#tab-settings.active), :has(#tab-company.active), :has(#tab-comissao-tecnica.active) )::-webkit-scrollbar-thumb { background-color: transparent !important; border: none !important; box-shadow: none !important; } @media (hover: hover) { .amti-content-container:is( :has(#tab-home.active), :has(#tab-finance.active), :has(#tab-ai-advisor.active), :has(#tab-settings.active), :has(#tab-company.active), :has(#tab-comissao-tecnica.active) ):hover { scrollbar-color: rgba(255, 255, 255, 0.14) transparent; } .amti-content-container:is( :has(#tab-home.active), :has(#tab-finance.active), :has(#tab-ai-advisor.active), :has(#tab-settings.active), :has(#tab-company.active), :has(#tab-comissao-tecnica.active) ):hover::-webkit-scrollbar { width: 8px; background: transparent !important; } .amti-content-container:is( :has(#tab-home.active), :has(#tab-finance.active), :has(#tab-ai-advisor.active), :has(#tab-settings.active), :has(#tab-company.active), :has(#tab-comissao-tecnica.active) ):hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.14) !important; } .amti-content-container:is( :has(#tab-home.active), :has(#tab-finance.active), :has(#tab-ai-advisor.active), :has(#tab-settings.active), :has(#tab-company.active), :has(#tab-comissao-tecnica.active) ):hover::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.24) !important; } } @media (max-width: 900px) { /* Mobile scrolls the document root; keep its gutter stable and hide the thumb. */ html:is( :has(#tab-home.active), :has(#tab-finance.active), :has(#tab-ai-advisor.active), :has(#tab-settings.active), :has(#tab-company.active), :has(#tab-comissao-tecnica.active) ) { scrollbar-color: transparent transparent; scrollbar-width: thin; } html:is( :has(#tab-home.active), :has(#tab-finance.active), :has(#tab-ai-advisor.active), :has(#tab-settings.active), :has(#tab-company.active), :has(#tab-comissao-tecnica.active) )::-webkit-scrollbar { width: 6px; background: transparent !important; } html:is( :has(#tab-home.active), :has(#tab-finance.active), :has(#tab-ai-advisor.active), :has(#tab-settings.active), :has(#tab-company.active), :has(#tab-comissao-tecnica.active) )::-webkit-scrollbar-track, html:is( :has(#tab-home.active), :has(#tab-finance.active), :has(#tab-ai-advisor.active), :has(#tab-settings.active), :has(#tab-company.active), :has(#tab-comissao-tecnica.active) )::-webkit-scrollbar-track-piece { background: transparent !important; background-color: transparent !important; } html:is( :has(#tab-home.active), :has(#tab-finance.active), :has(#tab-ai-advisor.active), :has(#tab-settings.active), :has(#tab-company.active), :has(#tab-comissao-tecnica.active) )::-webkit-scrollbar-thumb { background-color: transparent !important; } } @media (max-width: 900px) and (hover: hover) { html:is( :has(#tab-home.active), :has(#tab-finance.active), :has(#tab-ai-advisor.active), :has(#tab-settings.active), :has(#tab-company.active), :has(#tab-comissao-tecnica.active) ):hover { scrollbar-color: rgba(255, 255, 255, 0.14) transparent; } html:is( :has(#tab-home.active), :has(#tab-finance.active), :has(#tab-ai-advisor.active), :has(#tab-settings.active), :has(#tab-company.active), :has(#tab-comissao-tecnica.active) ):hover::-webkit-scrollbar { width: 6px; background: transparent !important; } html:is( :has(#tab-home.active), :has(#tab-finance.active), :has(#tab-ai-advisor.active), :has(#tab-settings.active), :has(#tab-company.active), :has(#tab-comissao-tecnica.active) ):hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.14) !important; } } /* Modal Minha Conta & Modais: auto-hide scrollbar on idle */ #myAccountModal .amti-modal-body, .amti-modal-body { scrollbar-color: transparent transparent; scrollbar-width: thin; } #myAccountModal .amti-modal-body:hover, .amti-modal-body:hover { scrollbar-color: rgba(255, 255, 255, 0.14) transparent; } #myAccountModal .amti-modal-body::-webkit-scrollbar-thumb, .amti-modal-body::-webkit-scrollbar-thumb { background-color: transparent !important; } #myAccountModal .amti-modal-body:hover::-webkit-scrollbar-thumb, .amti-modal-body:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.14) !important; } .amti-content-container { box-sizing: border-box; flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overflow-y: overlay; overflow-x: hidden; padding: 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.14) transparent; scrollbar-gutter: auto; background: radial-gradient(circle at top, rgba(6, 182, 212, 0.04), transparent 30%), var(--bg-main); position: relative; } .amti-tab-pane { display: none; animation: fadeIn 0.3s ease-out; } /* All active tabs become visible */ .amti-tab-pane.active { display: block; } /* Flex-tab: exact height using calc so it never overflows the browser window. Formula: 100vh (full screen) - 72px (topbar height) - 32px (content-container padding: 16px top + 16px bottom) The tab fills this space, clips internally, and tables scroll inside. */ .amti-tab-pane.active.amti-flex-tab { display: flex !important; flex-direction: column !important; height: calc(100vh - 72px - 32px) !important; max-height: calc(100vh - 72px - 32px) !important; overflow: hidden !important; gap: 16px; } body.has-contract-expiration-banner .amti-tab-pane.active.amti-flex-tab { height: calc(100vh - 38px - 72px - 32px) !important; max-height: calc(100vh - 38px - 72px - 32px) !important; } .amti-flex-1 { flex: 1 1 auto; min-height: 0; } .amti-flex-col { display: flex !important; flex-direction: column !important; } .amti-card.amti-flex-col > .amti-table-container, .amti-grid-card.amti-flex-col > .amti-table-container, .amti-card.amti-flex-col > .amti-card-body, .amti-grid-card.amti-flex-col > .amti-card-body, .amti-grid-card.amti-flex-1 > .amti-table-container, .amti-grid-card.amti-flex-1 > .amti-card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Card pai deve clipar overflow para que a tabela role internamente */ .amti-tab-pane.active.amti-flex-tab > .amti-card.amti-flex-1.amti-flex-col, .amti-tab-pane.active.amti-flex-tab > .amti-card.amti-flex-col { overflow: hidden; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1200px) { .amti-topbar { padding: 0 18px; } .amti-content-container { padding: 24px; } } /* ═════════════════════════════════════════════════════════════════════════ 📱 RESPONSIVIDADE PROFUNDA: TABLETS E SMARTPHONES (RETRATO & PAISAGEM) ═════════════════════════════════════════════════════════════════════════ */ /* ─── Tablet & Mobile (< 1024px) ─── */ @media (max-width: 1023px) { .amti-shell { position: relative; overflow-x: clip !important; } .amti-main { overflow-x: clip !important; } .amti-topbar { position: sticky !important; top: 0 !important; z-index: 900 !important; background: var(--topbar-bg, var(--bg-main)) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Exibe o botão hamburguer para navegação mobile/tablet */ .amti-btn.amti-mobile-nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: var(--radius-sm, 6px); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-primary); cursor: pointer; font-size: 1.15rem; transition: background-color 0.2s, transform 0.15s; flex-shrink: 0; } .amti-btn.amti-mobile-nav-toggle:active { transform: scale(0.94); background: rgba(56, 189, 248, 0.15); } /* Sidebar converte-se em Drawer Flutuante Off-Canvas */ .amti-sidebar { position: fixed !important; left: 0; top: 0; bottom: 0; width: min(84vw, 300px) !important; min-width: min(84vw, 300px) !important; max-width: 320px !important; z-index: 99999 !important; transform: translateX(-105%) !important; box-shadow: 20px 0 50px rgba(0, 0, 0, 0.65) !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; border-right: 1px solid var(--border-color); } .amti-sidebar-close { display: inline-flex; align-items: center; justify-content: center; align-self: center; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; flex: 0 0 36px !important; aspect-ratio: 1 / 1 !important; padding: 0 !important; box-sizing: border-box !important; } .amti-sidebar .amti-brand { height: 72px; min-height: 72px; gap: 10px; padding: 0 4.5px; } .amti-sidebar .amti-brand-logo { flex: 0 0 62px; width: 62px; min-width: 62px; height: 62px; } .amti-sidebar .amti-brand-name { display: block !important; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: 1 !important; transform: none !important; } .amti-sidebar .amti-nav-list { justify-content: flex-start; gap: 8px; padding: 18px 12px 24px; overflow-y: auto; } .amti-sidebar .amti-nav-list > .amti-nav-item { flex: 0 0 auto; } .amti-sidebar .amti-nav-item button { height: 56px; min-height: 56px; grid-template-columns: 56px minmax(0, 1fr); column-gap: 8px; padding-right: 12px; } .amti-sidebar .amti-nav-item button i { font-size: 1.3rem; } .amti-sidebar .amti-nav-item button span { display: block !important; opacity: 1 !important; transform: none !important; } body.has-contract-expiration-banner .amti-sidebar { top: 54px; height: calc(100vh - 54px); } body.mobile-sidebar-open .amti-sidebar { transform: translateX(0) !important; } body.mobile-sidebar-open .amti-sidebar-overlay { opacity: 1 !important; pointer-events: auto !important; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Força elementos de texto do sidebar visíveis no modo drawer */ .amti-sidebar .amti-brand-name, .amti-sidebar .amti-nav-item button span, .amti-sidebar .amti-user-name, .amti-sidebar .amti-user-role, .amti-sidebar .amti-user-action-label, .amti-sidebar .amti-user-info { opacity: 1 !important; transform: none !important; pointer-events: auto !important; display: block !important; } .amti-main { width: 100% !important; min-width: 0 !important; } .amti-topbar { padding: 10px 14px; min-height: 60px; } /* Grid do Início: 2 colunas para tablets */ .amti-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } } /* ─── Modo Retrato (Tablets e Telas Verticais até 1024px) ─── */ @media (max-width: 1023px) and (orientation: portrait) { .amti-topbar { padding: 8px 12px !important; min-height: 56px !important; gap: 8px !important; overflow: hidden !important; } .amti-topbar-left { gap: 8px !important; flex: 1 1 0 !important; min-width: 0 !important; max-width: calc(100% - 130px) !important; overflow: hidden !important; } .amti-title-area { min-width: 0 !important; flex: 1 1 auto !important; overflow: hidden !important; } .amti-title-area h2 { font-size: 1.1rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } .amti-title-area p { font-size: 0.74rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } .amti-topbar-actions .amti-btn-text-full { display: none !important; } .amti-topbar-actions .amti-btn-text-short { display: inline !important; } } /* ─── Smartphones e Telas Pequenas (< 768px) ─── */ @media (max-width: 767px) { html, body { overflow-x: hidden; } .amti-content-container { padding: 12px 10px 30px !important; } /* Topbar compacta e ergonômica — Título nunca fica atrás dos botões */ .amti-topbar { padding: 8px 12px !important; height: auto !important; min-height: 56px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; overflow: hidden !important; } .amti-topbar-left { gap: 8px !important; flex: 1 1 0 !important; min-width: 0 !important; max-width: calc(100% - 120px) !important; overflow: hidden !important; } .amti-title-area { min-width: 0 !important; flex: 1 1 auto !important; overflow: hidden !important; } .amti-title-area h2 { font-size: 1.05rem !important; line-height: 1.25 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; min-height: auto !important; } .amti-title-area p { font-size: 0.74rem !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; min-height: auto !important; } .amti-topbar-actions { display: flex !important; align-items: center !important; gap: 6px !important; flex: 0 0 auto !important; margin-left: auto !important; } .amti-topbar-action-group { display: flex !important; align-items: center !important; gap: 6px !important; } .amti-topbar-actions .amti-btn { padding: 6px 10px !important; min-height: 36px !important; height: 36px !important; font-size: 0.82rem !important; white-space: nowrap !important; flex-shrink: 0 !important; } .amti-topbar-actions .amti-btn-text-full { display: none !important; } .amti-topbar-actions .amti-btn-text-short { display: inline !important; } /* Início (Dashboard de Cards): 1 coluna fluida em modo retrato */ .amti-dashboard-grid { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; overflow: visible !important; } .amti-dashboard-grid .amti-grid-card, .amti-dashboard-grid .amti-card { grid-column: 1 / -1 !important; grid-row-start: auto !important; grid-row-end: auto !important; min-height: auto !important; padding: 14px 12px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; touch-action: pan-y; } /* O cabeçalho é a área de arraste por toque. O atraso evita conflito com botões e permite rolar o conteúdo normalmente. */ .amti-dashboard-grid .amti-card-header, .amti-dashboard-grid .os-card-header, .amti-dashboard-grid .agenda-card-header { min-height: 48px !important; cursor: grab !important; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .amti-dashboard-grid .amti-card-header:active, .amti-dashboard-grid .os-card-header:active, .amti-dashboard-grid .agenda-card-header:active { cursor: grabbing !important; } .amti-dashboard-grid .amti-card-header-main, .amti-dashboard-grid .amti-card-header-titles { min-width: 0 !important; } .amti-dashboard-grid .amti-card-header-title, .amti-dashboard-grid .amti-card-header-subtitle { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .amti-dashboard-grid .amti-card-body { min-width: 0 !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* Cards de Início compactos no retrato: o cabeçalho e as ações não ocupam uma linha vazia entre o título e o conteúdo. */ #tab-home .amti-dashboard-grid > .amti-grid-card, #tab-home .amti-dashboard-grid > .amti-card { padding: 12px !important; border-radius: 12px !important; } #tab-home .amti-dashboard-grid .amti-card-header, #tab-home .amti-dashboard-grid .os-card-header, #tab-home .amti-dashboard-grid .agenda-card-header { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 0 8px !important; padding: 0 0 8px !important; min-height: 0 !important; } #tab-home .amti-dashboard-grid .os-card-actions, #tab-home .amti-dashboard-grid .agenda-card-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 6px !important; margin: 0 !important; } #tab-home .amti-dashboard-grid .os-card-actions .amti-btn, #tab-home .amti-dashboard-grid .agenda-card-actions .amti-btn { min-height: 34px !important; height: 34px !important; padding: 0 9px !important; font-size: 0.78rem !important; white-space: nowrap !important; } #tab-home .amti-dashboard-grid .os-card-actions .amti-btn span, #tab-home .amti-dashboard-grid .agenda-card-actions .amti-agenda-btn-text { display: none !important; } #tab-home .amti-dashboard-grid .amti-card-header-avatar { flex: 0 0 42px !important; width: 42px !important; height: 42px !important; } #tab-home .amti-dashboard-grid .amti-card-header-titles { gap: 2px !important; line-height: 1.15 !important; } #tab-home .amti-dashboard-grid .amti-card-header-title { font-size: 0.98rem !important; line-height: 1.2 !important; } #tab-home .amti-dashboard-grid .amti-card-header-subtitle { font-size: 0.74rem !important; line-height: 1.2 !important; } #tab-home .amti-dashboard-grid .os-card .amti-card-body, #tab-home .amti-dashboard-grid .agenda-card .amti-card-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } #tab-home .amti-dashboard-grid .os-table-wrap { flex: 1 1 auto !important; min-height: 0 !important; max-height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } #tab-home .amti-dashboard-grid .os-table { width: 100% !important; min-width: 0 !important; table-layout: fixed !important; } .amti-dashboard-grid .amti-drag-ghost { opacity: 0.72 !important; transform: rotate(1deg) scale(0.99) !important; box-shadow: 0 18px 36px rgba(2, 6, 23, 0.48) !important; } /* Ações inferiores dos cards */ .amti-grid-card .amti-card-actions-bottom { flex-direction: column; gap: 6px; } .amti-grid-card .amti-card-btn { width: 100%; min-height: 42px; font-size: 0.88rem; } /* Barras de pesquisa e filtros nas abas (OS, Clientes, Produtos, etc.) */ .amti-search-panel, .os-card-search-panel, .amti-filter-row, .amti-tab-actions-bar { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; width: 100% !important; } .amti-search-panel .amti-search-input, .os-card-search-panel input, .amti-search-panel input, .amti-search-panel select, .os-card-search-panel select { width: 100% !important; font-size: 16px !important; /* Padrão anti-zoom em smartphones */ min-height: 42px !important; } /* Botão principal de criação (+ Nova OS, + Novo Cliente) em destaque total */ .amti-search-panel .amti-btn-primary, .os-card-search-panel .amti-btn-primary, .amti-tab-actions-bar .amti-btn-primary { width: 100% !important; min-height: 44px !important; justify-content: center !important; font-size: 0.95rem !important; } /* Tabelas com rolagem horizontal suave */ .amti-table-container, .os-table-wrap, .amti-table-responsive { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: var(--radius-md, 8px); } .amti-table th, .amti-table td, .os-table th, .os-table td { padding: 10px 8px !important; font-size: 0.82rem !important; } /* Botões de ação dentro das linhas da tabela */ .amti-table .amti-btn, .os-table .amti-btn, .amti-table button, .os-table button { min-height: 36px; padding: 6px 10px; font-size: 0.8rem; } /* Modais Ultra Responsivos em Smartphones */ .amti-modal { padding: 6px !important; align-items: flex-end !important; /* Estilo sheet/gaveta na base em telas pequenas */ } .amti-modal-content, .zn-modal-content, .modal-content { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 94vh !important; border-radius: var(--radius-xl, 0px) var(--radius-xl, 0px) 0 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } .amti-modal-header { padding: 14px 16px !important; flex-shrink: 0; } .amti-modal-header h3, .amti-modal-header .amti-modal-title { font-size: 1.05rem !important; } .amti-modal-body { padding: 14px 14px 20px !important; flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } .amti-modal-footer { padding: 10px 14px !important; flex-shrink: 0; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; } .amti-modal-footer .amti-btn, .amti-modal-footer button { flex: 1 1 0 !important; width: auto !important; min-height: 40px !important; height: 40px !important; max-height: 40px !important; justify-content: center !important; font-size: 0.88rem !important; font-weight: 600 !important; padding: 0 12px !important; margin: 0 !important; } /* Formulários em 1 coluna e anti-zoom */ .amti-form-grid-2, .amti-form-grid-3, .amti-form-grid-4, .os-form-row, .form-row, .zn-form-row { grid-template-columns: 1fr !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } .amti-form-control, .amti-input, .amti-select, .amti-textarea, .os-input, .os-select, .os-textarea, .zn-input, .zn-select, .zn-textarea, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="tel"], select, textarea { font-size: 16px !important; /* Previne auto-zoom no iOS Safari */ min-height: 44px !important; box-sizing: border-box !important; } /* No modo mobile: tab-sales deve rolar verticalmente para acomodar catálogo e carrinho */ #tab-sales.amti-tab-pane.active, .amti-tab-pane.active.amti-flex-tab#tab-sales { height: auto !important; min-height: 100% !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; display: flex !important; flex-direction: column !important; padding-bottom: 80px !important; } /* Layout do PDV / Vendas */ .pdv-layout { flex-direction: column !important; height: auto !important; min-height: auto !important; max-height: none !important; overflow: visible !important; gap: 14px !important; flex: none !important; } /* No modo mobile: reduz em 50% a área onde mostra os produtos em estoque */ .pdv-catalog { height: auto !important; max-height: 200px !important; min-height: 140px !important; overflow-y: auto !important; flex: none !important; } .pdv-product-grid { max-height: 130px !important; overflow-y: auto !important; } .pdv-cart { width: 100% !important; min-height: auto !important; max-height: none !important; overflow: visible !important; flex: none !important; margin-bottom: 20px !important; } .pdv-cart-items { max-height: 180px !important; overflow-y: auto !important; } .pdv-cart-summary { overflow: visible !important; } /* Gerente IA e Chat */ .ai-advisor-layout { flex-direction: column !important; height: auto !important; gap: 12px !important; } .ai-advisor-suggestions { width: 100% !important; min-height: 200px !important; } .ai-advisor-input-area { padding: 8px !important; gap: 8px !important; } /* Alertas flutuantes e Toasts */ .amti-contract-warning-toast, .amti-toast, .toast { left: 10px !important; right: 10px !important; width: auto !important; max-width: calc(100vw - 20px) !important; bottom: 12px !important; top: auto !important; } } /* ─── Telas Ultra-Estreitas (< 420px) ─── */ @media (max-width: 420px) { .amti-topbar-actions .amti-btn-text-short { display: none !important; } .amti-topbar-actions .amti-btn { width: 36px !important; min-width: 36px !important; padding: 0 !important; justify-content: center !important; } .amti-topbar-left { max-width: calc(100% - 90px) !important; } .amti-title-area p { display: none !important; /* Destaque total ao título da página */ } .amti-title-area h2 { font-size: 1.12rem !important; } } /* ─── Ajustes Paisagem em Smartphones (Altura < 500px) ─── */ @media (max-height: 500px) and (orientation: landscape) { .amti-topbar { min-height: 48px !important; padding: 4px 10px !important; } .amti-modal-content { max-height: 96vh !important; border-radius: var(--radius-lg, 0px) !important; } /* Modo Paisagem no PDV / Vendas: liberar altura e rolagem da página inteira */ #tab-sales.amti-tab-pane.active, .amti-tab-pane.active.amti-flex-tab#tab-sales { height: auto !important; max-height: none !important; overflow: visible !important; display: flex !important; flex-direction: column !important; } #tab-sales .pdv-layout { flex-direction: column !important; height: auto !important; min-height: auto !important; max-height: none !important; overflow: visible !important; gap: 16px !important; } #tab-sales .pdv-catalog { height: auto !important; min-height: auto !important; max-height: none !important; overflow: visible !important; flex: none !important; } #tab-sales .pdv-product-grid { max-height: 220px !important; overflow-y: auto !important; } #tab-sales .pdv-cart { width: 100% !important; min-height: auto !important; max-height: none !important; overflow: visible !important; flex: none !important; margin-bottom: 24px !important; } } /* ═════════════════════════════════════════════════════════════════════════ 🛡️ SUÍTE DE PRESERVAÇÃO INTEGRAL DA IDENTIDADE DOS TEMAS Garante que o design exclusivo de cada tema (cantos retos nos temas Block e cantos arredondados suaves nos temas Sleek/Light) seja 100% mantido em qualquer modo de tela (desktop, tablet, smartphone, retrato). ═════════════════════════════════════════════════════════════════════════ */ /* ── 1. TEMA BLOCK STEEL (Metal Industrial / Cantos 100% Retos) ── */ html[data-theme='block-steel'] *, html.theme-block-steel *, [data-theme='block-steel'] .amti-card, [data-theme='block-steel'] .amti-grid-card, [data-theme='block-steel'] .amti-stat-card, [data-theme='block-steel'] .amti-archive-card, [data-theme='block-steel'] .amti-btn, [data-theme='block-steel'] .amti-card-btn, [data-theme='block-steel'] .amti-mobile-nav-toggle, [data-theme='block-steel'] .amti-modal-content, [data-theme='block-steel'] .amti-topbar, [data-theme='block-steel'] .amti-sidebar, [data-theme='block-steel'] .amti-nav-item, [data-theme='block-steel'] .amti-nav-item button, [data-theme='block-steel'] .amti-nav-item.active button, [data-theme='block-steel'] .amti-nav-item button:hover, [data-theme='block-steel'] .amti-nav-item:hover button, [data-theme='block-steel'] .amti-nav-group button, [data-theme='block-steel'] .amti-submenu-item button, [data-theme='block-steel'] .amti-user-profile button, [data-theme='block-steel'] .amti-logout-btn, [data-theme='block-steel'] .amti-logout-btn:hover, [data-theme='block-steel'] .amti-logout-btn.active, [data-theme='block-steel'] .amti-sidebar-close, [data-theme='block-steel'] .amti-modal-close, [data-theme='block-steel'] .os-modal-close, [data-theme='block-steel'] .zn-modal-close, [data-theme='block-steel'] .sa-modal-close, [data-theme='block-steel'] .toast-close-btn, [data-theme='block-steel'] .feedback-panel-close, [data-theme='block-steel'] .feedback-screenshot-remove, [data-theme='block-steel'] .amti-contract-expiration-close, [data-theme='block-steel'] .amti-settings-search-clear, [data-theme='block-steel'] .sa-search-clear, [data-theme='block-steel'] .pdv-widget-search-clear, [data-theme='block-steel'] .close, [data-theme='block-steel'] .btn-close, [data-theme='block-steel'] [data-dismiss='modal'], [data-theme='block-steel'] .amti-form-control, [data-theme='block-steel'] .amti-search-box, [data-theme='block-steel'] .amti-search-input, [data-theme='block-steel'] .amti-table-container, [data-theme='block-steel'] .os-table-wrap, [data-theme='block-steel'] .amti-badge, [data-theme='block-steel'] .pdv-product-card, [data-theme='block-steel'] .amti-pdv-cart, [data-theme='block-steel'] .amti-pdv-catalog-card, [data-theme='block-steel'] .amti-settings-card, [data-theme='block-steel'] .amti-settings-section-card, [data-theme='block-steel'] .amti-settings-section-icon-badge, [data-theme='block-steel'] .amti-settings-section-count-badge { border-radius: 0px !important; } /* ── 2. TEMA BLOCK BLUE (High-Tech Industrial / Cantos 100% Retos) ── */ html[data-theme='block-blue'] *, html.theme-block-blue *, [data-theme='block-blue'] .amti-card, [data-theme='block-blue'] .amti-grid-card, [data-theme='block-blue'] .amti-stat-card, [data-theme='block-blue'] .amti-archive-card, [data-theme='block-blue'] .amti-btn, [data-theme='block-blue'] .amti-card-btn, [data-theme='block-blue'] .amti-mobile-nav-toggle, [data-theme='block-blue'] .amti-modal-content, [data-theme='block-blue'] .amti-topbar, [data-theme='block-blue'] .amti-sidebar, [data-theme='block-blue'] .amti-nav-item, [data-theme='block-blue'] .amti-nav-item button, [data-theme='block-blue'] .amti-nav-item.active button, [data-theme='block-blue'] .amti-nav-item button:hover, [data-theme='block-blue'] .amti-nav-item:hover button, [data-theme='block-blue'] .amti-nav-group button, [data-theme='block-blue'] .amti-submenu-item button, [data-theme='block-blue'] .amti-user-profile button, [data-theme='block-blue'] .amti-logout-btn, [data-theme='block-blue'] .amti-logout-btn:hover, [data-theme='block-blue'] .amti-logout-btn.active, [data-theme='block-blue'] .amti-sidebar-close, [data-theme='block-blue'] .amti-modal-close, [data-theme='block-blue'] .os-modal-close, [data-theme='block-blue'] .zn-modal-close, [data-theme='block-blue'] .sa-modal-close, [data-theme='block-blue'] .toast-close-btn, [data-theme='block-blue'] .feedback-panel-close, [data-theme='block-blue'] .feedback-screenshot-remove, [data-theme='block-blue'] .amti-contract-expiration-close, [data-theme='block-blue'] .amti-settings-search-clear, [data-theme='block-blue'] .sa-search-clear, [data-theme='block-blue'] .pdv-widget-search-clear, [data-theme='block-blue'] .close, [data-theme='block-blue'] .btn-close, [data-theme='block-blue'] [data-dismiss='modal'], [data-theme='block-blue'] .amti-form-control, [data-theme='block-blue'] .amti-search-box, [data-theme='block-blue'] .amti-search-input, [data-theme='block-blue'] .amti-table-container, [data-theme='block-blue'] .os-table-wrap, [data-theme='block-blue'] .amti-badge, [data-theme='block-blue'] .pdv-product-card, [data-theme='block-blue'] .amti-pdv-cart, [data-theme='block-blue'] .amti-pdv-catalog-card, [data-theme='block-blue'] .amti-settings-card, [data-theme='block-blue'] .amti-settings-section-card, [data-theme='block-blue'] .amti-settings-section-icon-badge, [data-theme='block-blue'] .amti-settings-section-count-badge { border-radius: 0px !important; } /* ── 3. TEMA DARK BLOCK / OLED (Minimalista Puro / Cantos 100% Retos) ── */ html[data-theme='dark-block'] *, html.theme-dark-block *, [data-theme='dark-block'] .amti-card, [data-theme='dark-block'] .amti-grid-card, [data-theme='dark-block'] .amti-stat-card, [data-theme='dark-block'] .amti-archive-card, [data-theme='dark-block'] .amti-btn, [data-theme='dark-block'] .amti-card-btn, [data-theme='dark-block'] .amti-mobile-nav-toggle, [data-theme='dark-block'] .amti-modal-content, [data-theme='dark-block'] .amti-topbar, [data-theme='dark-block'] .amti-sidebar, [data-theme='dark-block'] .amti-nav-item, [data-theme='dark-block'] .amti-nav-item button, [data-theme='dark-block'] .amti-nav-item.active button, [data-theme='dark-block'] .amti-nav-item button:hover, [data-theme='dark-block'] .amti-nav-item:hover button, [data-theme='dark-block'] .amti-nav-group button, [data-theme='dark-block'] .amti-submenu-item button, [data-theme='dark-block'] .amti-user-profile button, [data-theme='dark-block'] .amti-logout-btn, [data-theme='dark-block'] .amti-logout-btn:hover, [data-theme='dark-block'] .amti-logout-btn.active, [data-theme='dark-block'] .amti-sidebar-close, [data-theme='dark-block'] .amti-modal-close, [data-theme='dark-block'] .os-modal-close, [data-theme='dark-block'] .zn-modal-close, [data-theme='dark-block'] .sa-modal-close, [data-theme='dark-block'] .toast-close-btn, [data-theme='dark-block'] .feedback-panel-close, [data-theme='dark-block'] .feedback-screenshot-remove, [data-theme='dark-block'] .amti-contract-expiration-close, [data-theme='dark-block'] .amti-settings-search-clear, [data-theme='dark-block'] .sa-search-clear, [data-theme='dark-block'] .pdv-widget-search-clear, [data-theme='dark-block'] .close, [data-theme='dark-block'] .btn-close, [data-theme='dark-block'] [data-dismiss='modal'], [data-theme='dark-block'] .amti-form-control, [data-theme='dark-block'] .amti-search-box, [data-theme='dark-block'] .amti-search-input, [data-theme='dark-block'] .amti-table-container, [data-theme='dark-block'] .os-table-wrap, [data-theme='dark-block'] .amti-badge, [data-theme='dark-block'] .pdv-product-card, [data-theme='dark-block'] .amti-pdv-cart, [data-theme='dark-block'] .amti-pdv-catalog-card, [data-theme='dark-block'] .amti-settings-card, [data-theme='dark-block'] .amti-settings-section-card, [data-theme='dark-block'] .amti-settings-section-icon-badge, [data-theme='dark-block'] .amti-settings-section-count-badge { border-radius: 0px !important; } /* ── 4. TEMA BLOCK LIGHT (Slate Industrial Claro / Cantos 100% Retos) ── */ html[data-theme='block-light'] *, html.theme-block-light *, [data-theme='block-light'] .amti-card, [data-theme='block-light'] .amti-grid-card, [data-theme='block-light'] .amti-stat-card, [data-theme='block-light'] .amti-archive-card, [data-theme='block-light'] .amti-btn, [data-theme='block-light'] .amti-card-btn, [data-theme='block-light'] .amti-mobile-nav-toggle, [data-theme='block-light'] .amti-modal-content, [data-theme='block-light'] .amti-topbar, [data-theme='block-light'] .amti-sidebar, [data-theme='block-light'] .amti-nav-item, [data-theme='block-light'] .amti-nav-item button, [data-theme='block-light'] .amti-nav-item.active button, [data-theme='block-light'] .amti-nav-item button:hover, [data-theme='block-light'] .amti-nav-item:hover button, [data-theme='block-light'] .amti-nav-group button, [data-theme='block-light'] .amti-submenu-item button, [data-theme='block-light'] .amti-user-profile button, [data-theme='block-light'] .amti-logout-btn, [data-theme='block-light'] .amti-logout-btn:hover, [data-theme='block-light'] .amti-logout-btn.active, [data-theme='block-light'] .amti-sidebar-close, [data-theme='block-light'] .amti-modal-close, [data-theme='block-light'] .os-modal-close, [data-theme='block-light'] .zn-modal-close, [data-theme='block-light'] .sa-modal-close, [data-theme='block-light'] .toast-close-btn, [data-theme='block-light'] .feedback-panel-close, [data-theme='block-light'] .feedback-screenshot-remove, [data-theme='block-light'] .amti-contract-expiration-close, [data-theme='block-light'] .amti-settings-search-clear, [data-theme='block-light'] .sa-search-clear, [data-theme='block-light'] .pdv-widget-search-clear, [data-theme='block-light'] .close, [data-theme='block-light'] .btn-close, [data-theme='block-light'] [data-dismiss='modal'], [data-theme='block-light'] .amti-form-control, [data-theme='block-light'] .amti-search-box, [data-theme='block-light'] .amti-search-input, [data-theme='block-light'] .amti-table-container, [data-theme='block-light'] .os-table-wrap, [data-theme='block-light'] .amti-badge, [data-theme='block-light'] .pdv-product-card, [data-theme='block-light'] .amti-pdv-cart, [data-theme='block-light'] .amti-pdv-catalog-card, [data-theme='block-light'] .amti-settings-card, [data-theme='block-light'] .amti-settings-section-card, [data-theme='block-light'] .amti-settings-section-icon-badge, [data-theme='block-light'] .amti-settings-section-count-badge { border-radius: 0px !important; } /* ── 5. TEMA DARK (Dark Sleek Glass / Cantos Arredondados) ── */ html[data-theme='dark'] .amti-card, html[data-theme='dark'] .amti-grid-card, html[data-theme='dark'] .amti-stat-card, html[data-theme='dark'] .amti-archive-card, html.theme-dark .amti-card, html.theme-dark .amti-grid-card { border-radius: var(--radius-lg, 14px) !important; } html[data-theme='dark'] .amti-btn, html.theme-dark .amti-btn { border-radius: var(--radius-md, 10px) !important; } html[data-theme='dark'] .amti-mobile-nav-toggle, html.theme-dark .amti-mobile-nav-toggle { border-radius: 10px !important; } html[data-theme='dark'] .amti-nav-item button, html[data-theme='dark'] .amti-nav-item.active button, html[data-theme='dark'] .amti-nav-item button:hover, html[data-theme='dark'] .amti-logout-btn, html[data-theme='dark'] .amti-logout-btn:hover, html[data-theme='dark'] .amti-logout-btn.active, html.theme-dark .amti-nav-item button, html.theme-dark .amti-nav-item.active button, html.theme-dark .amti-nav-item button:hover, html.theme-dark .amti-logout-btn, html.theme-dark .amti-logout-btn:hover, html.theme-dark .amti-logout-btn.active { border-radius: 12px !important; } /* ── 6. TEMA LIGHT (Light Clean Soft / Cantos Arredondados) ── */ html[data-theme='light'] .amti-card, html[data-theme='light'] .amti-grid-card, html[data-theme='light'] .amti-stat-card, html[data-theme='light'] .amti-archive-card, html.theme-light .amti-card, html.theme-light .amti-grid-card { border-radius: var(--radius-lg, 14px) !important; } html[data-theme='light'] .amti-btn, html.theme-light .amti-btn { border-radius: var(--radius-md, 10px) !important; } html[data-theme='light'] .amti-mobile-nav-toggle, html.theme-light .amti-mobile-nav-toggle { border-radius: 10px !important; } html[data-theme='light'] .amti-nav-item button, html[data-theme='light'] .amti-nav-item.active button, html[data-theme='light'] .amti-nav-item button:hover, html[data-theme='light'] .amti-logout-btn, html[data-theme='light'] .amti-logout-btn:hover, html[data-theme='light'] .amti-logout-btn.active, html.theme-light .amti-nav-item button, html.theme-light .amti-nav-item.active button, html.theme-light .amti-nav-item button:hover, html.theme-light .amti-logout-btn, html.theme-light .amti-logout-btn:hover, html.theme-light .amti-logout-btn.active { border-radius: 12px !important; } /* NOTE: .amti-main is defined at line ~1848 with height:100vh and overflow:hidden. The rule that was here (height:auto, overflow:visible) was overriding it and causing all full-page tabs to overflow the browser window. It has been removed. */ .amti-card { background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(8, 15, 28, 0.98)), radial-gradient(circle at top, rgba(56, 189, 248, 0.06), transparent 28%); border: 1px solid rgba(148, 163, 184, 0.16); border-radius: var(--radius-xl); padding: 18px; box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(148, 163, 184, 0.06), 0 0 0 1px rgba(56, 189, 248, 0.03); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; contain: layout style; } :is(html, body):not(.amti-no-card-hover):not(.amti-performance-mode):not(.amti-ultra-performance-mode) .amti-card:hover { transform: translateY(-2px); border-color: rgba(34, 211, 238, 0.28); box-shadow: var(--card-glow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.04); } html[data-theme='light']:not(.amti-no-card-hover):not(.amti-performance-mode):not(.amti-ultra-performance-mode) .amti-card:hover { transform: translateY(-2px); border-color: rgba(148,163,184,0.15); box-shadow: 0 10px 24px rgba(15,23,42,0.07), 0 0 0 1px rgba(148,163,184,0.08); } .amti-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; } .amti-card-header .amti-btn { height: 36px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; } .amti-card-title { font-size: 1.08rem; font-weight: 700; display: flex; align-items: center; gap: 10px; color: var(--text-primary); letter-spacing: -0.01em; } .amti-settings-shell { display: flex; flex-direction: column; gap: 18px; } /* Espaçamento compacto e equilibrado entre os controles da página de configurações. */ #tab-settings .amti-settings-shell { gap: 0; } #tab-settings .amti-settings-page-head { margin-bottom: 22px; } #tab-settings .amti-settings-top-row { margin-bottom: 16px; } #tab-settings .amti-settings-intro-row { margin-bottom: 20px !important; } /* ───── Paletas Temáticas Sutis por Categoria (não agressivas) ───── */ #tab-settings [data-settings-section="panel"] { --sec-color: #818cf8; --sec-bg: rgba(129, 140, 248, 0.10); --sec-border: rgba(129, 140, 248, 0.28); --sec-glow: rgba(129, 140, 248, 0.04); } #tab-settings [data-settings-section="operations"] { --sec-color: #34d399; --sec-bg: rgba(52, 211, 153, 0.10); --sec-border: rgba(52, 211, 153, 0.28); --sec-glow: rgba(52, 211, 153, 0.04); } #tab-settings [data-settings-section="access"] { --sec-color: #fbbf24; --sec-bg: rgba(251, 191, 36, 0.10); --sec-border: rgba(251, 191, 36, 0.28); --sec-glow: rgba(251, 191, 36, 0.04); } #tab-settings [data-settings-section="integrations"] { --sec-color: #22d3ee; --sec-bg: rgba(34, 211, 238, 0.10); --sec-border: rgba(34, 211, 238, 0.28); --sec-glow: rgba(34, 211, 238, 0.04); } #tab-settings [data-settings-section="business"] { --sec-color: #60a5fa; --sec-bg: rgba(96, 165, 250, 0.10); --sec-border: rgba(96, 165, 250, 0.28); --sec-glow: rgba(96, 165, 250, 0.04); } #tab-settings [data-settings-section="system"] { --sec-color: #f472b6; --sec-bg: rgba(244, 114, 182, 0.10); --sec-border: rgba(244, 114, 182, 0.28); --sec-glow: rgba(244, 114, 182, 0.04); } #tab-settings [data-settings-section="other"] { --sec-color: #94a3b8; --sec-bg: rgba(148, 163, 184, 0.10); --sec-border: rgba(148, 163, 184, 0.28); --sec-glow: rgba(148, 163, 184, 0.04); } #tab-settings .amti-settings-grid { display: flex !important; flex-direction: column !important; gap: 32px !important; row-gap: 32px !important; margin-top: 4px; } #tab-settings .amti-settings-section { min-width: 0; } #tab-settings .amti-settings-section-card { padding: 20px 22px !important; border-radius: 0px !important; border: 1px solid rgba(148, 163, 184, 0.12) !important; border-top: 2px solid var(--sec-border, rgba(148, 163, 184, 0.25)) !important; background: linear-gradient(180deg, var(--sec-glow, transparent) 0%, transparent 80px), rgba(15, 23, 42, 0.45) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; position: relative !important; overflow: hidden !important; transition: border-color 0.25s ease, box-shadow 0.25s ease; } #tab-settings .amti-settings-section-card:hover { border-color: var(--sec-border, rgba(148, 163, 184, 0.25)) !important; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.2) !important; } #tab-settings .amti-settings-section[hidden] { display: none !important; } #tab-settings .amti-settings-section-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; margin-bottom: 18px !important; padding-bottom: 14px !important; border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important; position: relative !important; } #tab-settings .amti-settings-section-header::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 140px; height: 2px; background: linear-gradient(90deg, var(--sec-color, #818cf8), transparent); border-radius: 0px !important; } #tab-settings .amti-settings-section-header-main { display: flex !important; align-items: center !important; gap: 14px !important; flex: 1 !important; min-width: 0 !important; } #tab-settings .amti-settings-section-icon-badge { width: 38px !important; height: 38px !important; border-radius: 0px !important; background: var(--sec-bg, rgba(129, 140, 248, 0.12)) !important; border: 1px solid var(--sec-border, rgba(129, 140, 248, 0.25)) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--sec-color, #818cf8) !important; font-size: 1rem !important; flex-shrink: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } #tab-settings .amti-settings-section-title-block { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; flex: 1 !important; } #tab-settings .amti-settings-section-title-row { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; } #tab-settings .amti-settings-section-title { margin: 0 !important; color: #f8fafc !important; font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; } #tab-settings .amti-settings-section-count-badge { display: inline-flex !important; align-items: center !important; padding: 2px 8px !important; font-size: 0.72rem !important; font-weight: 600 !important; color: var(--sec-color, #94a3b8) !important; background: var(--sec-bg, rgba(148, 163, 184, 0.12)) !important; border: 1px solid var(--sec-border, rgba(148, 163, 184, 0.2)) !important; border-radius: 0px !important; letter-spacing: 0.02em !important; } #tab-settings .amti-settings-section-description { margin: 0 !important; color: var(--text-secondary, #94a3b8) !important; font-size: 0.83rem !important; line-height: 1.4 !important; } /* ───── Cards Internos no Padrão Anterior do Dashboard ───── */ #tab-settings .amti-settings-section-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important; gap: 14px !important; align-items: stretch !important; } #tab-settings .amti-settings-section-grid > .amti-settings-card-soft { min-width: 0; min-height: 158px; padding: 16px; } #tab-settings .amti-settings-section-grid > .amti-settings-card-soft .amti-card-title { font-size: 0.98rem; line-height: 1.35; } #tab-settings .amti-settings-section-grid > .amti-settings-card-soft .amti-settings-help { font-size: 0.86rem; line-height: 1.55; } #tab-settings .amti-settings-empty-state { width: 100%; margin-top: 4px; padding: 28px 20px; border: 1px solid var(--border-color, rgba(148, 163, 184, 0.18)); border-radius: var(--radius-md, 10px); background: var(--bg-card, rgba(15, 23, 42, 0.28)); color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; text-align: center; } #tab-settings .amti-settings-empty-state > i { display: block; margin-bottom: 10px; color: var(--text-muted, #94a3b8); font-size: 1.6rem; } #tab-settings .amti-settings-empty-state > span { display: inline-block; margin-top: 5px; color: var(--text-muted, #94a3b8); font-size: 0.82rem; } @media (max-width: 900px) { #tab-settings .amti-settings-grid { gap: 22px !important; row-gap: 22px !important; } #tab-settings .amti-settings-section-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } #tab-settings .amti-settings-section-header-main { width: 100% !important; } #tab-settings .amti-settings-section-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; } #tab-settings .amti-settings-section-card { padding: 16px !important; } #tab-settings .amti-settings-section-grid > .amti-settings-card-soft { min-height: 0 !important; padding: 14px !important; } } /* Permitir que o settings shell (usado em Cadastros/Config) ocupe altura total na amti-flex-tab com scroll */ .amti-tab-pane.amti-flex-tab > .amti-settings-shell { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; } .amti-settings-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .amti-settings-page-title { display: flex; flex-direction: column; gap: 4px; } .amti-settings-page-title .amti-card-title { font-size: 1.1rem; } .amti-settings-page-kicker { color: var(--text-secondary); font-size: 0.95rem; } .amti-settings-page-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-md); background: rgba(6, 182, 212, 0.08); border: 1px solid rgba(6, 182, 212, 0.18); color: var(--text-primary); font-size: 0.82rem; } .amti-settings-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: stretch; } .amti-settings-hero-card { background: linear-gradient(145deg, rgba(6, 182, 212, 0.08), rgba(99, 102, 241, 0.06)), rgba(18, 18, 20, 0.95); border: 1px solid rgba(139, 92, 246, 0.18); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 14px 28px rgba(2, 6, 23, 0.28); min-height: 152px; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .amti-settings-hero-card:hover { transform: translateY(-2px); border-color: rgba(6, 182, 212, 0.35); } html[data-theme='light'] .amti-settings-hero-card { background: linear-gradient(145deg, rgba(6,182,212,0.04), rgba(99,102,241,0.03)), var(--card-surface, #ffffff); border-color: var(--border-color); box-shadow: 0 8px 20px rgba(15,23,42,0.06); } html[data-theme='light'] .amti-settings-hero-card:hover { border-color: rgba(99,102,241,0.20); box-shadow: 0 12px 28px rgba(15,23,42,0.08); } .amti-settings-accordion { padding: 0; overflow: hidden; background: linear-gradient(180deg, rgba(10, 14, 21, 0.98), rgba(8, 12, 18, 0.98)); box-shadow: 0 18px 34px rgba(2, 6, 23, 0.32), 0 0 0 1px rgba(56, 189, 248, 0.04); } .amti-settings-accordion > summary { list-style: none; cursor: pointer; } .amti-settings-accordion > summary::-webkit-details-marker { display: none; } .amti-settings-accordion .amti-card-header { margin-bottom: 0; } .amti-settings-accordion-body { padding: 0 18px 18px; } .amti-settings-hero-card h3 { font-size: 1rem; font-weight: 700; color: var(--text-primary); } .amti-settings-badges { display: flex; flex-wrap: wrap; gap: 8px; } .amti-settings-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-secondary); font-size: 0.82rem; } html[data-theme='light'] .amti-settings-badge { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); } .amti-settings-help { font-size: 0.92rem; margin-top: 8px; color: var(--text-secondary); } /* Cadastros page — inline search cards */ .amti-card-search { display: flex; gap: 4px; align-items: center; width: 100%; max-width: 100%; margin-bottom: 10px; box-sizing: border-box; } .amti-card-search-filter, .amti-card-search-input { height: 28px; padding: 2px 6px; font-size: 0.75rem; border-radius: 5px; line-height: 1.3; box-sizing: border-box; background: rgba(15,23,42,0.95); border: 1px solid rgba(148,163,184,0.18); color: var(--text-primary); outline: none; } .amti-card-search-filter { flex: 0 0 auto; width: auto; min-width: 0; cursor: pointer; } .amti-card-search-input { flex: 1 1 auto; min-width: 0; width: auto; } html[data-theme='light'] .amti-card-search-filter, html[data-theme='light'] .amti-card-search-input { background: #fff; border-color: rgba(148,163,184,0.35); color: #1e293b; } .amti-card-search-btn { flex: 0 0 auto; height: 28px; padding: 2px 8px; border-radius: 5px; box-sizing: border-box; line-height: 1.3; } .amti-card-search-results { margin-top: 8px; border-radius: 8px; overflow: hidden; max-height: 220px; overflow-y: auto; } .amti-card-search-results .srch-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border-color); font-size: 0.85rem; cursor: default; } .amti-card-search-results .srch-item:last-child { border-bottom: none; } .amti-card-search-results .srch-item:hover { background: rgba(56, 189, 248, 0.04); } .amti-card-search-results .srch-item .srch-info { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .amti-card-search-results .srch-item .srch-info strong { color: var(--text-primary); font-weight: 600; } .amti-card-search-results .srch-item .srch-info span { color: var(--text-muted); font-size: 0.8rem; margin-left: 8px; } .amti-card-search-results .srch-item .srch-actions { display: flex; gap: 4px; flex-shrink: 0; } .amti-card-search-results .srch-item .srch-actions .amti-btn { padding: 4px 8px; font-size: 0.78rem; min-height: 28px; } .amti-card-search-results .srch-empty { text-align: center; color: var(--text-muted); padding: 14px 10px; font-size: 0.85rem; } .amti-card-search-results .srch-error { text-align: center; color: var(--color-rose); padding: 14px 10px; font-size: 0.85rem; } .amti-card-search-results .srch-more { text-align: center; padding: 8px 10px; font-size: 0.82rem; border-top: 1px solid var(--border-color); } .amti-card-search-results .srch-more button { background: none; border: none; color: var(--color-cyan); cursor: pointer; font-size: 0.82rem; } .amti-card-search-results .srch-more button:hover { text-decoration: underline; } .amti-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: stretch; } .amti-settings-card { background: linear-gradient(180deg, rgba(18, 18, 20, 0.98), rgba(9, 9, 11, 0.98)), radial-gradient(circle at top, rgba(129, 140, 248, 0.05), transparent 30%); border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 16px; padding: 18px; box-shadow: 0 18px 34px rgba(2, 6, 23, 0.32), 0 0 0 1px rgba(56, 189, 248, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .amti-settings-card .amti-card-title { font-size: 1rem; } .amti-settings-card .amti-settings-help { margin-top: 2px; margin-bottom: 12px; } .amti-settings-card .amti-card-header { margin-bottom: 8px; } .amti-settings-card .amti-form-group { background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 12px; margin-bottom: 12px; } .amti-settings-card .amti-form-group:last-child { margin-bottom: 0; } .amti-form-group-full { grid-column: 1 / -1; } .amti-settings-chart-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); } .amti-settings-chart-surface { height: 220px; } .amti-settings-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .amti-settings-empty-state { text-align: center; padding: 18px; color: var(--text-secondary); } .amti-settings-chart-offset { margin-top: 16px; } .amti-settings-card-soft { margin-top: 0; display: flex; flex-direction: column; } .amti-settings-card-soft .amti-card-header { margin-bottom: 10px; } .amti-settings-card-soft .amti-settings-help { flex: 1 1 auto; } .amti-settings-card-soft .amti-settings-actions { margin-top: auto; } .amti-settings-footer-card { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: start; gap: 10px; padding: 10px 12px; border: 1px solid rgba(125, 211, 252, 0.16); background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(8, 15, 28, 0.96)), radial-gradient(circle at top, rgba(56, 189, 248, 0.06), transparent 25%); border-radius: 14px; box-shadow: 0 10px 20px rgba(2, 6, 23, 0.22); } .amti-settings-footer-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .amti-settings-footer-ltr.amti-row-priority-sem-pressa:hover, tr.amti-row-priority-alta:hover, tr.amti-row-priority-atraso:hover { filter: brightness(1.12); } .amti-settings-footer-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; } .amti-settings-footer-text { font-size: 0.92rem; color: var(--text-primary); line-height: 1.2; } .amti-settings-footer-copy .amti-settings-help { font-size: 0.82rem; line-height: 1.25; margin: 0; } .amti-settings-footer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: max-content; } .amti-settings-footer-actions .amti-btn { width: auto; justify-content: center; white-space: nowrap; min-height: 36px; padding: 8px 12px; font-size: 0.85rem; } .amti-settings-footer-actions #btnFooterLogout { width: 36px; min-width: 36px; height: 36px; padding: 0; flex: 0 0 36px; } @media (max-width: 768px) { .amti-settings-footer-card { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .amti-settings-footer-actions { width: 100%; justify-content: flex-start; gap: 8px; flex-wrap: wrap; } .amti-settings-footer-actions .amti-btn .amti-btn-text { display: none !important; } .amti-settings-footer-actions .amti-btn { min-width: 42px; width: auto; min-height: 34px; padding: 8px 12px; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; } .amti-settings-footer-actions #btnFooterLogout { min-width: 42px; width: auto; height: auto; padding: 8px 12px; flex: initial; } .amti-settings-footer-actions .amti-btn i { margin: 0 !important; } } .amti-toggle-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: var(--text-primary); font-size: 0.92rem; cursor: pointer; } .amti-toggle-pill input { width: 18px; height: 18px; accent-color: var(--color-cyan); cursor: pointer; } /* ============================================= AMTI SWITCH — Toggle unificado (estilo feedback) ============================================= */ .amti-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; vertical-align: middle; } .amti-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .amti-switch-track { position: relative; width: 48px; min-width: 48px; height: 26px; border-radius: 13px; background: var(--switch-off-track, rgba(148,163,184,0.2)); transition: background 0.3s ease; flex-shrink: 0; } .amti-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--switch-off-thumb, #94a3b8); transition: transform 0.3s ease, background 0.3s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .amti-switch input:checked + .amti-switch-track { background: var(--switch-on-track, rgba(52,211,153,0.3)); } .amti-switch input:checked + .amti-switch-track::after { transform: translateX(22px); background: var(--switch-on-thumb, #34d399); } .amti-switch-label { font-size: 0.85rem; font-weight: 500; color: var(--text-secondary, #94a3b8); line-height: 1.3; } .amti-switch-desc { font-size: 0.78rem; color: var(--text-muted, #64748b); margin-top: 2px; line-height: 1.4; } .amti-whatsapp-master-switch-wrap { display: inline-flex; align-items: center; gap: 12px; padding: 6px 14px; border-radius: 24px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; } .amti-whatsapp-disabled-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 14px 18px; margin-bottom: 20px; border-radius: 12px; background: rgba(148, 163, 184, 0.08); border: 1px solid rgba(148, 163, 184, 0.2); color: var(--text-secondary, #94a3b8); font-size: 0.88rem; transition: all 0.3s ease; } .amti-whatsapp-disabled-banner.is-active { background: rgba(16, 185, 129, 0.08); border-color: rgba(52, 211, 153, 0.3); color: var(--text-primary, #f1f5f9); } .amti-whatsapp-banner-content { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 260px; } .amti-whatsapp-banner-content i { font-size: 1.4rem; color: #94a3b8; flex-shrink: 0; transition: color 0.3s ease; } .amti-whatsapp-disabled-banner.is-active .amti-whatsapp-banner-content i { color: var(--color-emerald, #34d399); } .amti-whatsapp-banner-status-wrap { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .amti-whatsapp-banner-status { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 16px; border-left: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1); min-width: 140px; } .amti-whatsapp-test-row { display: flex; align-items: center; gap: 12px; width: 100%; } .amti-whatsapp-test-row select.amti-form-control { flex: 1; min-width: 0; } .amti-whatsapp-test-row #sendWhatsAppTestMessageBtn { white-space: nowrap; flex-shrink: 0; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } @media (max-width: 768px) { .amti-whatsapp-banner-status-wrap { width: 100%; justify-content: space-between; margin-top: 10px; } .amti-whatsapp-banner-status { border-left: none; padding-left: 0; } .amti-whatsapp-test-row { flex-direction: column; align-items: stretch; } .amti-whatsapp-test-row #sendWhatsAppTestMessageBtn { width: 100%; } } /* ---- Tema: Light ---- */ :root[data-theme='light'] { --switch-off-track: rgba(100,116,139,0.15); --switch-off-thumb: #94a3b8; --switch-on-track: rgba(16,185,129,0.25); --switch-on-thumb: #10b981; } /* ---- Tema: Block Steel ---- */ :root[data-theme='block-steel'] { --switch-off-track: rgba(143,163,181,0.15); --switch-off-thumb: #8fa3b5; --switch-on-track: rgba(143,163,181,0.3); --switch-on-thumb: #8fa3b5; } /* ---- Tema: Block Blue ---- */ :root[data-theme='block-blue'] { --switch-off-track: rgba(56,189,248,0.12); --switch-off-thumb: #64748b; --switch-on-track: rgba(56,189,248,0.25); --switch-on-thumb: #38bdf8; } /* ---- Tema: Block Light ---- */ :root[data-theme='block-light'] { --switch-off-track: rgba(100,116,139,0.15); --switch-off-thumb: #94a3b8; --switch-on-track: rgba(16,185,129,0.2); --switch-on-thumb: #10b981; } /* ---- Tema: Dark Block ---- */ :root[data-theme='dark-block'] { --switch-off-track: rgba(161,161,170,0.15); --switch-off-thumb: #a1a1aa; --switch-on-track: rgba(161,161,170,0.3); --switch-on-thumb: #d4d4d8; } /* Override inline background colors on block-light for feedback-style toggles */ html[data-theme='block-light'] .amti-switch-track { background: var(--switch-off-track); } html[data-theme='block-light'] .amti-switch input:checked + .amti-switch-track { background: var(--switch-on-track); } .amti-chip { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-md); padding: 6px 10px; background: rgba(6, 182, 212, 0.12); border: 1px solid rgba(6, 182, 212, 0.22); color: var(--color-cyan); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; } .amti-chip-group { display: flex; gap: 8px; flex-wrap: wrap; } /* Required Fields - modern layout */ .required-fields-toolbar .amti-input { padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.06); background: transparent; color: var(--text-1); } .amti-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 1100px) { .amti-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .amti-grid-3 { grid-template-columns: 1fr; } } .required-fields-stack { display: flex; flex-direction: column; gap: 16px; } .required-module-card { padding: 16px 18px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 6px 18px rgba(2,6,23,0.18); display: flex; flex-direction: column; width: 100%; } .required-module-card .module-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .required-module-card .amti-card-header.module-header { margin-bottom: 0; } .module-title-group { display: flex; align-items: center; gap: 12px; min-width: 0; } .module-icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(129, 140, 248, 0.16)); border: 1px solid rgba(125, 211, 252, 0.3); color: var(--color-cyan); font-size: 1.05rem; } .module-title-texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .module-title-texts .amti-card-title { font-weight: 700; font-size: 1rem; line-height: 1.3; gap: 0; } .module-subtitle { font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; } .module-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .module-badge { font-size:0.75rem; border:none; white-space:nowrap; } .module-select-all { display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--text-primary); } .module-select-all input { width:15px; height:15px; margin:0; } .required-module-body { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.06); } .field-pill { padding:8px 12px; border-radius: var(--radius-md); background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05); font-size:0.9rem; display:inline-flex; align-items:center; gap:8px; cursor:pointer; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; } .field-pill:hover { background: rgba(255,255,255,0.07); } .field-pill input { width:16px; height:16px; margin: 0; } .field-pill.active { background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(129, 140, 248, 0.14)); border-color: rgba(125, 211, 252, 0.4); box-shadow: 0 4px 12px rgba(56, 189, 248, 0.08); } .required-module-card.collapsed .required-module-body { display:none; } .required-module-card.collapsed .module-footer { display:none; } .required-module-card .amti-card-header .amti-card-title { font-weight:700; } .amti-chip-active { background: linear-gradient(135deg, rgba(56, 189, 248, 0.24), rgba(129, 140, 248, 0.22)); border-color: rgba(125, 211, 252, 0.45); color: var(--text-primary); box-shadow: 0 8px 18px rgba(56, 189, 248, 0.12); } .amti-finance-balcao-card { margin-top: 0; display: flex; flex-direction: column; } #tab-finance .amti-card, .amti-finance-balcao-card { transition: none !important; } #tab-finance .amti-card:hover, .amti-finance-balcao-card:hover, html[data-theme='light'] #tab-finance .amti-card:hover, html[data-theme='dark-block'] #tab-finance .amti-card:hover { transform: none !important; box-shadow: none !important; border-color: var(--border, rgba(148, 163, 184, 0.12)) !important; background: var(--bg-card, #131b26) !important; } .amti-finance-balcao-card .amti-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; user-select: none; transition: opacity 0.15s ease; } .amti-finance-balcao-card .amti-card-header:hover { opacity: 0.88; background: transparent !important; } .amti-finance-card-body { display: flex; flex-direction: column; gap: 10px; } .amti-finance-card-body.collapsed { display: none !important; } .amti-finance-chart-controls { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } /* ─── Seletores de Data dos Gráficos (Mês e Ano) ─── */ .amti-chart-select-group { display: inline-flex; align-items: center; gap: 8px; } .amti-chart-select { height: 34px; background: #0f172a; color: #f8fafc; border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 6px; padding: 4px 8px; font-size: 0.875rem; font-family: inherit; font-weight: 500; outline: none; cursor: pointer; box-sizing: border-box; transition: all 0.2s ease; } .amti-chart-select:hover { border-color: rgba(56, 189, 248, 0.5); } .amti-chart-select:focus { border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); } /* Campo do Mês - Largura suficiente para exibir o nome completo do mês (ex.: Dezembro, Setembro) */ .amti-chart-select-month, select[id*="SelectMonth"] { min-width: 135px !important; width: auto !important; padding-left: 8px !important; padding-right: 22px !important; text-overflow: clip !important; } /* Campo do Ano - Diminuído com precisão para 4 dígitos */ .amti-chart-select-year, select[id*="SelectYear"] { min-width: 76px !important; max-width: 82px !important; width: 78px !important; text-align: center !important; padding-left: 4px !important; padding-right: 4px !important; } .amti-finance-chart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .amti-finance-chart-summary { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--text-secondary); } .amti-finance-chart-summary strong { font-size: 1.1rem; color: var(--text-primary); } .amti-finance-chart-frame { min-height: 320px; padding: 10px; border-radius: 16px; border: 1px solid rgba(148, 163, 184, 0.14); background: linear-gradient(180deg, rgba(8, 15, 28, 0.92), rgba(15, 23, 42, 0.96)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); /* Isola cada canvas de gráfico: reflows do container pai (sidebar animando) não disparam ResizeObserver no Chart.js a cada frame — só ao final */ contain: layout style paint; } .amti-finance-chart-footnote { color: var(--text-secondary); font-size: 0.9rem; font-size: 1.5rem; color: var(--text-primary); } .amti-home-subtitle { color: var(--text-secondary); line-height: 1.5; } /* Context menu for sidebar items */ .amti-context-menu { position: fixed; background: linear-gradient(180deg, rgba(10, 14, 21, 0.98), rgba(6, 10, 16, 0.98)); background-color: rgba(10, 14, 21, 0.98); border: 1px solid rgba(148, 163, 184, 0.14); box-shadow: 0 18px 36px rgba(2,6,23,0.55), 0 0 0 1px rgba(56, 189, 248, 0.04), inset 0 1px 0 rgba(255,255,255,0.04); border-radius: 8px; padding: 6px 6px; min-width: 200px; z-index: 2000; display: none; } .amti-context-menu .amti-context-item { padding: 8px 10px; color: var(--text-primary); cursor: pointer; border-radius: 6px; } .amti-context-menu .amti-context-item:hover { background: rgba(255,255,255,0.05); } .amti-context-menu .amti-context-item i { margin-right: 8px; width: 14px; text-align: center; } /* Context submenu (priority) */ .amti-context-item-submenu-wrap { position: relative; } .amti-context-item-submenu-wrap > .amti-context-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .amti-context-item-submenu-wrap > .amti-context-item .submenu-arrow { font-size: 10px; opacity: 0.5; margin-left: auto; transition: transform 0.15s, opacity 0.15s, color 0.15s; } .amti-context-item-submenu-wrap:hover > .amti-context-item .submenu-arrow, .amti-context-item-submenu-wrap.amti-submenu-active > .amti-context-item .submenu-arrow { opacity: 0.95; transform: translateX(3px); color: #38bdf8; } .amti-context-item-submenu-wrap.amti-submenu-active > .amti-context-item { background: rgba(255, 255, 255, 0.08); } html[data-theme='light'] .amti-context-item-submenu-wrap.amti-submenu-active > .amti-context-item { background: rgba(0, 0, 0, 0.05); } @keyframes amti-submenu-pop { 0% { opacity: 0; transform: scale(0.96) translateX(-3px); } 100% { opacity: 1; transform: scale(1) translateX(0); } } @keyframes amti-submenu-pop-left { 0% { opacity: 0; transform: scale(0.96) translateX(3px); } 100% { opacity: 1; transform: scale(1) translateX(0); } } .amti-context-submenu { position: fixed; background: linear-gradient(180deg, rgba(10, 14, 21, 0.98), rgba(6, 10, 16, 0.98)); background-color: rgba(10, 14, 21, 0.98); border: 1px solid rgba(148, 163, 184, 0.14); box-shadow: 0 18px 36px rgba(2,6,23,0.55), 0 0 0 1px rgba(56, 189, 248, 0.04), inset 0 1px 0 rgba(255,255,255,0.04); border-radius: 8px; padding: 6px 6px; min-width: 230px; z-index: 2001; display: none; animation: amti-submenu-pop 0.12s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: left top; } .amti-context-submenu.open-left { animation-name: amti-submenu-pop-left; transform-origin: right top; } /* Invisible safe hover bridge between parent menu and submenu */ .amti-context-submenu::before { content: ''; position: absolute; top: -12px; bottom: -12px; left: -20px; width: 26px; background: transparent; pointer-events: auto; z-index: -1; } .amti-context-submenu.open-left::before { left: auto; right: -20px; } .amti-context-submenu .amti-context-item { padding: 8px 10px; color: var(--text-primary); cursor: pointer; border-radius: 6px; font-size: 13px; display: flex; align-items: center; gap: 8px; } .amti-context-submenu .amti-context-item:hover { background: rgba(255,255,255,0.05); } .amti-context-submenu .amti-context-item .priority-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .amti-context-submenu .amti-context-item .priority-check { margin-left: auto; font-size: 11px; opacity: 0; transition: opacity 0.15s; } .amti-context-submenu .amti-context-item.active-priority .priority-check { opacity: 1; color: #38bdf8; } /* Priority row styles — glass gradient effect */ tr.amti-row-priority-normal { /* default — no override */ } tr.amti-row-priority-sem-pressa { background: linear-gradient(90deg, rgba(148, 163, 184, 0.06) 0%, rgba(148, 163, 184, 0.03) 50%, transparent 100%); } tr.amti-row-priority-sem-pressa td { color: rgba(148, 163, 184, 0.7); } tr.amti-row-priority-alta { background: linear-gradient(90deg, rgba(255, 192, 203, 0.18) 0%, rgba(255, 192, 203, 0.10) 40%, rgba(255, 192, 203, 0.04) 80%, transparent 100%); border-left: 3px solid rgba(255, 192, 203, 0.6); } tr.amti-row-priority-alta td:first-child { padding-left: calc(12px - 3px); } tr.amti-row-priority-alta td { background: linear-gradient(180deg, rgba(255, 192, 203, 0.08) 0%, rgba(255, 192, 203, 0.02) 100%); } tr.amti-row-priority-garantia { background: linear-gradient(90deg, rgba(250, 204, 21, 0.22) 0%, rgba(250, 204, 21, 0.12) 40%, rgba(250, 204, 21, 0.05) 80%, transparent 100%); border-left: 3px solid rgba(250, 204, 21, 0.8); } tr.amti-row-priority-garantia td:first-child { padding-left: calc(12px - 3px); } tr.amti-row-priority-garantia td { background: linear-gradient(180deg, rgba(250, 204, 21, 0.10) 0%, rgba(250, 204, 21, 0.03) 100%); } tr.amti-row-priority-atraso { background: linear-gradient(90deg, rgba(255, 0, 0, 0.20) 0%, rgba(255, 0, 0, 0.10) 40%, rgba(255, 0, 0, 0.04) 80%, transparent 100%); border-left: 3px solid rgba(255, 60, 60, 0.7); box-shadow: inset 0 0 22px rgba(255, 0, 0, 0.08); animation: priority-pulse-atraso 2.5s ease-in-out infinite; } tr.amti-row-priority-atraso td:first-child { padding-left: calc(12px - 3px); } tr.amti-row-priority-atraso td { background: linear-gradient(180deg, rgba(255, 0, 0, 0.10) 0%, rgba(255, 0, 0, 0.02) 100%); } @keyframes priority-pulse-atraso { 0%, 100% { opacity: 0.88; border-left-color: rgba(255, 60, 60, 0.60); } 50% { opacity: 1; border-left-color: rgba(255, 60, 60, 0.95); } } tr.amti-row-priority-alta td, tr.amti-row-priority-atraso td { transition: background 0.3s ease; } tr.amti-row-priority-alta td, tr.amti-row-priority-atraso td { transition: none !important; } tr.amti-row-priority-sem-pressa:hover, tr.amti-row-priority-alta:hover, tr.amti-row-priority-garantia:hover, tr.amti-row-priority-atraso:hover { filter: brightness(1.12); } /* Priority badge inside row */ .amti-priority-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; } .amti-priority-badge.priority-sem-pressa { background: rgba(148, 163, 184, 0.12); color: rgba(148, 163, 184, 0.6); } .amti-priority-badge.priority-alta { background: rgba(255, 192, 203, 0.20); color: #ffb3c6; } .amti-priority-badge.priority-atraso { background: rgba(255, 0, 0, 0.18); color: #ff6b6b; } /* Light theme overrides */ html[data-theme='light'] tr.amti-row-priority-sem-pressa { background: linear-gradient(90deg, rgba(148, 163, 184, 0.08) 0%, rgba(148, 163, 184, 0.04) 50%, transparent 100%); } html[data-theme='light'] tr.amti-row-priority-sem-pressa td { color: rgba(100, 116, 139, 0.7); } html[data-theme='light'] tr.amti-row-priority-alta { background: linear-gradient(90deg, rgba(255, 192, 203, 0.15) 0%, rgba(255, 192, 203, 0.08) 40%, rgba(255, 192, 203, 0.03) 80%, transparent 100%); border-left: 3px solid rgba(220, 140, 160, 0.6); } html[data-theme='light'] tr.amti-row-priority-alta td { background: linear-gradient(180deg, rgba(255, 192, 203, 0.06) 0%, rgba(255, 192, 203, 0.01) 100%); } html[data-theme='light'] tr.amti-row-priority-garantia { background: linear-gradient(90deg, rgba(250, 204, 21, 0.20) 0%, rgba(250, 204, 21, 0.10) 40%, rgba(250, 204, 21, 0.04) 80%, transparent 100%); border-left-color: rgba(202, 138, 4, 0.75); } html[data-theme='light'] tr.amti-row-priority-garantia td { background: linear-gradient(180deg, rgba(250, 204, 21, 0.08) 0%, rgba(250, 204, 21, 0.02) 100%); } html[data-theme='light'] tr.amti-row-priority-atraso { background: linear-gradient(90deg, rgba(255, 0, 0, 0.14) 0%, rgba(255, 0, 0, 0.07) 40%, rgba(255, 0, 0, 0.02) 80%, transparent 100%); border-left: 3px solid rgba(220, 40, 40, 0.6); } html[data-theme='light'] tr.amti-row-priority-atraso td { background: linear-gradient(180deg, rgba(255, 0, 0, 0.08) 0%, rgba(255, 0, 0, 0.01) 100%); } /* Light theme submenu */ html[data-theme='light'] .amti-context-submenu { background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.97)); background-color: rgba(255, 255, 255, 0.97); border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: 0 18px 36px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6); } html[data-theme='light'] .amti-context-submenu .amti-context-item:hover { background: rgba(0,0,0,0.04); } .amti-context-separator { height: 1px; background: rgba(148, 163, 184, 0.1); margin: 4px 0; } .amti-text-danger { color: #f87171 !important; } .amti-text-danger:hover { background: rgba(248, 113, 113, 0.1) !important; } /* === Modern Card Context Menu === */ .modern-card-context { min-width: 220px; } .modern-card-context i { width: 20px; opacity: 0.7; } .amti-context-label { font-size: 0.75rem; text-transform: uppercase; color: rgba(148, 163, 184, 0.6); padding: 8px 10px 4px; letter-spacing: 0.5px; font-weight: 600; } .amti-context-thumbnails { display: flex; gap: 6px; padding: 0 10px 6px; } .thumbnail-btn { flex: 1; background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .thumbnail-btn:hover { background: rgba(56, 189, 248, 0.1); border-color: rgba(56, 189, 248, 0.4); } .thumb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; width: 100%; height: 12px; } .thumb-grid.h-grid { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); height: 24px; width: 12px; } .thumb-box { background: rgba(148, 163, 184, 0.2); border-radius: 1px; } .thumb-box.filled { background: rgba(56, 189, 248, 0.8); } .thumb-box.span-2 { grid-column: span 2; } .thumb-box.span-3 { grid-column: span 3; } .thumb-box.span-4 { grid-column: span 4; } .thumb-box.h-span-2 { grid-row: span 2; } .thumb-box.h-span-3 { grid-row: span 3; } .amti-card-library-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px; border-radius: 8px; border: 1px solid transparent; background: rgba(15, 23, 42, 0.55); } .amti-card-library-item:hover { border-color: rgba(56, 189, 248, 0.18); background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(129, 140, 248, 0.08)); } /* Agenda card header polish */ .amti-grid-card.agenda-card .agenda-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; } .amti-grid-card.agenda-card .agenda-card-title { font-size: 0.95rem; font-weight: 700; line-height: 1.2; } .amti-grid-card.agenda-card .agenda-card-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; } /* Shortcut card style */ .amti-grid-card.shortcut-card { display:flex; flex-direction:column; gap:8px; align-items:flex-start; justify-content:center; background: var(--amti-card-custom-bg, var(--card-surface, linear-gradient(145deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 15, 28, 0.98) 45%, rgba(7, 11, 18, 0.98) 100%))); border: 1px solid rgba(255, 255, 255, 0.08); padding: 16px; border-radius: 16px; box-shadow: none !important; } .amti-grid-card.shortcut-card:hover { border-color: rgba(255, 255, 255, 0.18); background: var(--amti-card-custom-bg, var(--card-surface-hover, linear-gradient(145deg, rgba(17, 24, 39, 0.99) 0%, rgba(12, 18, 30, 0.98) 45%, rgba(10, 14, 21, 0.98) 100%))); box-shadow: none !important; } .amti-grid-card.shortcut-card .shortcut-body { display:flex; gap:12px; align-items:center; width:100%; } .amti-grid-card.shortcut-card .shortcut-icon { width:48px; height:48px; border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.03); font-size:1.2rem } .amti-grid-card.shortcut-card .shortcut-meta { flex:1; display:flex; flex-direction:column; } .amti-grid-card.shortcut-card .shortcut-title { font-weight:700; font-size:1rem; color:var(--text-primary); } .amti-grid-card.shortcut-card .shortcut-actions { margin-top:8px; display:flex; gap:8px } .amti-grid-card.shortcut-card .shortcut-actions .amti-btn { padding:6px 10px; border-radius:8px } .amti-grid-card.ai-tips-live-card .amti-card-header { border-bottom: none; padding-bottom: 10px; } .amti-grid-card.ai-tips-live-card .amti-card-body { padding-top: 10px; } .amti-grid-card.ai-tips-live-card .amti-ai-tip-label { color: var(--text-primary); font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 20px !important; } .amti-grid-card.ai-tips-live-card .amti-ai-tip-copy { color: var(--text-primary); font-size: 0.92rem; line-height: 1.45; } .amti-home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .amti-home-card { display: flex; flex-direction: column; gap: 10px; min-height: 200px; } .amti-home-card-wide { grid-column: 1 / -1; } .amti-home-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .amti-home-card-icon.cyan { background: rgba(6, 182, 212, 0.12); color: var(--color-cyan); } .amti-home-card-icon.emerald { background: rgba(16, 185, 129, 0.12); color: var(--color-emerald); } .amti-home-card-icon.amber { background: rgba(245, 158, 11, 0.12); color: var(--color-amber); } .amti-home-card h4 { margin: 0; font-size: 1rem; color: var(--text-primary); } .amti-home-card p, .amti-home-note { color: var(--text-secondary); line-height: 1.45; font-size: 0.95rem; } .amti-home-actions { display: flex; flex-wrap: wrap; gap: 10px; } .amti-home-action-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); color: var(--text-primary); padding: 6px 12px; min-height: 42px; cursor: pointer; text-align: left; transition: transform 0.15s ease, border-color 0.15s ease; } .amti-home-action-btn:hover { transform: translateY(-1px); border-color: rgba(6, 182, 212, 0.35); } .amti-home-action-icon { color: var(--color-cyan); } .amti-home-action-label { font-size: 0.92rem; } .amti-home-insight-list { display: flex; flex-wrap: wrap; gap: 8px; } .amti-home-insight-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-secondary); font-size: 0.9rem; } .amti-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; } .amti-soft-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); } .amti-ai-panel { display: flex; flex-direction: column; gap: 12px; } .amti-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .amti-monitor-fab { border-radius: 50% !important; border: 1px solid rgba(6, 182, 212, 0.35); background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(99, 102, 241, 0.18)); color: #fff; box-shadow: 0 18px 30px rgba(6, 182, 212, 0.2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; } .amti-monitor-fab:hover { transform: translateY(-2px); border-color: rgba(6, 182, 212, 0.6); } /* Dashboard Summary Cards */ .amti-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--rf-card-gap, 12px); column-gap: var(--rf-card-gap, 12px); row-gap: var(--rf-card-row-gap, 12px); margin-bottom: var(--rf-card-row-gap, 12px); } .amti-stat-card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 16px; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.2s; cursor: pointer; position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; } .amti-stat-card:hover { transform: translateY(-2px); border-color: rgba(56, 189, 248, 0.3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .amti-stat-card:active { transform: translateY(0) scale(0.985); } /* Blur transitions only the financial values, keeping labels and icons readable. */ .amti-stat-card .amti-stat-value { transition: filter 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1); } /* Modern Frosted Blur Mode - Efeito de ocultação com blur ao clicar */ .amti-stat-card .amti-stat-value { transition: filter 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; will-change: filter, opacity; } .amti-summary-grid.amti-cards-blurred .amti-stat-card .amti-stat-value, .amti-summary-grid.amti-cards-blurred .amti-stat-value, .amti-stat-card.amti-card-blurred .amti-stat-value, .amti-stat-card.is-blurred .amti-stat-value, #tab-finance.amti-values-blurred .amti-stat-value, #tab-finance .amti-stat-card.amti-card-blurred .amti-stat-value, #tab-finance .amti-stat-card.is-blurred .amti-stat-value, #tab-finance .amti-stat-card.amti-cards-blurred .amti-stat-value, #tab-finance .amti-stat-value.amti-blurred { filter: blur(8px) !important; opacity: 0.45 !important; user-select: none !important; pointer-events: none !important; } .amti-stat-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .amti-stat-icon.cyan { background-color: rgba(6, 182, 212, 0.1); color: var(--color-cyan); } .amti-stat-icon.emerald { background-color: rgba(16, 182, 129, 0.1); color: var(--color-emerald); } .amti-stat-icon.rose { background-color: rgba(244, 63, 94, 0.1); color: var(--color-rose); } .amti-stat-icon.amber { background-color: rgba(245, 158, 11, 0.1); color: var(--color-amber); } .amti-stat-info { display: flex; flex-direction: column; } .amti-stat-label { font-size: 0.8rem; color: var(--text-secondary); } .amti-stat-value { font-size: 1.4rem; font-weight: 700; margin-top: 2px; } /* Form inputs & controls */ .amti-btn { padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid rgba(148, 163, 184, 0.18); font-size: 0.9rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease; background: var(--button-surface, linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(8, 15, 28, 0.98))); color: var(--text-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 14px rgba(2, 6, 23, 0.25); } .amti-btn:hover { transform: translateY(-1px); border-color: rgba(56, 189, 248, 0.35); background: var(--button-surface-hover, linear-gradient(180deg, rgba(17, 24, 39, 1), rgba(15, 23, 42, 0.98))); box-shadow: 0 10px 18px rgba(2, 6, 23, 0.35), 0 0 18px rgba(56, 189, 248, 0.06); } .amti-btn-emerald { border-color: rgba(52, 211, 153, 0.35); color: #ecfdf5; background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(5, 150, 105, 0.16)); } /* Compact remove button for OS item rows */ .amti-btn.amti-os-remove-btn { padding: 4px 6px; width: 34px; min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; font-size: 0.85rem; background: rgba(239, 68, 68, 0.05); border: 1px solid rgba(239, 68, 68, 0.15); color: #f87171; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .amti-btn.amti-os-remove-btn:hover { background: rgba(239, 68, 68, 0.18) !important; border-color: rgba(239, 68, 68, 0.35) !important; color: #ef4444 !important; transform: scale(1.1); box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2); } .amti-btn.amti-os-remove-btn:active { transform: scale(0.95); } /* Tamanhos compactos para os inputs da linha de Serviços/Peças */ .amti-os-item-row .os-service-qtd { width: 78px; /* aumentei para comportar mais um dígito visível */ min-width: 60px; padding: 6px 8px; } .amti-os-item-row .os-service-valor { width: 160px; /* aumentei para comportar ~3 dígitos a mais */ min-width: 96px; padding: 6px 8px; } /* Descrição ocupa o espaço restante */ .amti-os-item-row .os-service-descricao { flex: 1 1 auto; min-width: 140px; } @media (max-width: 680px) { .amti-os-item-row .os-service-qtd { width:64px; } .amti-os-item-row .os-service-valor { width:120px; } } .amti-btn-cyan { border-color: rgba(34, 211, 238, 0.35); color: #ecfeff; background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(59, 130, 246, 0.12)); } .amti-topbar-btn-ai i, .amti-topbar .amti-topbar-btn-ai i, .amti-btn-cyan.amti-topbar-btn-ai i, .amti-topbar-btn-ai:hover i, .amti-topbar .amti-topbar-btn-ai:hover i { color: #ffffff !important; } .amti-loading-state, .amti-empty-state { text-align: center; padding: 20px; } /* ═══════════════════════════════════════════════════════════════════════ SALVAR OS - UNSAVED MODIFICATIONS Animação interna de cores moderna e destaque para o botão Salvar OS no popup "Editar Ordem de Serviço" quando há alterações pendentes. Suporta todos os temas (block-steel, dark, light, block-blue, block-light, dark-block) e no perfil ultra, preservando a preferência de movimento reduzido do sistema. ═══════════════════════════════════════════════════════════════════════ */ /* Keyframes: Animação de fluxo contínuo das cores do gradiente interno */ @keyframes amtiOsSaveColorFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Keyframes: Varredura interna moderna de luz translúcida (shimmer) */ @keyframes amtiOsSaveInnerShimmer { 0% { transform: translateX(-160%) skewX(-20deg); opacity: 0; } 15% { opacity: 0.75; } 45% { transform: translateX(160%) skewX(-20deg); opacity: 0; } 100% { transform: translateX(160%) skewX(-20deg); opacity: 0; } } /* Keyframes: Pulso de destaque perimetral e brilho nas bordas */ @keyframes amtiOsSaveGlowPulse { 0%, 100% { box-shadow: 0 0 6px var(--os-dirty-glow, rgba(56, 189, 248, 0.5)), inset 0 1px 0 rgba(255, 255, 255, 0.35); border-color: var(--os-dirty-border, #38bdf8); } 50% { box-shadow: 0 0 16px var(--os-dirty-glow, rgba(56, 189, 248, 0.5)), inset 0 1px 0 rgba(255, 255, 255, 0.65); border-color: var(--os-dirty-border-top, #7dd3fc); } } /* Keyframes: Pulsação leve e econômica de GPU para o perfil ultra */ @keyframes amtiOsSaveLightPulse { 0% { opacity: 0.82; } 100% { opacity: 1; } } /* Paletas e variáveis para cada tema existente */ :root { --os-dirty-bg: linear-gradient(125deg, #1e3a5f 0%, #0284c7 28%, #38bdf8 50%, #2563eb 72%, #1e3a5f 100%); --os-dirty-border: #38bdf8; --os-dirty-border-top: #7dd3fc; --os-dirty-glow: rgba(56, 189, 248, 0.6); --os-dirty-text: #ffffff; } :root[data-theme='block-steel'], html[data-theme='block-steel'] { --os-dirty-bg: linear-gradient(125deg, #1e3a5f 0%, #0284c7 28%, #38bdf8 50%, #2563eb 72%, #1e3a5f 100%); --os-dirty-border: #38bdf8; --os-dirty-border-top: #7dd3fc; --os-dirty-glow: rgba(56, 189, 248, 0.6); --os-dirty-text: #ffffff; } :root[data-theme='dark'], html[data-theme='dark'] { --os-dirty-bg: linear-gradient(125deg, #312e81 0%, #0284c7 25%, #06b6d4 50%, #4f46e5 75%, #312e81 100%); --os-dirty-border: #818cf8; --os-dirty-border-top: #a5b4fc; --os-dirty-glow: rgba(99, 102, 241, 0.65); --os-dirty-text: #ffffff; } :root[data-theme='light'], html[data-theme='light'] { --os-dirty-bg: linear-gradient(125deg, #1d4ed8 0%, #0284c7 28%, #2563eb 55%, #0369a1 80%, #1d4ed8 100%); --os-dirty-border: #1e40af; --os-dirty-border-top: #60a5fa; --os-dirty-glow: rgba(37, 99, 235, 0.45); --os-dirty-text: #ffffff; } :root[data-theme='block-blue'], html[data-theme='block-blue'] { --os-dirty-bg: linear-gradient(125deg, #0369a1 0%, #0284c7 25%, #38bdf8 50%, #1d4ed8 75%, #0369a1 100%); --os-dirty-border: #60a5fa; --os-dirty-border-top: #93c5fd; --os-dirty-glow: rgba(56, 189, 248, 0.65); --os-dirty-text: #ffffff; } :root[data-theme='block-light'], html[data-theme='block-light'] { --os-dirty-bg: linear-gradient(125deg, #1e40af 0%, #0284c7 28%, #2563eb 55%, #0284c7 80%, #1e40af 100%); --os-dirty-border: #1d4ed8; --os-dirty-border-top: #60a5fa; --os-dirty-glow: rgba(30, 64, 175, 0.45); --os-dirty-text: #ffffff; } :root[data-theme='dark-block'], html[data-theme='dark-block'] { --os-dirty-bg: linear-gradient(125deg, #09090b 0%, #0891b2 26%, #38bdf8 50%, #2563eb 74%, #09090b 100%); --os-dirty-border: #38bdf8; --os-dirty-border-top: #a5f3fc; --os-dirty-glow: rgba(56, 189, 248, 0.75); --os-dirty-text: #ffffff; } /* 1. Modo Normal: Animação interna rica e completa */ .amti-btn-primary--dirty, #osBtnSave.amti-btn-primary--dirty, .amti-os-save-group .amti-btn-primary--dirty, .amti-os-footer-actions .amti-btn-primary--dirty, button.amti-btn-primary--dirty { position: relative !important; overflow: hidden !important; isolation: isolate !important; font-weight: 700 !important; color: var(--os-dirty-text, #ffffff) !important; border: 1px solid var(--os-dirty-border, #38bdf8) !important; border-top: 1px solid var(--os-dirty-border-top, #7dd3fc) !important; border-radius: var(--radius-md, 8px) !important; background: transparent !important; animation: amtiOsSaveGlowPulse 2.4s ease-in-out infinite !important; cursor: pointer !important; transition: transform 0.15s ease, box-shadow 0.2s ease !important; } /* Garante texto e ícone nítidos sobre as camadas internas animadas */ .amti-btn-primary--dirty > *, #osBtnSave.amti-btn-primary--dirty > * { position: relative !important; z-index: 3 !important; color: var(--os-dirty-text, #ffffff) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; pointer-events: none !important; } /* Camada interna animada 1: Gradiente de cores em fluxo */ .amti-btn-primary--dirty::before, #osBtnSave.amti-btn-primary--dirty::before { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; border-radius: inherit !important; background: var(--os-dirty-bg) !important; background-size: 260% 260% !important; animation: amtiOsSaveColorFlow 3.5s ease infinite alternate !important; pointer-events: none !important; } /* Camada interna animada 2: Varredura de luz (shimmer) dinâmico */ .amti-btn-primary--dirty::after, #osBtnSave.amti-btn-primary--dirty::after { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; border-radius: inherit !important; background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.42) 50%, transparent 80%) !important; animation: amtiOsSaveInnerShimmer 3s ease-in-out infinite !important; pointer-events: none !important; } .amti-btn-primary--dirty:hover, #osBtnSave.amti-btn-primary--dirty:hover { filter: brightness(1.1) !important; } /* 2. Perfil visual reduzido: animação simplificada e otimizada para GPU */ body.amti-performance-mode .amti-btn-primary--dirty, html.amti-performance-mode .amti-btn-primary--dirty, body.amti-performance-mode #osBtnSave.amti-btn-primary--dirty, html.amti-performance-mode #osBtnSave.amti-btn-primary--dirty { animation: none !important; box-shadow: 0 0 10px var(--os-dirty-glow) !important; border: 1px solid var(--os-dirty-border) !important; } body.amti-performance-mode .amti-btn-primary--dirty::before, html.amti-performance-mode .amti-btn-primary--dirty::before, body.amti-performance-mode #osBtnSave.amti-btn-primary--dirty::before, html.amti-performance-mode #osBtnSave.amti-btn-primary--dirty::before { background-size: 100% 100% !important; animation: amtiOsSaveLightPulse 2.2s ease-in-out infinite alternate !important; } body.amti-performance-mode .amti-btn-primary--dirty::after, html.amti-performance-mode .amti-btn-primary--dirty::after, body.amti-performance-mode #osBtnSave.amti-btn-primary--dirty::after, html.amti-performance-mode #osBtnSave.amti-btn-primary--dirty::after { display: none !important; animation: none !important; } /* 3. Modo Ultra Desempenho / Redução de Movimento: Destaque estático moderno sem nenhuma animação */ body.amti-ultra-performance-mode .amti-btn-primary--dirty, html.amti-ultra-performance-mode .amti-btn-primary--dirty, body.amti-hide-animations .amti-btn-primary--dirty, html.amti-hide-animations .amti-btn-primary--dirty, body.amti-reduced-motion .amti-btn-primary--dirty, html.amti-reduced-motion .amti-btn-primary--dirty, body.amti-ultra-performance-mode #osBtnSave.amti-btn-primary--dirty, html.amti-ultra-performance-mode #osBtnSave.amti-btn-primary--dirty, body.amti-hide-animations #osBtnSave.amti-btn-primary--dirty, html.amti-hide-animations #osBtnSave.amti-btn-primary--dirty, body.amti-reduced-motion #osBtnSave.amti-btn-primary--dirty, html.amti-reduced-motion #osBtnSave.amti-btn-primary--dirty { animation: none !important; box-shadow: 0 0 0 2px var(--os-dirty-border) !important; border: 1px solid var(--os-dirty-border-top) !important; outline: none !important; font-weight: 700 !important; transition: none !important; } body.amti-ultra-performance-mode .amti-btn-primary--dirty::before, html.amti-ultra-performance-mode .amti-btn-primary--dirty::before, body.amti-hide-animations .amti-btn-primary--dirty::before, html.amti-hide-animations .amti-btn-primary--dirty::before, body.amti-reduced-motion .amti-btn-primary--dirty::before, html.amti-reduced-motion .amti-btn-primary--dirty::before, body.amti-ultra-performance-mode #osBtnSave.amti-btn-primary--dirty::before, html.amti-ultra-performance-mode #osBtnSave.amti-btn-primary--dirty::before, body.amti-hide-animations #osBtnSave.amti-btn-primary--dirty::before, html.amti-hide-animations #osBtnSave.amti-btn-primary--dirty::before, body.amti-reduced-motion #osBtnSave.amti-btn-primary--dirty::before, html.amti-reduced-motion #osBtnSave.amti-btn-primary--dirty::before { animation: none !important; background-size: 100% 100% !important; opacity: 1 !important; } body.amti-ultra-performance-mode .amti-btn-primary--dirty::after, html.amti-ultra-performance-mode .amti-btn-primary--dirty::after, body.amti-hide-animations .amti-btn-primary--dirty::after, html.amti-hide-animations .amti-btn-primary--dirty::after, body.amti-reduced-motion .amti-btn-primary--dirty::after, html.amti-reduced-motion .amti-btn-primary--dirty::after, body.amti-ultra-performance-mode #osBtnSave.amti-btn-primary--dirty::after, html.amti-ultra-performance-mode #osBtnSave.amti-btn-primary--dirty::after, body.amti-hide-animations #osBtnSave.amti-btn-primary--dirty::after, html.amti-hide-animations #osBtnSave.amti-btn-primary--dirty::after, body.amti-reduced-motion #osBtnSave.amti-btn-primary--dirty::after, html.amti-reduced-motion #osBtnSave.amti-btn-primary--dirty::after { display: none !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { .amti-btn-primary--dirty, .amti-btn-primary--dirty::before, .amti-btn-primary--dirty::after, #osBtnSave.amti-btn-primary--dirty, #osBtnSave.amti-btn-primary--dirty::before, #osBtnSave.amti-btn-primary--dirty::after { animation: none !important; } .amti-btn-primary--dirty::after, #osBtnSave.amti-btn-primary--dirty::after { display: none !important; } } /* OS modal footer button groups */ .amti-os-footer-actions { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:16px; flex-wrap:wrap; } .amti-os-print-group, .amti-os-action-group, .amti-os-save-group { display:flex; gap:10px; align-items:center; } .amti-os-print-group { flex: 1 1 auto; } .amti-os-action-group { flex: 0 0 auto; } .amti-os-save-group { flex: 0 0 auto; } .amti-btn-sm { padding: 6px 12px; font-size: 0.88rem; min-height: 36px; border-radius: var(--radius-md); } .amti-btn-lg { padding: 8px 18px; font-size: 0.95rem; min-height: 40px; border-radius: var(--radius-md); } .amti-os-print-group .amti-btn { background: var(--button-surface); border-color: rgba(148,163,184,0.12); display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; border-radius: 0px !important; } .amti-os-print-group .amti-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .amti-os-print-group .amti-btn i { flex-shrink: 0; } .amti-os-action-group .amti-btn-success { box-shadow: 0 8px 20px rgba(34,197,94,0.08); } .amti-os-save-group .amti-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; border-radius: 0px !important; height: 40px; min-height: 40px; box-sizing: border-box; } .amti-os-save-group .amti-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .amti-os-save-group .amti-btn i { flex-shrink: 0; } @media (max-width: 720px) { .amti-grid-3 { grid-template-columns: 1fr; } /* Nota: .amti-os-footer-actions no mobile é controlado exclusivamente por responsive-fixes.css. Não definir flex-direction aqui para evitar conflito de especificidade. */ .amti-os-print-group, .amti-os-action-group, .amti-os-save-group { justify-content: flex-start; } } .amti-ai-tip-card { margin-top: 24px; padding: 16px; } .amti-ai-tip-label { font-weight: 600; font-size: 0.85rem; margin-bottom: 24px !important; border-bottom: none !important; } .amti-ai-tip-copy { font-size: 0.8rem; line-height: 1.4; color: var(--text-secondary); } .amti-whatsapp-layout { display: flex; flex-direction: column; gap: 16px; align-items: stretch; width: 100%; max-width: 100%; } .amti-whatsapp-card { width: 100%; box-sizing: border-box; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 18px; background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.72)); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28); padding: 18px; } .amti-whatsapp-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-md); background: rgba(56, 189, 248, 0.12); color: #bae6fd; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .amti-whatsapp-title { margin: 12px 0 8px; font-size: 1.2rem; line-height: 1.25; } .amti-whatsapp-intro { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.45; } .amti-whatsapp-hero { display: flex; flex-direction: column; gap: 14px; } .amti-whatsapp-status-card { border-radius: 16px; } .amti-whatsapp-actions { display: flex; gap: 10px; flex-wrap: wrap; } .amti-whatsapp-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .amti-whatsapp-mini-card { padding: 12px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.16); background: rgba(15, 23, 42, 0.72); display: flex; flex-direction: column; gap: 4px; } .amti-whatsapp-mini-label { color: #7dd3fc; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; } .amti-whatsapp-mini-card strong { font-size: 0.98rem; } .amti-whatsapp-mini-card small { color: var(--text-secondary); line-height: 1.35; } .amti-whatsapp-share-card { padding: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); } .amti-whatsapp-share-title { font-size: 0.92rem; font-weight: 700; margin-bottom: 6px; } .amti-whatsapp-share-copy { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 8px; } .amti-whatsapp-variables-box { margin: 12px 0 16px; padding: 14px 16px; border-radius: 10px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(148, 163, 184, 0.15); } .amti-whatsapp-vars-title { font-size: 0.86rem; font-weight: 700; color: var(--text-primary, #f1f5f9); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .amti-whatsapp-vars-title i { color: #38bdf8; } .amti-whatsapp-vars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 16px; margin-top: 10px; } .amti-whatsapp-var-item { display: flex; align-items: baseline; gap: 8px; font-size: 0.82rem; line-height: 1.4; } .amti-whatsapp-var-item code { color: #38bdf8; background: rgba(56, 189, 248, 0.1); padding: 2px 6px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; font-family: var(--font-mono, monospace); flex-shrink: 0; border: 1px solid rgba(56, 189, 248, 0.2); } .amti-whatsapp-var-item span { color: var(--text-secondary, #94a3b8); } :root[data-theme='light'] .amti-whatsapp-variables-box { background: rgba(241, 245, 249, 0.7); border-color: rgba(148, 163, 184, 0.3); } :root[data-theme='light'] .amti-whatsapp-var-item code { color: #0284c7; background: rgba(2, 132, 199, 0.1); border-color: rgba(2, 132, 199, 0.25); } :root[data-theme='light'] .amti-whatsapp-var-item span { color: #475569; } .amti-whatsapp-share-label { display: block; font-size: 0.82rem; color: var(--text-secondary); } .amti-whatsapp-share-input { margin-top: 6px; margin-bottom: 8px; } .amti-whatsapp-note-box { padding: 16px 20px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.16); background: rgba(15, 23, 42, 0.55); margin-top: 16px; } .amti-whatsapp-note-title { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 700; color: var(--text-primary, #f1f5f9); margin-bottom: 12px; } .amti-whatsapp-note-title i { color: #38bdf8; font-size: 1rem; } .amti-whatsapp-bullets { margin: 0; padding-left: 20px; color: var(--text-secondary, #94a3b8); font-size: 0.88rem; line-height: 1.6; display: flex; flex-direction: column; gap: 8px; } .amti-whatsapp-bullets li { margin: 0; padding: 0; } .amti-whatsapp-bullets li strong, .amti-whatsapp-note-box .amti-whatsapp-bullets strong { display: inline !important; font-weight: 600; color: var(--text-primary, #f8fafc); } .amti-panel-soft { padding: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); } .amti-section-heading { margin-bottom: 12px; border-bottom: 1px solid var(--border-color); padding-bottom: 4px; } .amti-section-heading.mt-20 { margin-top: 20px; } .amti-readonly-display { background-color: rgba(0, 0, 0, 0.1); } .amti-profile-action { margin-bottom: 24px; } .amti-meta-note { font-size: 0.75rem; color: var(--text-muted); margin-top: 8px; } .amti-force-password-copy { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 16px; } .amti-flow-success-card { text-align: center; margin-bottom: 20px; } .amti-text-right { text-align: right; } .amti-text-rose { color: var(--color-rose); } .amti-inline-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; } .amti-inline-actions-end { justify-content: flex-end; } .amti-inline-actions-between { justify-content: space-between; } .amti-inline-actions-center { justify-content: center; } .amti-inline-flex-wrap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; } .amti-cep-lookup-controls { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 6px; width: 100%; } .amti-cep-lookup-controls .amti-form-control { flex: 1 1 auto; min-width: 0; width: auto; height: 44px; min-height: 44px; } .amti-cep-lookup-controls .amti-btn { flex: 0 0 auto; height: 44px; min-height: 44px; min-width: 42px; padding-inline: 12px; } .amti-image-preview { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); display: none; } .amti-image-preview.favicon { width: 32px; height: 32px; border-radius: 6px; } .amti-flow-note { text-align: center; margin: 15px 0; color: var(--text-muted); font-size: 0.85rem; } .amti-flow-note-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; } .amti-flow-label-scan-area[hidden] { display: none; } .amti-flow-label-scan-area { text-align: center; } .amti-flow-note-row .amti-flow-note { margin: 0; } .amti-flow-label-scan-btn { min-height: 34px; gap: 7px; } @keyframes amtiAiLabelColorFlow { from { transform: translateX(-24%); } to { transform: translateX(0); } } @keyframes amtiAiLabelLightSweep { from { transform: translateX(-140%) skewX(-18deg); opacity: 0; } 25% { opacity: 0.7; } to { transform: translateX(140%) skewX(-18deg); opacity: 0; } } .amti-flow-label-scan-btn.is-reading { position: relative; isolation: isolate; overflow: hidden; color: #fff !important; border-color: #67e8f9 !important; background: #164e8a !important; box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.35), 0 0 18px rgba(56, 189, 248, 0.32); } .amti-flow-label-scan-btn.is-reading::before, .amti-flow-label-scan-btn.is-reading::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } .amti-flow-label-scan-btn.is-reading::before { z-index: 0; width: 140%; background: linear-gradient(110deg, #2563eb 0%, #06b6d4 28%, #7c3aed 57%, #db2777 78%, #2563eb 100%); animation: amtiAiLabelColorFlow 2.8s ease-in-out infinite alternate; } .amti-flow-label-scan-btn.is-reading::after { z-index: 1; background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.48) 50%, transparent 80%); animation: amtiAiLabelLightSweep 2.2s ease-in-out infinite; } .amti-flow-label-scan-btn.is-reading > * { position: relative; z-index: 2; color: #fff !important; } @media (prefers-reduced-motion: reduce) { .amti-flow-label-scan-btn.is-reading, .amti-flow-label-scan-btn.is-reading::before, .amti-flow-label-scan-btn.is-reading::after { animation: none !important; } } .amti-flow-label-scan-status { margin: -4px 0 12px; color: var(--text-secondary); font-size: 0.82rem; } .amti-flow-label-scan-status.is-error { color: var(--color-danger, #ef4444); } .amti-flow-label-scan-status.is-success { color: var(--color-success, #22c55e); } .amti-flow-label-scan-help { display: block; margin: -8px 0 12px; color: var(--text-muted); font-size: 0.75rem; line-height: 1.4; } .amti-flow-label-camera-content { width: min(94vw, 760px); max-height: 92vh; display: flex; flex-direction: column; } .amti-flow-label-camera-body { display: grid; gap: 12px; min-height: 0; } .amti-flow-label-camera-status { margin: 0; color: var(--text-secondary); font-size: 0.9rem; } .amti-flow-label-camera-viewport { position: relative; display: grid; place-items: center; min-height: 240px; max-height: min(58vh, 560px); aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--border-color); border-radius: 12px; background: #05070b; } .amti-flow-label-camera-viewport video { display: block; width: 100%; height: 100%; object-fit: cover; } .amti-flow-label-camera-reticle { position: absolute; width: min(72%, 520px); height: min(55%, 300px); border: 2px solid rgba(255, 255, 255, 0.78); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.13); pointer-events: none; } .amti-flow-label-camera-footer { justify-content: flex-end; flex-wrap: wrap; gap: 10px; } @media (max-width: 600px) { .amti-flow-label-camera-content { width: 100%; max-height: 94vh; } .amti-flow-label-camera-viewport { min-height: 200px; max-height: 52vh; aspect-ratio: 3 / 4; } .amti-flow-label-camera-footer > button { flex: 1 1 100%; } } .amti-flow-summary-card { border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; background-color: rgba(255, 255, 255, 0.02); font-size: 0.85rem; line-height: 1.5; margin-bottom: 24px; } .amti-flow-summary-title { font-weight: 700; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-bottom: 16px; font-size: 0.9rem; color: var(--color-cyan); display: flex; align-items: center; gap: 8px; } .amti-flow-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .amti-flow-summary-item { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 10px 12px; } .amti-flow-summary-item.amti-flow-summary-full { grid-column: 1 / -1; } .amti-flow-summary-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .amti-flow-summary-icon { font-size: 0.85rem; color: var(--color-cyan); } .amti-flow-summary-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .amti-flow-summary-value { font-size: 0.9rem; font-weight: 600; color: var(--text-primary, #e2e8f0); word-break: break-word; } .amti-flow-summary-sub { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; display: flex; align-items: center; gap: 4px; } .amti-flow-success-icon { font-size: 3rem; color: var(--color-emerald); margin-bottom: 8px; } .amti-flow-os-badge { display: inline-flex; align-items: baseline; gap: 8px; background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.25); border-radius: 12px; padding: 8px 20px; margin-top: 8px; } .amti-flow-os-badge-label { font-size: 0.85rem; font-weight: 600; color: var(--color-cyan); opacity: 0.8; } .amti-flow-os-badge-value { font-size: 1.8rem; font-weight: 800; color: var(--color-cyan); letter-spacing: -0.02em; } .amti-os-total-value { font-size: 1.2rem; font-weight: 700; text-align: right; color: var(--color-cyan); margin: 10px 0; } .amti-os-print-actions { display: none; gap: 10px; } .amti-os-actions { display: flex; gap: 12px; margin-left: auto; } .amti-step-progress { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 24px; padding: 0 10px; } .amti-step-pill { font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; padding-bottom: 4px; } .amti-step-pill.active { font-weight: 700; color: var(--color-cyan); border-bottom-color: var(--color-cyan); } .amti-btn-primary { background: var(--accent-gradient); border-color: rgba(56, 189, 248, 0.35); color: #03111d; box-shadow: 0 10px 18px rgba(56, 189, 248, 0.16); } .amti-btn-primary:hover { background: linear-gradient(135deg, #67e8f9 0%, #8b5cf6 50%, #c084fc 100%); color: #03111d; } .amti-btn-success { background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(16, 185, 129, 0.18)); border-color: rgba(52, 211, 153, 0.35); color: #ecfdf5; } .amti-btn-success:hover { background: linear-gradient(135deg, rgba(52, 211, 153, 0.24), rgba(16, 185, 129, 0.22)); border-color: rgba(52, 211, 153, 0.45); } .amti-btn-danger { background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(190, 24, 93, 0.18)); border-color: rgba(244, 63, 94, 0.35); color: #fff1f2; } .amti-btn-danger:hover { background: linear-gradient(135deg, rgba(244, 63, 94, 0.25), rgba(190, 24, 93, 0.22)); border-color: rgba(244, 63, 94, 0.45); } /* ── Concluir OS button ── */ .amti-btn.amti-btn-concluir { background: linear-gradient(135deg, rgba(239, 82, 107, 0.34) 0%, rgba(185, 28, 52, 0.28) 100%) !important; border: 1px solid rgba(222, 54, 81, 0.52) !important; color: #ffe4e8 !important; box-shadow: 0 6px 16px rgba(185, 28, 52, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; text-shadow: none !important; transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease !important; } .amti-btn.amti-btn-concluir:hover { background: linear-gradient(135deg, rgba(245, 107, 129, 0.46) 0%, rgba(201, 26, 55, 0.38) 100%) !important; border-color: rgba(244, 63, 94, 0.68) !important; box-shadow: 0 8px 22px rgba(201, 26, 55, 0.28) !important; transform: translateY(-1px) !important; } .amti-btn.amti-btn-concluir:active { background: linear-gradient(135deg, rgba(201, 26, 55, 0.40) 0%, rgba(150, 16, 38, 0.34) 100%) !important; box-shadow: 0 2px 8px rgba(201, 26, 55, 0.16) !important; transform: translateY(0) !important; } .amti-btn.amti-btn-concluir:focus { outline: none !important; box-shadow: 0 6px 16px rgba(185, 28, 52, 0.20), 0 0 0 2px rgba(239, 82, 107, 0.38) !important; } .amti-os-search-row { position: relative; } .amti-os-search-shell { min-width: 0; align-items: center; } .amti-os-search-shell-left { justify-content: flex-end; } .amti-os-search-shell-right { justify-content: flex-start; } .amti-os-search-shell-left .amti-os-search-panel { transform-origin: right center; } .amti-os-search-shell-right .amti-os-search-panel { transform-origin: left center; } .amti-os-search-btn { width: 36px; height: 36px; justify-content: center; padding: 0; border-radius: var(--radius-md); transition: transform 220ms cubic-bezier(.2, .9, .2, 1), box-shadow 220ms cubic-bezier(.2, .9, .2, 1), background 220ms ease; } .amti-os-search-btn:hover { transform: translateY(-1px); } .amti-os-search-btn-active { background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(129, 140, 248, 0.18)); border-color: rgba(56, 189, 248, 0.35); box-shadow: 0 14px 26px rgba(56, 189, 248, 0.12), 0 0 0 1px rgba(56, 189, 248, 0.12) inset; transform: translateY(-1px); } .amti-os-search-panel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow: hidden; max-width: 0; opacity: 0; padding: 0; border-radius: 16px; background: rgba(8, 15, 28, 0.62); border: 1px solid rgba(148, 163, 184, 0.12); box-shadow: 0 18px 32px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04); backdrop-filter: none; -webkit-backdrop-filter: none; transform: translateX(8px); will-change: max-width, opacity, transform; transition: max-width 320ms cubic-bezier(.2, .9, .2, 1), opacity 260ms ease, transform 320ms cubic-bezier(.2, .9, .2, 1), box-shadow 220ms ease, border-color 220ms ease; } .amti-os-search-panel[data-visible="true"] { opacity: 1; transform: translateX(0); padding: 6px; border-color: rgba(56, 189, 248, 0.25); box-shadow: 0 18px 34px rgba(56, 189, 248, 0.08), 0 16px 32px rgba(15, 23, 42, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .os-card-actions-with-search { gap: 8px !important; flex-wrap: nowrap !important; } .os-card-search-shell { display: inline-flex !important; align-items: center; gap: 6px; position: relative; flex-wrap: nowrap !important; } .os-card-search-panel { display: inline-flex !important; align-items: center; gap: 6px; overflow: hidden; flex-wrap: nowrap !important; max-width: 0; opacity: 0; transform: scaleX(0.85); transform-origin: right center; transition: max-width 280ms cubic-bezier(.2, .9, .2, 1), opacity 240ms ease, transform 280ms cubic-bezier(.2, .9, .2, 1); will-change: max-width, opacity, transform; } .os-card-search-panel.os-card-search-panel-open { opacity: 1; transform: scaleX(1); max-width: 400px; } .os-card-search-select { min-width: 130px !important; padding: 6px 8px !important; height: 36px !important; min-height: 36px !important; font-size: 0.8rem !important; } .os-card-search-input { min-width: 140px !important; padding: 6px 10px !important; height: 36px !important; min-height: 36px !important; font-size: 0.8rem !important; } .os-card-search-btn { width: 36px !important; height: 36px !important; flex-shrink: 0; } .os-card-search-btn:hover { transform: none; } .os-card-search-panel .amti-form-control { background: rgba(15, 23, 42, 0.92); border-color: rgba(148, 163, 184, 0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .os-card-search-panel .amti-form-control:focus { border-color: rgba(56, 189, 248, 0.4); } /* ─── Unified Table Search ─────────────────────────── */ .amti-search-shell { display: flex; align-items: center; gap: 6px; position: relative; } .amti-search-panel { display: flex; align-items: center; gap: 6px; overflow: hidden; max-width: 0; opacity: 0; transform: scaleX(0.85); transform-origin: right center; transition: max-width 280ms cubic-bezier(.2, .9, .2, 1), opacity 240ms ease, transform 280ms cubic-bezier(.2, .9, .2, 1); will-change: max-width, opacity, transform; } .amti-search-panel.amti-search-panel-open { opacity: 1; transform: scaleX(1); max-width: 400px; } .amti-search-select { min-width: 130px !important; padding: 6px 8px !important; height: 36px !important; min-height: 36px !important; font-size: 0.8rem !important; } .amti-search-input { min-width: 150px !important; padding: 6px 10px !important; height: 36px !important; min-height: 36px !important; font-size: 0.8rem !important; } .amti-search-btn { width: 36px !important; height: 36px !important; flex-shrink: 0; border-radius: var(--radius-md); justify-content: center; padding: 0; transition: transform 220ms cubic-bezier(.2, .9, .2, 1), box-shadow 220ms cubic-bezier(.2, .9, .2, 1), background 220ms ease; } /* Os atalhos de pesquisa dos cadastros acompanham a altura dos botões "+ Novo..." e permanecem quadrados em todos os breakpoints. */ #tab-clients .amti-search-btn, #tab-equipments .amti-search-btn, #tab-services .amti-search-btn, #tab-stock .amti-search-btn { flex: 0 0 38px !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0 !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Botões principais de adicionar nos itens de Cadastro (+ Novo Cliente, + Novo Aparelho, etc.): Mesma altura exata (38px) do botão "Pesquisar" */ #tab-clients .amti-card-header button.amti-btn-primary, #tab-clients .amti-card-header .amti-btn-primary, #tab-equipments .amti-card-header button.amti-btn-primary, #tab-equipments .amti-card-header .amti-btn-primary, #tab-services .amti-card-header button.amti-btn-primary, #tab-services .amti-card-header .amti-btn-primary, #tab-stock .amti-card-header button.amti-btn-primary, #tab-stock .amti-card-header .amti-btn-primary, #tab-suppliers .amti-card-header button.amti-btn-primary, #tab-suppliers .amti-card-header .amti-btn-primary { height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 14px !important; padding-right: 14px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } #tab-suppliers #supplierSearchInput { height: 38px !important; min-height: 38px !important; max-height: 38px !important; box-sizing: border-box !important; } .amti-search-btn:hover { transform: translateY(-1px); } .amti-search-btn-active { background: var(--active-bg, linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(129, 140, 248, 0.18))); border-color: var(--active-border, rgba(56, 189, 248, 0.35)); box-shadow: var(--active-shadow, 0 14px 26px rgba(56, 189, 248, 0.12), 0 0 0 1px rgba(56, 189, 248, 0.12) inset); transform: translateY(-1px); } .amti-search-panel .amti-form-control { background: rgba(15, 23, 42, 0.92); border-color: rgba(148, 163, 184, 0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .amti-search-panel .amti-form-control:focus { border-color: rgba(56, 189, 248, 0.4); } .amti-os-search-panel .amti-form-control { min-width: 180px; background: rgba(15, 23, 42, 0.88); border-color: rgba(148, 163, 184, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } .amti-form-control { width: 100%; padding: 10px 14px; height: 42px; min-height: 42px; box-sizing: border-box; min-width: 0; overflow: hidden; background: rgba(15, 23, 42, 0.98) !important; background-color: rgba(15, 23, 42, 0.98) !important; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-family); font-size: 0.92rem; outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); color-scheme: dark; } textarea.amti-form-control, textarea { height: auto; min-height: 42px; overflow-y: auto !important; resize: vertical; } /* ───── Multi-select de Usuários / Clientes ───── */ .amti-user-multiselect { position: relative; cursor: pointer; } .amti-user-multiselect-trigger { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 12px; border: 1px solid var(--border-color, rgba(148,163,184,0.25)); border-radius: 8px; background: var(--bg-input, var(--bg-card, rgba(255,255,255,0.05))); flex-wrap: wrap; transition: border-color 0.15s; } .amti-user-multiselect-trigger:hover { border-color: var(--color-primary, #6c63ff); } .amti-user-multiselect-placeholder { color: var(--text-muted, #94a3b8); font-size: 0.9rem; flex: 1; } .amti-user-multiselect-tags { display: flex; flex-wrap: wrap; gap: 4px; } .amti-user-multiselect-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; padding: 2px 8px; border-radius: 999px; background: var(--color-primary-bg, rgba(108,99,255,0.1)); color: var(--color-primary, #6c63ff); white-space: nowrap; } .amti-user-multiselect-tag .fa-times { cursor: pointer; font-size: 0.7rem; opacity: 0.6; } .amti-user-multiselect-tag .fa-times:hover { opacity: 1; } .amti-user-multiselect-arrow { font-size: 0.75rem; color: var(--text-muted, #94a3b8); transition: transform 0.2s; margin-left: auto; } .amti-user-multiselect.open .amti-user-multiselect-arrow { transform: rotate(180deg); } .amti-user-multiselect-dropdown { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 9999; display: none; flex-direction: column; background: var(--bg-card, #1a1d2e); border: 1px solid var(--border-color, rgba(148,163,184,0.25)); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); } .amti-user-multiselect-dropdown:not(.hidden) { display: flex; } .amti-user-multiselect-search { padding: 8px; border-bottom: 1px solid var(--border-color, rgba(148,163,184,0.15)); } .amti-user-multiselect-search input { margin: 0; } .amti-user-multiselect-options { overflow-y: auto; max-height: 200px; padding: 4px 0; } .amti-user-multiselect-option { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; transition: background 0.15s; font-size: 0.9rem; color: var(--text-primary, #e2e8f0); } .amti-user-multiselect-option:hover { background: var(--color-primary-bg, rgba(108,99,255,0.1)); } .amti-user-multiselect-option input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--color-primary, #6c63ff); flex-shrink: 0; } .amti-user-multiselect-option.hidden { display: none; } .amti-user-multiselect-no-results { padding: 16px 12px; text-align: center; color: var(--text-muted, #94a3b8); font-size: 0.85rem; } /* When open: merge trigger with dropdown */ .amti-user-multiselect.open .amti-user-multiselect-trigger { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .amti-user-multiselect.open .amti-user-multiselect-dropdown { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; margin-top: -1px; } @media (min-width: 641px) { #agendaModal #agUsuariosContainer .amti-user-multiselect-trigger { min-height: 42px; padding: 7px 12px; } #agendaModal #agUsuariosContainer .amti-user-multiselect-dropdown { top: calc(100% + 4px); border-radius: 8px; } #agendaModal #agUsuariosContainer .amti-user-multiselect-search { padding: 10px 12px; } #agendaModal #agUsuariosContainer .amti-user-multiselect-search input { min-height: 38px; padding: 8px 11px; color: var(--text-primary, #e2e8f0); border: 1px solid var(--border-color, rgba(148, 163, 184, 0.25)); border-radius: 6px; } #agendaModal #agUsuariosContainer .amti-user-multiselect-search input::placeholder { color: var(--text-muted, #94a3b8) !important; opacity: 0.8 !important; } #agendaModal #agUsuariosContainer .amti-user-multiselect-options { display: flex; flex-direction: column; gap: 2px; max-height: 180px; padding: 6px 8px; } #agendaModal #agUsuariosContainer .amti-user-multiselect-option { min-height: 38px; gap: 10px; padding: 7px 10px; border-radius: 6px; line-height: 1.35; } #agendaModal #agUsuariosContainer .amti-user-multiselect-option input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; margin: 0; } } /* Final override: normalize selects so only a single custom arrow is shown */ select, .zn-select, .zn-select-modern, select.zn-select-modern, select.amti-form-control, .bot-mode-select-minimal { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: none !important; background-repeat: no-repeat !important; background-position: right 0.9rem center !important; background-size: 1rem !important; padding-right: 2.6rem !important; } /* Apply a single custom SVG arrow (final rule, highest priority) */ select, .zn-select, .zn-select-modern, select.zn-select-modern, select.amti-form-control { background-color: rgba(15, 23, 42, 0.98) !important; } /* Ensure IE/Edge glyph hidden */ select::-ms-expand { display: none !important; } /* Wrapper-based custom arrow: the wrapper ::after renders the single arrow */ .amti-select-wrapper { position: relative; display: inline-block; width: 100%; } .amti-select-wrapper select { width: 100%; background: transparent !important; background-image: none !important; padding-right: 2.6rem !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; } .amti-select-wrapper::after { content: ''; pointer-events: none; position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1rem 1rem; opacity: 0.95; } /* === Custom Combobox (searchable select) === */ .amti-combobox { position: relative; width: 100%; min-width: 0; } .amti-combobox-trigger { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; height: 42px; min-height: 42px; box-sizing: border-box; line-height: 1; overflow: hidden; white-space: nowrap; background: var(--bg-input, rgba(15, 23, 42, 0.92)); border: 1px solid var(--border-color, rgba(148, 163, 184, 0.16)); border-radius: var(--radius-md, 8px); color: var(--text-primary, #eff6ff); font-size: 0.92rem; cursor: pointer; text-align: left; transition: border-color 0.2s; font-family: inherit; } .amti-combobox-trigger:hover, .amti-combobox-trigger:focus { border-color: var(--primary, #6366f1); outline: none; } .amti-combobox-arrow { font-size: 0.75rem; opacity: 0.6; transition: transform 0.2s; color: var(--text-secondary, #94a3b8); flex-shrink: 0; } .amti-combobox-trigger span { overflow: hidden; white-space: nowrap; min-width: 0; } .amti-combobox-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 9999; background: var(--bg-input, rgba(15, 23, 42, 0.98)); border: 1px solid var(--border-color, rgba(148, 163, 184, 0.16)); border-radius: var(--radius-md, 8px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); overflow: hidden; } .amti-combobox-dropdown.amti-combobox-dropdown--fixed { position: fixed; } .amti-combobox-search { width: 100%; border: none !important; border-bottom: 1px solid var(--border-color, rgba(148, 163, 184, 0.16)) !important; border-radius: 0 !important; padding: 0.75rem 1rem !important; background: transparent !important; color: var(--text-primary, #eff6ff); font-size: 0.875rem; box-sizing: border-box; } .amti-combobox-search:focus { outline: none; border-bottom-color: var(--primary, #6366f1) !important; } .amti-combobox-options { max-height: 220px; overflow-y: auto; } .amti-combobox-option { padding: 0.6rem 1rem; cursor: pointer; font-size: 0.875rem; color: var(--text-primary, #eff6ff); transition: background 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .amti-combobox-option:hover { background: rgba(99,102,241,0.15); color: var(--text-primary, #eff6ff); } .amti-combobox-option:first-child { color: var(--primary, #6366f1); font-weight: 600; } .amti-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } @media (min-width: 1024px) { #newOSFlowModal .amti-flow-equipment-identifiers { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } .finance-description-payment-row { grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr); align-items: end; } .finance-launch-date-cell { white-space: nowrap; } .finance-launch-time { margin-left: 8px; color: var(--text-secondary); font-size: 0.85em; } .finance-save-label-mobile { display: none; } @media (max-width: 640px) { .finance-save-label-desktop { display: none; } .finance-save-label-mobile { display: inline; } } @media (max-width: 560px) { .finance-description-payment-row { grid-template-columns: minmax(0, 1fr); } } .ti-os-cash-primary-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ti-os-cash-primary-row .amti-form-group { min-width: 0; } @media (max-width: 760px) { .ti-os-cash-primary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .ti-os-cash-primary-row { grid-template-columns: minmax(0, 1fr); } } /* ───── OS Edit Modal – Section Cards ───── */ .os-modal-section { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card-soft); margin-bottom: 16px; overflow: visible; } .os-modal-section:focus-within, .os-modal-section.amti-has-open-dropdown, .os-modal-section:has(.amti-suggestion-dropdown.open), .os-modal-section:has(.amti-suggestion-dropdown[style*="display: block"]), .os-modal-section:has(.amti-combobox-dropdown.open), .os-modal-section:has(.amti-combobox-dropdown[style*="display: block"]) { position: relative; z-index: 50; } #agendaModal .amti-modal-body { padding: 28px; } #agendaModal .os-modal-section { overflow: visible; border-radius: var(--radius-md); transition: border-color 0.2s; } #agendaModal .os-modal-section:hover { border-color: rgba(99, 102, 241, 0.3); } #agendaModal .os-modal-section .os-modal-section-header { border-radius: var(--radius-md) var(--radius-md) 0 0; padding: 12px 16px; } #agendaModal .os-modal-section-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; } #agendaModal .amti-form-group { margin-bottom: 0; } /* Step 3 of Fluxo Contínuo - consistent spacing */ #osFlowStep3 .os-modal-section-body { display: flex; flex-direction: column; gap: 18px; padding: 20px; } #osFlowStep3 .amti-form-group label { margin-bottom: 6px; display: block; } .amti-os-media-notes-row { display: flex; align-items: stretch; gap: 8px; min-width: 0; } .amti-os-media-notes-row > .amti-form-control { flex: 1 1 auto; min-width: 0; } .amti-os-media-actions { display: inline-flex; align-items: stretch; gap: 6px; flex: 0 0 auto; } .amti-os-media-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; min-height: 42px; padding: 0; } .amti-os-media-tech-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; min-width: 0; } .os-internal-tech-header { flex-wrap: wrap; gap: 8px; } .amti-os-media-tech-actions .os-tecnico-select-wrapper { min-width: 150px; flex: 1 1 180px; } .amti-os-media-tech-actions select { width: 100%; } .amti-os-media-pending, .amti-os-media-gallery { margin-top: 10px; padding: 10px; border: 1px solid var(--border-color, rgba(148,163,184,.22)); border-radius: 8px; background: rgba(148,163,184,.06); color: var(--text-secondary); font-size: .82rem; } .amti-os-media-pending[hidden], .amti-os-media-gallery[hidden] { display: none !important; } .amti-os-media-pending-item { padding-top: 5px; overflow-wrap: anywhere; } .amti-os-media-pending-grid { align-items: center; } .amti-os-media-pending > .amti-os-media-grid:first-child, .amti-os-media-gallery > .amti-os-media-grid:first-child { margin-top: 0; } .amti-os-media-fallback-tile { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 26px; color: var(--text-secondary, #94a3b8); background: var(--card-surface, rgba(15, 23, 42, 0.6)); } .amti-os-media-card--pending { width: 132px; height: auto; min-width: 132px; min-height: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; cursor: default; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .amti-os-media-card--pending:hover { transform: none; } .amti-os-media-card--pending > .amti-os-media-thumb, .amti-os-media-pending-video { width: 100%; height: 84px; flex: 0 0 84px; } .amti-os-media-pending-video { display: flex; align-items: center; justify-content: center; color: var(--text-secondary, #94a3b8); background: var(--card-surface, rgba(15, 23, 42, 0.6)); font-size: 26px; } .amti-os-media-pending-details { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 7px; } .amti-os-media-pending-name, .amti-os-media-pending-state { display: block; overflow: hidden; overflow-wrap: anywhere; line-height: 1.35; } .amti-os-media-pending-name { color: var(--text-primary, #e2e8f0); font-size: .72rem; font-weight: 600; } .amti-os-media-pending-state { color: var(--text-secondary, #94a3b8); font-size: .68rem; } .amti-os-media-pending-state.is-uploading { color: var(--primary, #60a5fa); } .amti-os-media-pending-state.is-error { color: var(--danger, #f87171); } .amti-os-media-gallery-title { display: none !important; } .amti-os-media-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; } .amti-os-media-card { position: relative; width: 84px; height: 84px; min-width: 84px; min-height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color, rgba(148, 163, 184, 0.25)); background: var(--card-surface, rgba(15, 23, 42, 0.6)); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; user-select: none; } .amti-os-media-card:hover { transform: translateY(-2px); border-color: var(--primary, #6366f1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); } .amti-os-media-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .amti-os-media-thumb-video { pointer-events: none; } .amti-os-media-fallback-icon { font-size: 28px; color: var(--text-secondary, #94a3b8); } .amti-os-media-card--unavailable { cursor: not-allowed; border-color: var(--warning, #f59e0b); } .amti-os-media-unavailable-note { position: absolute; inset: auto 2px 2px; z-index: 1; padding: 3px 4px; border-radius: 4px; background: var(--card-surface, rgba(15, 23, 42, .94)); color: var(--warning, #f59e0b); font-size: 8px; line-height: 1.2; text-align: center; pointer-events: none; } .amti-os-media-badge { position: absolute; bottom: 5px; right: 5px; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 10px; width: 20px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 1; transition: opacity 0.2s ease; } .amti-os-media-card:hover .amti-os-media-badge { opacity: 0; } .amti-os-media-overlay { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background: rgba(15, 23, 42, 0.75) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 2; box-sizing: border-box !important; } .amti-os-media-card:hover .amti-os-media-overlay, .amti-os-media-card:focus-within .amti-os-media-overlay { opacity: 1; pointer-events: auto; } .amti-os-media-icon-btn { width: 32px !important; height: 32px !important; min-width: 32px !important; max-width: 32px !important; min-height: 32px !important; max-height: 32px !important; aspect-ratio: 1 / 1 !important; flex: 0 0 32px !important; padding: 0 !important; margin: 0 !important; border-radius: 6px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; line-height: 1 !important; cursor: pointer !important; border: 1px solid transparent !important; transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important; } .amti-os-media-icon-btn i { font-size: 14px !important; line-height: 1 !important; pointer-events: none !important; } .amti-os-media-icon-btn:hover { transform: scale(1.12); } .amti-os-media-icon-btn--view { background: rgba(59, 130, 246, 0.9); color: #ffffff; border-color: rgba(147, 197, 253, 0.5); box-shadow: 0 2px 5px rgba(59, 130, 246, 0.35); } .amti-os-media-icon-btn--view:hover { background: #2563eb; border-color: #60a5fa; box-shadow: 0 3px 8px rgba(37, 99, 235, 0.5); } .amti-os-media-icon-btn--delete { background: rgba(239, 68, 68, 0.9); color: #ffffff; border-color: rgba(252, 165, 165, 0.5); box-shadow: 0 2px 5px rgba(239, 68, 68, 0.35); } .amti-os-media-icon-btn--delete:hover { background: #dc2626; border-color: #f87171; box-shadow: 0 3px 8px rgba(220, 38, 38, 0.5); } .amti-os-media-notice { max-width: 560px; } .amti-os-media-preview { width: min(94vw, 1080px); max-width: 1080px; height: min(90vh, 900px); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; } .amti-os-media-preview .amti-modal-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .amti-os-media-preview-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .amti-os-media-preview-actions .amti-btn { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-width: 34px !important; max-height: 34px !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; font-size: 14px !important; } .amti-os-media-preview .amti-modal-header h3 { margin: 0; font-size: 1rem; color: var(--text-1); } .amti-os-media-preview .amti-modal-body { display: grid; place-items: center; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; height: 100%; max-height: none; overflow: hidden; padding: 12px; } .amti-os-media-preview img, .amti-os-media-preview video { display: block; max-width: 100%; max-height: 72vh; object-fit: contain; } .amti-os-media-preview-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; } .amti-os-media-preview-title-wrap h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .amti-os-media-counter { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; font-size: 0.76rem; font-weight: 700; border-radius: 9999px; background: rgba(99, 102, 241, 0.16); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.35); letter-spacing: 0.03em; white-space: nowrap; flex: 0 0 auto; } .amti-os-media-preview-stage { position: relative; display: flex; flex: 1 1 auto; align-items: center; justify-content: center; width: 100%; min-height: 0; overflow: hidden; background: radial-gradient(circle at center, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.95) 100%); user-select: none; } .amti-os-media-preview #osMediaPreviewContent { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; padding: 14px !important; overflow: hidden !important; box-sizing: border-box !important; } .amti-os-media-preview #osMediaPreviewContent > img, .amti-os-media-preview #osMediaPreviewContent > video { display: block !important; max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; transform: translate(var(--os-media-zoom-x, 0px), var(--os-media-zoom-y, 0px)) scale(var(--os-media-zoom, 1)); transform-origin: center center; transition: transform 180ms ease; } .amti-os-media-preview #osMediaPreviewContent > img { touch-action: none; user-select: none; -webkit-user-drag: none; cursor: zoom-in; } .amti-os-media-preview #osMediaPreviewContent > img.is-zoomed { cursor: grab; } .amti-os-media-preview #osMediaPreviewContent > img.is-dragging { cursor: grabbing; transition: none; } .amti-os-media-preview-loading { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-secondary, #94a3b8); } .amti-os-media-zoom-controls { position: absolute; top: 14px; right: 14px; z-index: 16; display: inline-flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; background: rgba(15, 23, 42, 0.78); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); } .amti-os-media-zoom-controls[hidden] { display: none; } .amti-os-media-zoom-controls button { min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: #f8fafc; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: background-color 160ms ease, color 160ms ease; } .amti-os-media-zoom-controls button:hover:not(:disabled) { background: rgba(129, 140, 248, 0.3); color: #c7d2fe; } .amti-os-media-zoom-controls button:disabled { opacity: 0.4; cursor: not-allowed; } .amti-os-media-zoom-controls button:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; } .amti-os-media-zoom-help { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .amti-os-media-preview-strip-wrap { flex: 0 0 auto; } @media (max-width: 767px) { .amti-os-media-preview { height: min(90dvh, 900px) !important; max-height: calc(100dvh - 12px) !important; } } .amti-os-media-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 15; width: 46px; height: 46px; border-radius: 50%; background: rgba(15, 23, 42, 0.78); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(255, 255, 255, 0.18); color: #f8fafc; font-size: 19px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55); } .amti-os-media-nav:hover:not(:disabled) { background: var(--primary, #6366f1); border-color: rgba(255, 255, 255, 0.4); transform: translateY(-50%) scale(1.12); box-shadow: 0 6px 22px rgba(99, 102, 241, 0.5); color: #ffffff; } .amti-os-media-nav:active:not(:disabled) { transform: translateY(-50%) scale(0.95); } .amti-os-media-nav:disabled { opacity: 0.22; cursor: not-allowed; pointer-events: none; } .amti-os-media-nav--prev { left: 14px; } .amti-os-media-nav--next { right: 14px; } .amti-os-media-preview-strip-wrap { background: rgba(15, 23, 42, 0.85); border-top: 1px solid var(--border); padding: 10px 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; display: flex; justify-content: center; } .amti-os-media-preview-strip { display: flex; align-items: center; gap: 10px; min-width: min-content; } .amti-os-media-strip-item { position: relative; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: #0f172a; cursor: pointer; opacity: 0.55; transition: all 0.2s ease; } .amti-os-media-strip-item:hover { opacity: 0.9; transform: translateY(-2px); } .amti-os-media-strip-item.is-active { border-color: var(--primary, #6366f1); opacity: 1; transform: scale(1.08); box-shadow: 0 0 14px rgba(99, 102, 241, 0.65); } .amti-os-media-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .amti-os-media-strip-video-icon { position: absolute; bottom: 2px; right: 2px; background: rgba(0, 0, 0, 0.7); border-radius: 4px; padding: 2px 4px; font-size: 9px; color: #fff; } @media (max-width: 640px) { .amti-os-media-nav { width: 38px; height: 38px; font-size: 15px; } .amti-os-media-nav--prev { left: 8px; } .amti-os-media-nav--next { right: 8px; } .amti-os-media-strip-item { width: 44px; height: 44px; flex: 0 0 44px; } } .amti-os-media-notice .amti-modal-header { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); } .amti-os-media-notice h3 { margin: 0; color: var(--text-1); font-size: 1.05rem; } .amti-os-media-notice .amti-modal-header p { margin: 4px 0 0; color: var(--text-3); font-size: .8rem; } .amti-os-media-notice-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: rgba(245,158,11,.12); color: #fbbf24; font-size: 1.1rem; } .amti-os-media-notice .amti-modal-body { padding: 18px 20px; color: var(--text-secondary); line-height: 1.6; } .amti-os-media-notice .amti-modal-body p:first-child { margin-top: 0; } .amti-os-media-notice .amti-modal-body p:last-child { margin-bottom: 0; } .amti-os-media-notice .amti-modal-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); } /* Companion Camera (PC ⇄ Smartphone) */ .amti-companion-modal { max-width: 530px; width: 92%; background: var(--bg-surface, #1e2430); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6); overflow: hidden; } .amti-companion-header-info { display: flex !important; align-items: center !important; gap: 12px !important; } .amti-companion-icon { display: grid !important; place-items: center !important; width: 42px !important; height: 42px !important; min-width: 42px !important; border-radius: 10px !important; background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(16, 185, 129, 0.25)) !important; color: #38bdf8 !important; font-size: 1.25rem !important; border: 1px solid rgba(56, 189, 248, 0.2) !important; } .amti-companion-modal .amti-modal-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 16px 20px !important; border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08)) !important; background: rgba(0, 0, 0, 0.12) !important; } .amti-companion-modal .amti-modal-header h3 { margin: 0 !important; font-size: 1.05rem !important; font-weight: 600 !important; color: var(--text-1, #f1f5f9) !important; line-height: 1.25 !important; } .amti-companion-modal .amti-modal-header p { margin: 3px 0 0 !important; font-size: 0.8rem !important; color: var(--text-3, #94a3b8) !important; line-height: 1.3 !important; } .amti-companion-body { padding: 24px 20px; display: flex; flex-direction: column; gap: 20px; } .amti-companion-sync-animation { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 24px 16px; background: rgba(15, 23, 42, 0.4); border: 1px dashed rgba(255, 255, 255, 0.15); border-radius: 12px; } .amti-companion-dev { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-2, #cbd5e1); } .amti-companion-dev i { font-size: 2rem; color: #38bdf8; } .amti-companion-dev--phone i { color: #34d399; } .amti-companion-dev.amti-pulse { animation: companionPulse 1.8s infinite; } @keyframes companionPulse { 0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(52, 211, 153, 0)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.8)); } 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(52, 211, 153, 0)); } } .amti-companion-waves { display: flex; align-items: center; gap: 4px; position: relative; width: 70px; justify-content: center; } .amti-wave-bolt { color: #facc15; font-size: 1.1rem; animation: companionBolt 1s infinite alternate; } @keyframes companionBolt { from { opacity: 0.4; transform: scale(0.85); } to { opacity: 1; transform: scale(1.15); } } .amti-companion-status-box { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: rgba(30, 41, 59, 0.7); border-radius: 10px; border-left: 3px solid #38bdf8; } .amti-companion-status-spinner { width: 22px; height: 22px; border: 3px solid rgba(56, 189, 248, 0.2); border-top-color: #38bdf8; border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; margin-top: 2px; } .amti-companion-status-text { display: flex; flex-direction: column; gap: 4px; } .amti-companion-status-text strong { font-size: 0.9rem; color: var(--text-1, #f1f5f9); } .amti-companion-status-text span { font-size: 0.8rem; line-height: 1.45; color: var(--text-3, #94a3b8); } .amti-companion-footer { display: flex !important; justify-content: flex-end !important; align-items: center !important; flex-wrap: nowrap !important; gap: 10px !important; padding: 14px 20px !important; border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08)) !important; background: rgba(0, 0, 0, 0.18) !important; box-sizing: border-box !important; } .amti-companion-footer .amti-btn { height: 42px !important; min-height: 42px !important; max-height: 42px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 0 16px !important; font-size: 0.88rem !important; font-weight: 600 !important; border-radius: 8px !important; margin: 0 !important; white-space: nowrap !important; flex-shrink: 0 !important; line-height: 1 !important; } .amti-companion-footer .amti-btn-ghost { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: var(--text-2, #cbd5e1) !important; } .amti-companion-footer .amti-btn-ghost:hover { background: rgba(239, 68, 68, 0.15) !important; border-color: rgba(239, 68, 68, 0.35) !important; color: #f87171 !important; } .amti-companion-footer #osCompanionPCFinishBtn { font-weight: 700 !important; font-size: 0.92rem !important; letter-spacing: 0.015em !important; box-shadow: 0 4px 14px rgba(4, 120, 87, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; background: linear-gradient(135deg, #047857 0%, #059669 50%, #047857 100%) !important; border: 1px solid rgba(52, 211, 153, 0.5) !important; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important; } .amti-companion-footer #osCompanionPCFinishBtn:hover { background: linear-gradient(135deg, #059669 0%, #065f46 100%) !important; border-color: #34d399 !important; color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important; box-shadow: 0 6px 18px rgba(5, 150, 105, 0.45) !important; } .amti-companion-retry-btn.is-retrying i { animation: amtiSpin 0.7s linear infinite !important; } @keyframes amtiSpin { 100% { transform: rotate(360deg); } } /* Smartphone Mobile Modal / Bottom Sheet — Padrão Universal de Modais e Desempenho */ :is(#osCompanionMobileModal, #osBarcodeCompanionModal) { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 99999 !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: opacity 0.22s ease !important; transform: translateZ(0); } :is(#osCompanionMobileModal, #osBarcodeCompanionModal).hidden { display: none !important; } /* Fallback: caso aberto isoladamente sem body.amti-has-open-modal ativo, segue exatamente o padrão do Dashboard */ body:not(.amti-has-open-modal) :is(#osCompanionMobileModal, #osBarcodeCompanionModal) { background: var(--modal-backdrop, rgba(4, 6, 12, 0.82)) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Perfil ultra: fundo sólido leve para o scanner móvel. */ :is(body, html).amti-performance-mode :is(#osCompanionMobileModal, #osBarcodeCompanionModal), body.amti-performance-mode :is(#osCompanionMobileModal, #osBarcodeCompanionModal) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :is(body, html).amti-performance-mode body:not(.amti-has-open-modal) :is(#osCompanionMobileModal, #osBarcodeCompanionModal), body.amti-performance-mode:not(.amti-has-open-modal) :is(#osCompanionMobileModal, #osBarcodeCompanionModal) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--modal-backdrop, rgba(4, 6, 12, 0.88)) !important; } /* Modo Ultra Desempenho: sem blur, fundo opaco de alto contraste */ :is(body, html).amti-ultra-performance-mode :is(#osCompanionMobileModal, #osBarcodeCompanionModal), body.amti-ultra-performance-mode :is(#osCompanionMobileModal, #osBarcodeCompanionModal) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :is(body, html).amti-ultra-performance-mode body:not(.amti-has-open-modal) :is(#osCompanionMobileModal, #osBarcodeCompanionModal), body.amti-ultra-performance-mode:not(.amti-has-open-modal) :is(#osCompanionMobileModal, #osBarcodeCompanionModal) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(2, 4, 10, 0.96) !important; } /* Blur desativado explicitamente */ :is(body, html).amti-hide-blur :is(#osCompanionMobileModal, #osBarcodeCompanionModal), body.amti-hide-blur :is(#osCompanionMobileModal, #osBarcodeCompanionModal) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Adaptações da janela de diálogo ao perfil ultra */ :is(body, html).amti-performance-mode:not(.amti-ultra-performance-mode) .amti-companion-mobile-content { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important; } :is(body, html).amti-ultra-performance-mode .amti-companion-mobile-content { box-shadow: none !important; animation: none !important; transition: none !important; } body.amti-hide-glow .amti-companion-mobile-content { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; } :is(body, html).amti-hide-animations .amti-companion-mobile-content { animation: none !important; transition: none !important; } .amti-companion-mobile-content { position: relative !important; max-width: 440px !important; width: 95% !important; background: var(--bg-surface, #1e2430) !important; border: 2px solid rgba(16, 185, 129, 0.5) !important; border-radius: 24px 24px 20px 20px !important; box-shadow: 0 0 30px rgba(16, 185, 129, 0.25), 0 -10px 40px rgba(0, 0, 0, 0.9) !important; overflow: hidden !important; text-align: center !important; margin: auto auto 20px !important; animation: amtiCompanionSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; } @keyframes amtiCompanionSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .amti-companion-mobile-handle { width: 42px !important; height: 4px !important; background: rgba(255, 255, 255, 0.3) !important; border-radius: 999px !important; margin: 12px auto 8px !important; } .amti-companion-mobile-header { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 8px 18px 14px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; background: transparent !important; text-align: center !important; box-sizing: border-box !important; width: 100% !important; } .amti-companion-mobile-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 5px 12px !important; border-radius: 9999px !important; background: rgba(16, 185, 129, 0.16) !important; border: 1px solid rgba(16, 185, 129, 0.35) !important; color: #34d399 !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important; line-height: 1 !important; margin: 0 !important; } .amti-companion-mobile-header h3 { margin: 0 !important; padding: 0 !important; font-size: 1.25rem !important; font-weight: 800 !important; color: #f8fafc !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; text-align: center !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; width: 100% !important; } .amti-companion-mobile-header p { margin: 0 !important; padding: 0 !important; font-size: 0.88rem !important; font-weight: 500 !important; color: #94a3b8 !important; line-height: 1.35 !important; text-align: center !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; width: 100% !important; } .amti-companion-mobile-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; } .amti-companion-camera-big-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 84px; padding: 18px 16px; border: none; border-radius: 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #ffffff; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.25s ease, border-color 0.25s ease; user-select: none; -webkit-tap-highlight-color: transparent; } .amti-companion-camera-big-btn:active:not(:disabled):not(.is-busy) { transform: scale(0.97); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); } .amti-companion-camera-big-btn:disabled, .amti-companion-camera-big-btn.is-busy { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; color: #94a3b8 !important; border: 1.5px solid rgba(56, 189, 248, 0.35) !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.6), inset 0 0 16px rgba(56, 189, 248, 0.08) !important; cursor: wait !important; pointer-events: auto !important; transform: none !important; opacity: 1 !important; } .amti-companion-camera-big-btn:disabled .amti-camera-big-icon, .amti-companion-camera-big-btn.is-busy .amti-camera-big-icon { color: #38bdf8 !important; } .amti-companion-camera-big-btn:disabled .amti-camera-big-label, .amti-companion-camera-big-btn.is-busy .amti-camera-big-label { color: #f8fafc !important; letter-spacing: 0.8px; } .amti-companion-camera-big-btn:disabled .amti-camera-big-hint, .amti-companion-camera-big-btn.is-busy .amti-camera-big-hint { color: #38bdf8 !important; font-weight: 500; } .amti-camera-big-icon { font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } .amti-camera-big-label { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.5px; } .amti-camera-big-hint { font-size: 0.75rem; opacity: 0.9; } .amti-companion-mobile-progress { display: grid; gap: 10px; padding: 16px; background: rgba(15, 23, 42, 0.6); border-radius: 10px; font-size: 0.88rem; color: var(--text-2, #cbd5e1); } .amti-companion-mobile-progress[hidden] { display: none; } .amti-companion-mobile-progress-bar { position: relative; overflow: hidden; width: 100%; height: 12px; border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 999px; background: rgba(2, 6, 23, 0.65); } .amti-companion-mobile-progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #06b6d4, #10b981); box-shadow: 0 0 12px rgba(16, 185, 129, 0.4); transition: width 0.2s ease-out; } .amti-companion-mobile-progress.is-indeterminate .amti-companion-mobile-progress-fill { width: 35%; animation: amtiCompanionProgressIndeterminate 1.1s ease-in-out infinite alternate; } .amti-companion-mobile-progress-text { display: block; text-align: center; line-height: 1.4; } @keyframes amtiCompanionProgressIndeterminate { from { transform: translateX(0); } to { transform: translateX(185%); } } @media (prefers-reduced-motion: reduce) { .amti-companion-mobile-progress-fill { transition: none; } .amti-companion-mobile-progress.is-indeterminate .amti-companion-mobile-progress-fill { animation: none; width: 50%; } } .amti-companion-success-badge { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.35); border-radius: 10px; color: #34d399; font-size: 0.88rem; font-weight: 600; text-align: center; animation: amtiBadgePop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .amti-companion-success-badge[hidden], #osBarcodeSuccessBadge[hidden] { display: none !important; } @keyframes amtiBadgePop { 0% { transform: scale(0.92); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } html[data-theme='block-steel'] .amti-companion-success-badge, html[data-theme='block-blue'] .amti-companion-success-badge, html[data-theme='block-light'] .amti-companion-success-badge, html[data-theme='dark-block'] .amti-companion-success-badge { border-radius: 0 !important; } #osCompanionPCFinishBtn { font-weight: 700; font-size: 0.92rem; letter-spacing: 0.015em; box-shadow: 0 4px 14px rgba(4, 120, 87, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18); background: linear-gradient(135deg, #047857 0%, #059669 50%, #047857 100%); border: 1px solid rgba(52, 211, 153, 0.5); color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } #osCompanionPCFinishBtn:hover { background: linear-gradient(135deg, #059669 0%, #065f46 100%); border-color: #34d399; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); box-shadow: 0 6px 18px rgba(5, 150, 105, 0.45); } .amti-companion-mobile-footer { padding: 14px 18px 20px !important; border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08)) !important; display: flex !important; flex-direction: column !important; gap: 10px !important; background: rgba(0, 0, 0, 0.2) !important; box-sizing: border-box !important; } .amti-companion-mobile-footer .amti-btn { height: 48px !important; min-height: 48px !important; max-height: 48px !important; width: 100% !important; padding: 0 18px !important; font-size: 0.95rem !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border-radius: 10px !important; box-sizing: border-box !important; white-space: nowrap !important; margin: 0 !important; line-height: 1 !important; } .amti-companion-mobile-footer #osCompanionMobileFinishBtn { font-weight: 700 !important; font-size: 0.92rem !important; letter-spacing: 0.015em !important; box-shadow: 0 4px 14px rgba(4, 120, 87, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; background: linear-gradient(135deg, #047857 0%, #059669 50%, #047857 100%) !important; border: 1px solid rgba(52, 211, 153, 0.5) !important; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important; } .amti-companion-mobile-footer #osCompanionMobileFinishBtn:hover { background: linear-gradient(135deg, #059669 0%, #065f46 100%) !important; border-color: #34d399 !important; color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important; box-shadow: 0 6px 18px rgba(5, 150, 105, 0.45) !important; } .amti-companion-mobile-footer .amti-btn-secondary { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #f1f5f9 !important; } /* ── Barcode / Serial Scanner: input wrapper + botão câmera ─────────────────────────── */ .amti-input-with-scan { display: flex !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; box-sizing: border-box !important; position: relative; } .amti-input-with-scan .amti-suggestion-wrapper { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; display: flex !important; position: relative !important; } .amti-input-with-scan .amti-form-control, .amti-input-with-scan .amti-suggestion-wrapper .amti-form-control { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; box-sizing: border-box !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: none !important; } .amti-form-row > .amti-form-group-empty { min-height: 0; margin: 0; padding: 0; } @media (max-width: 560px) { .amti-form-row > .amti-form-group-empty { display: none !important; } } .amti-btn-scan-barcode { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 42px !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; font-size: 1.05rem !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: var(--radius-md, 8px) !important; border-bottom-right-radius: var(--radius-md, 8px) !important; background: var(--surface-2, rgba(148, 163, 184, 0.12)); color: var(--primary, #38bdf8); border: 1px solid rgba(148, 163, 184, 0.18); border-left: none !important; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .amti-btn-scan-barcode:hover:not(:disabled) { background: rgba(56, 189, 248, 0.16); color: var(--primary-vivid, #0ea5e9); border-color: rgba(56, 189, 248, 0.35); } .amti-btn-scan-barcode:active:not(:disabled) { transform: scale(0.96); } .amti-btn-scan-barcode:disabled { opacity: 0.5; cursor: not-allowed; } /* Block themes: barcode button & input are perfectly square */ html[data-theme='block-steel'] .amti-btn-scan-barcode, html[data-theme='block-blue'] .amti-btn-scan-barcode, html[data-theme='block-light'] .amti-btn-scan-barcode, html[data-theme='dark-block'] .amti-btn-scan-barcode { border-radius: 0 !important; } html[data-theme='block-steel'] .amti-input-with-scan .amti-form-control, html[data-theme='block-blue'] .amti-input-with-scan .amti-form-control, html[data-theme='block-light'] .amti-input-with-scan .amti-form-control, html[data-theme='dark-block'] .amti-input-with-scan .amti-form-control { border-radius: 0 !important; } /* Mobile: match touch target and height perfectly */ @media (max-width: 640px) { .amti-input-with-scan .amti-form-control { height: 44px !important; min-height: 44px !important; max-height: 44px !important; } .amti-btn-scan-barcode { flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; font-size: 1.1rem !important; } } /* ── Barcode Live Laser Scanner Viewport ─────────────────────────────────────────── */ .amti-barcode-scanner-viewport { position: relative !important; width: 100% !important; border-radius: 14px !important; overflow: hidden !important; background: #000000 !important; aspect-ratio: 4/3 !important; min-height: 250px !important; max-height: 380px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .amti-barcode-scanner-video { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: scale(1.02); } .amti-barcode-reticle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 82%; height: 52%; border-radius: 12px; pointer-events: none; z-index: 4; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.52); transition: border-color 0.2s ease; } .amti-barcode-reticle::before, .amti-barcode-reticle::after, .amti-barcode-reticle-bottom::before, .amti-barcode-reticle-bottom::after { content: ''; position: absolute; width: 26px; height: 26px; border-color: #38bdf8; border-style: solid; transition: border-color 0.2s ease, filter 0.2s ease; } .amti-barcode-reticle::before { top: -2px; left: -2px; border-width: 3.5px 0 0 3.5px; border-top-left-radius: 10px; } .amti-barcode-reticle::after { top: -2px; right: -2px; border-width: 3.5px 3.5px 0 0; border-top-right-radius: 10px; } .amti-barcode-reticle-bottom::before { bottom: -2px; left: -2px; border-width: 0 0 3.5px 3.5px; border-bottom-left-radius: 10px; } .amti-barcode-reticle-bottom::after { bottom: -2px; right: -2px; border-width: 0 3.5px 3.5px 0; border-bottom-right-radius: 10px; } .amti-barcode-reticle.is-detected { border: 2px solid #10b981; } .amti-barcode-reticle.is-detected::before, .amti-barcode-reticle.is-detected::after, .amti-barcode-reticle.is-detected .amti-barcode-reticle-bottom::before, .amti-barcode-reticle.is-detected .amti-barcode-reticle-bottom::after { border-color: #10b981; filter: drop-shadow(0 0 6px #10b981); } .amti-barcode-scanner-viewport.is-equipment-label-scan .amti-barcode-reticle, .amti-companion-pc-webcam-viewport.is-equipment-label-scan .amti-barcode-reticle { display: none; } .amti-barcode-torch-btn { position: absolute; top: 12px; right: 12px; z-index: 10; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.25); color: #f8fafc; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; backdrop-filter: none; } .amti-barcode-torch-btn.active { background: #f59e0b; color: #0f172a; border-color: #f59e0b; box-shadow: 0 0 14px rgba(245, 158, 11, 0.85); } .amti-btn-block { width: 100%; } @media (max-width: 640px) { .os-internal-tech-header { flex-direction: column !important; align-items: stretch !important; } .amti-os-media-notes-row { gap: 6px; } .amti-os-media-tech-actions { width: 100%; justify-content: stretch; } .amti-os-media-tech-actions .os-tecnico-select-wrapper { flex: 1 1 100%; min-width: 0; } .amti-os-media-tech-actions .amti-os-media-actions { display: grid; grid-template-columns: repeat(2, 42px); } .amti-os-media-notes-row > .amti-os-media-actions { grid-template-columns: repeat(2, 42px); } .amti-os-media-notice .amti-modal-footer { flex-direction: column-reverse; } .amti-os-media-notice .amti-modal-footer .amti-btn { width: 100%; justify-content: center; } .amti-os-media-grid { grid-template-columns: 1fr; } } #agendaModal .amti-form-group label { font-weight: 600; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; min-height: 22px; } #agendaModal .amti-form-control { padding: 10px 14px; font-size: 0.9rem; height: 42px; min-height: 42px; box-sizing: border-box; } /* ───── Alinhamento Perfeito: Valor, Tempo e Local ───── */ #agendaModal .agenda-meta-fields-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; align-items: start !important; } #agendaModal .agenda-meta-fields-row .amti-form-group { display: flex !important; flex-direction: column !important; min-width: 0 !important; margin-bottom: 0 !important; } #agendaModal .agenda-meta-fields-row .amti-form-group label { height: 22px !important; min-height: 22px !important; max-height: 22px !important; line-height: 22px !important; margin-bottom: 6px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: flex !important; align-items: center !important; gap: 6px !important; } #agendaModal .agenda-meta-fields-row .amti-form-group label i { flex-shrink: 0; font-size: 0.85rem; } #agendaModal .agenda-meta-fields-row .amti-form-control { height: 42px !important; min-height: 42px !important; max-height: 42px !important; box-sizing: border-box !important; } #agendaModal .agenda-meta-fields-row select.amti-form-control { padding-top: 0 !important; padding-bottom: 0 !important; cursor: pointer; } @media (max-width: 680px) { #agendaModal .agenda-meta-fields-row { grid-template-columns: 1fr !important; gap: 12px !important; } } #agendaModal .amti-inline-actions { } #agendaModal .amti-inline-actions .amti-btn { padding: 10px 24px; font-size: 0.88rem; border-radius: 10px; font-weight: 600; } #agendaModal .amti-inline-actions .amti-btn-primary { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 80%, #818cf8)); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25); } .amti-table tbody tr { user-select: none; -webkit-user-select: none; cursor: pointer; } .amti-table tbody tr.amti-selected td, .amti-table tbody tr.selected td, tbody tr.amti-selected td, tbody tr.selected td { background-color: rgba(56, 189, 248, 0.20) !important; border-bottom-color: rgba(56, 189, 248, 0.35) !important; } .amti-table tbody tr.amti-selected td:first-child, .amti-table tbody tr.selected td:first-child, tbody tr.amti-selected td:first-child, tbody tr.selected td:first-child { box-shadow: inset 4px 0 0 var(--primary, #38bdf8) !important; } html[data-theme='light'] .amti-table tbody tr.amti-selected td, html[data-theme='light'] tbody tr.selected td { background-color: rgba(56, 189, 248, 0.18) !important; } html[data-theme='block-light'] .amti-table tbody tr.amti-selected td, html[data-theme='block-light'] tbody tr.selected td { background-color: rgba(56, 189, 248, 0.18) !important; border-bottom-color: rgba(56, 189, 248, 0.35) !important; } html[data-theme='dark-block'] .amti-table tbody tr.amti-selected td, html[data-theme='dark-block'] tbody tr.selected td { background-color: rgba(56, 189, 248, 0.22) !important; border-bottom-color: rgba(56, 189, 248, 0.40) !important; } .os-modal-section-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--bg-input); border-bottom: 1px solid var(--border-color); border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; } html[data-theme] .os-modal-section--internal .os-modal-section-header, html .os-modal-section--internal .os-modal-section-header, .os-modal-section--internal .os-modal-section-header { background: linear-gradient(90deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.04) 100%) !important; border-bottom: 1px solid rgba(245, 158, 11, 0.25) !important; } .os-modal-section-header i { font-size: 0.85rem; width: 16px; text-align: center; } .os-modal-section-body { padding: 14px; } .os-modal-section-body .amti-form-row:last-child, .os-modal-section-body .amti-form-group:last-child { margin-bottom: 0; } /* Tables styling */ .amti-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; } .amti-table th { position: relative; background-color: rgba(255, 255, 255, 0.02); padding: 10px 14px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); } .amti-table td { padding: 10px 14px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); } /* Alinha a coluna de ações ao topo para que o botão de opções fique abaixo do cabeçalho */ .amti-table td:last-child { vertical-align: top; display: flex; align-items: flex-start; /* alinhar conteúdo ao topo da célula */ justify-content: flex-end; /* manter botão à direita */ } .amti-table tr:last-child td { border-bottom: none; } .amti-table tr:hover td { background-color: rgba(255, 255, 255, 0.01); } .amti-table tbody tr.amti-selected td { background-color: rgba(56, 189, 248, 0.08); border-bottom-color: rgba(56, 189, 248, 0.15); } .amti-table tbody tr.amti-selected td:first-child { box-shadow: inset 3px 0 0 var(--primary, #38bdf8); } html[data-theme='light'] .amti-table tbody tr.amti-selected td { background-color: rgba(56, 189, 248, 0.08); } html[data-theme='block-light'] .amti-table tbody tr.amti-selected td { background-color: rgba(56, 189, 248, 0.08) !important; border-bottom-color: rgba(56, 189, 248, 0.15) !important; } html[data-theme='dark-block'] .amti-table tbody tr.amti-selected td { background-color: rgba(56, 189, 248, 0.10) !important; border-bottom-color: rgba(56, 189, 248, 0.18) !important; } /* Universal rule: All tables inside cards occupy 100% horizontally, automatically */ .amti-grid-card table, .amti-card table, .os-card table, .agenda-card table, .amti-table-container table, .os-table-wrap table, .table-responsive table, .crm-table-wrap table, .amti-table { width: 100% !important; min-width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .amti-grid-card .amti-table-container, .amti-grid-card .os-table-wrap, .amti-card .amti-table-container, .amti-card .os-table-wrap, .os-card .os-table-wrap { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .amti-table.os-table { table-layout: fixed; /* keep column widths stable */ } .amti-table.os-table th, .amti-table.os-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .amti-table .amti-table-resizer { position: absolute; top: 0; right: -2px; width: 8px; height: 100%; cursor: col-resize; opacity: 0; transition: opacity 140ms ease; z-index: 3; pointer-events: auto; } .amti-table .amti-table-resizer::before { content: ''; position: absolute; inset: 0 3px 0 auto; width: 1px; background: rgba(255, 255, 255, 0.22); opacity: 0; transition: opacity 140ms ease; } .amti-table th:hover .amti-table-resizer, .amti-table th.is-resizing .amti-table-resizer, .amti-table .amti-table-resizer:hover { opacity: 1; } .amti-table th:hover .amti-table-resizer::before, .amti-table th.is-resizing .amti-table-resizer::before, .amti-table .amti-table-resizer:hover::before { opacity: 1; } /* Suggested column distribution for orders tables (adjustable) */ .amti-table.os-table th:nth-child(1), .amti-table.os-table td:nth-child(1) { width: 112px; } .amti-table.os-table th:nth-child(2), .amti-table.os-table td:nth-child(2) { width: 250px; min-width: 140px; } .amti-table.os-table th:nth-child(3), .amti-table.os-table td:nth-child(3) { width: auto; min-width: 160px; } .amti-table.os-table th:nth-child(4), .amti-table.os-table td:nth-child(4) { width: 110px; } .amti-table.os-table th:nth-child(5), .amti-table.os-table td:nth-child(5) { width: 120px; } .amti-table.os-table th:nth-child(6), .amti-table.os-table td:nth-child(6) { width: 160px; min-width: 120px; } .amti-table.os-table th:nth-child(7), .amti-table.os-table td:nth-child(7) { width: 70px; } /* Column widths for generic tables (stock, finance, services) */ .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table):not(#closingSituationsTable):not(#paymentMethodsTable):not(#osStatusesTable) { table-layout: fixed; min-width: 760px; } /* Stock (6 cols): Cód, Nome, Categoria, Estoque, Preço, Lote */ .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) th:nth-child(1), .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) td:nth-child(1) { width: 70px; } .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) th:nth-child(2), .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) td:nth-child(2) { width: 26%; } .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) th:nth-child(3), .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) td:nth-child(3) { width: 16%; } .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) th:nth-child(4), .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) td:nth-child(4) { width: 90px; } .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) th:nth-child(5), .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) td:nth-child(5) { width: 120px; } .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) th:nth-child(6), .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) td:nth-child(6) { width: 20%; } .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) th:nth-child(7):last-child, .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) td:nth-child(7):last-child { width: 90px; } /* Finance (7 cols): Cód, Tipo, Categoria, Descrição, Valor, Vencimento, Status */ .amti-table-container.amti-finance-list .amti-table th:nth-child(8):last-child, .amti-table-container.amti-finance-list .amti-table td:nth-child(8):last-child { width: 90px; } /* Services (4 cols): Nome, Local, Valor, Observação */ #tab-services .amti-table-container .amti-table th:nth-child(5):last-child, #tab-services .amti-table-container .amti-table td:nth-child(5):last-child { width: 90px; } #tab-services .amti-table-container .amti-table { min-width: 560px; } /* Finance list: fixed card height with vertical scrolling */ .amti-table-container.amti-finance-list { max-height: 185px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Orders page: Gerenciamento de OS - altura máxima e barra de rolagem estilizada */ .amti-table-container.amti-orders-list { max-height: 420px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Normalize column behavior for all table containers: prevent unintended line-wrapping that breaks visual alignment, and use ellipsis when content is longer than the available column width. Keep horizontal scroll if needed. */ .amti-table-container .amti-table th, .amti-table-container .amti-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Dense ERP tables: keep columns proportional and actions visible. */ .amti-table-container { max-width: 100%; scrollbar-gutter: stable; user-select: none; cursor: default; } .amti-table-container.amti-grabbing { cursor: grabbing !important; } .amti-table-container.amti-grabbing * { cursor: grabbing !important; user-select: none !important; } /* Botões e links dentro da tabela mantêm cursor pointer */ .amti-table-container button, .amti-table-container a, .amti-table-container input, .amti-table-container select, .amti-table-container textarea, .amti-table-container .amti-btn, .amti-table-container [role="button"] { cursor: pointer; } .amti-table-container.amti-grabbing button, .amti-table-container.amti-grabbing a, .amti-table-container.amti-grabbing input, .amti-table-container.amti-grabbing select, .amti-table-container.amti-grabbing textarea, .amti-table-container.amti-grabbing .amti-btn, .amti-table-container.amti-grabbing [role="button"] { cursor: grabbing !important; pointer-events: none; } .amti-table { table-layout: fixed; width: 100%; } .amti-table th, .amti-table td { min-width: 0; vertical-align: middle; line-height: 1.25; } .amti-table td:last-child { display: table-cell; vertical-align: middle; } .amti-table .col-code { width: 86px; } .amti-table .os-number-cell, .amti-table.os-table td.os-number-cell { width: 112px; min-width: 112px; white-space: nowrap; overflow: visible; text-overflow: clip; } .amti-table .col-main { font-weight: 500; } .clients-table { min-width: 860px; } .clients-table th:nth-child(1), .clients-table td:nth-child(1) { width: 90px; } .clients-table th:nth-child(2), .clients-table td:nth-child(2) { width: 34%; } .clients-table th:nth-child(3), .clients-table td:nth-child(3) { width: 180px; } .clients-table th:nth-child(4), .clients-table td:nth-child(4) { width: 170px; } .clients-table th:nth-child(5), .clients-table td:nth-child(5) { width: 24%; } .clients-table th:nth-child(6), .clients-table td:nth-child(6) { width: 120px; } .equipments-table { min-width: 900px; } .equipments-table th:nth-child(1), .equipments-table td:nth-child(1) { width: 90px; } .equipments-table th:nth-child(2), .equipments-table td:nth-child(2) { width: 30%; } .equipments-table th:nth-child(3), .equipments-table td:nth-child(3) { width: 18%; } .equipments-table th:nth-child(4), .equipments-table td:nth-child(4) { width: 26%; } .equipments-table th:nth-child(5), .equipments-table td:nth-child(5) { width: 18%; } .equipments-table th:nth-child(6), .equipments-table td:nth-child(6) { width: 120px; } .amti-table.os-table { min-width: 1120px; } .amti-table.os-active-table th, .amti-table.os-active-table td, .amti-table.os-finalized-table th, .amti-table.os-finalized-table td, .clients-table th, .clients-table td, .equipments-table th, .equipments-table td { max-width: none; } .amti-table.os-active-table th:nth-child(1), .amti-table.os-active-table td:nth-child(1) { width: 112px; } .amti-table.os-active-table th:nth-child(2), .amti-table.os-active-table td:nth-child(2) { width: auto; } .amti-table.os-active-table th:nth-child(3), .amti-table.os-active-table td:nth-child(3) { width: 150px; } .amti-table.os-active-table th:nth-child(4), .amti-table.os-active-table td:nth-child(4) { width: auto; } .amti-table.os-active-table th:nth-child(5), .amti-table.os-active-table td:nth-child(5) { width: 130px; } .amti-table.os-active-table th:nth-child(6), .amti-table.os-active-table td:nth-child(6) { width: 130px; } .amti-table.os-active-table th:nth-child(7), .amti-table.os-active-table td:nth-child(7) { width: 190px; } .amti-table.os-active-table th:nth-child(8), .amti-table.os-active-table td:nth-child(8) { width: 86px; text-align: right; } .amti-table.os-finalized-table { min-width: 1220px; } .amti-table.os-finalized-table th:nth-child(1), .amti-table.os-finalized-table td:nth-child(1) { width: 112px; } .amti-table.os-finalized-table th:nth-child(2), .amti-table.os-finalized-table td:nth-child(2) { width: auto; } .amti-table.os-finalized-table th:nth-child(3), .amti-table.os-finalized-table td:nth-child(3) { width: 150px; } .amti-table.os-finalized-table th:nth-child(4), .amti-table.os-finalized-table td:nth-child(4) { width: auto; } .amti-table.os-finalized-table th:nth-child(5), .amti-table.os-finalized-table td:nth-child(5) { width: 170px; } .amti-table.os-finalized-table th:nth-child(6), .amti-table.os-finalized-table td:nth-child(6) { width: 170px; } .amti-table.os-finalized-table th:nth-child(7), .amti-table.os-finalized-table td:nth-child(7) { width: 130px; } .amti-table.os-finalized-table th:nth-child(8), .amti-table.os-finalized-table td:nth-child(8) { width: 190px; } .amti-reopen-btn { min-width: 112px; } @media (max-width: 1200px) { .amti-table.os-table { min-width: 1000px; } .amti-table.os-active-table { min-width: 960px; } .amti-table.os-finalized-table { min-width: 1060px; } .clients-table { min-width: 760px; } .equipments-table { min-width: 800px; } } @media (max-width: 1100px) { .amti-table th, .amti-table td { padding-left: 14px; padding-right: 14px; } .amti-table.os-table { min-width: 880px; } .amti-table.os-active-table { min-width: 840px; } .amti-table.os-finalized-table { min-width: 920px; } .clients-table { min-width: 660px; } .equipments-table { min-width: 700px; } .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) { min-width: 700px; } } @media (max-width: 900px) { .ai-advisor-top-grid { flex-direction: column; height: auto; } .ai-advisor-messages, .ai-advisor-suggestions { max-height: 40vh; } .ai-advisor-chat-header { padding-left: 12px; padding-right: 12px; } .amti-table.os-table { table-layout: fixed; } .view-os-cards { grid-template-columns: 1fr; } .amti-table-container.amti-finance-list { max-height: 240px; } .amti-table-container.amti-orders-list { max-height: 280px; } .amti-table-container .amti-table th, .amti-table-container .amti-table td { white-space: normal; text-overflow: clip; } .amti-table th, .amti-table td { padding: 10px 10px; font-size: 0.82rem; } .clients-table { min-width: 680px; } .equipments-table { min-width: 720px; } .amti-table.os-table { min-width: 720px; } .amti-table.os-active-table { min-width: 680px; } .amti-table.os-finalized-table { min-width: 760px; } .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) { min-width: 590px; } } @media (max-width: 700px) { .amti-table-container { border-radius: 6px; } .amti-table th, .amti-table td { padding: 8px 8px; white-space: nowrap; text-overflow: ellipsis; font-size: 0.75rem; } .clients-table { min-width: 600px; } .equipments-table { min-width: 620px; } .amti-table.os-table { min-width: 620px; } .amti-table.os-active-table { min-width: 580px; } .amti-table.os-finalized-table { min-width: 640px; } .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) { min-width: 500px; } .amti-reopen-btn span { display: none; } .amti-reopen-btn { min-width: 36px; } .amti-table-container .amti-table th, .amti-table-container .amti-table td { padding: 6px 6px; } } @media (max-width: 480px) { .amti-table-container { border-radius: 4px; } .amti-table th, .amti-table td { padding: 5px 5px; font-size: 0.7rem; white-space: nowrap; text-overflow: ellipsis; } .clients-table { min-width: 440px; } .equipments-table { min-width: 460px; } .amti-table.os-table { min-width: 460px; } .amti-table.os-active-table { min-width: 440px; } .amti-table.os-finalized-table { min-width: 480px; } .amti-table-container .amti-table:not(.os-table):not(.clients-table):not(.equipments-table) { min-width: 480px; } #tab-services .amti-table-container .amti-table { min-width: 360px; } .amti-reopen-btn { min-width: 30px; padding: 4px 6px; } .amti-reopen-btn i { font-size: 0.8rem; } .amti-grid-card.os-card { padding: 10px; } .amti-grid-card.os-card .os-table thead th, .amti-grid-card.os-card .os-table tbody td { padding: 4px 4px; font-size: 0.7rem; } .amti-grid-card.os-card .os-table-wrap { overflow-x: auto; } } /* Status Pills */ .amti-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; } /* Tom de status: cor semântica derivada do dado de domínio (3º elemento da tupla em industry-os-statuses.js), não um seletor por status. Cobre os ~101 status das 12 atividades não-TI, que antes herdam a cor de `.amti-badge` genérica por não terem regra própria. FICA ANTES das regras por id de propósito: quando ambas casam, a regra específica por id (mais abaixo) vence e preserva a paleta já revisada. */ .amti-badge-tone-received { background-color: rgba(255, 255, 255, 0.06); color: var(--text-secondary); } .amti-badge-tone-progress { background-color: rgba(59, 130, 246, 0.1); color: var(--color-blue); } .amti-badge-tone-wait { background-color: rgba(245, 158, 11, 0.1); color: var(--color-amber); } .amti-badge-tone-approved { background-color: rgba(16, 185, 129, 0.1); color: var(--color-emerald); } .amti-badge-tone-done { background-color: rgba(16, 182, 129, 0.18); color: var(--color-emerald); } .amti-badge-tone-warn { background-color: rgba(249, 115, 22, 0.12); color: var(--color-orange); } .amti-badge-tone-cancel { background-color: rgba(244, 63, 94, 0.1); color: var(--color-rose); } .amti-badge-pendente { background-color: rgba(255, 255, 255, 0.06); color: var(--text-secondary); } .amti-badge-em_andamento, .amti-badge-em_analise_orcamento { background-color: rgba(255, 255, 255, 0.06); color: var(--text-secondary); } .amti-badge-aguardando_orcamento { background-color: rgba(59, 130, 246, 0.1); color: var(--color-blue); } .amti-badge-aguardando_autorizacao, .amti-badge-aguardando_autorizacao_cliente_avisado { background-color: rgba(245, 158, 11, 0.1); color: var(--color-amber); } .amti-badge-aguardando_pecas { background-color: rgba(245, 158, 11, 0.1); color: var(--color-amber); } .amti-badge-servico_aprovado, .amti-badge-aprovada { background-color: rgba(16, 185, 129, 0.1); color: var(--color-emerald); } .amti-badge-orcamento_nao_autorizado, .amti-badge-orcamento_nao_autorizado_fechamento { background-color: rgba(244, 63, 94, 0.1); color: var(--color-rose); } .amti-badge-nao_apresentou_defeito { background-color: rgba(245, 158, 11, 0.1); color: var(--color-amber); } .amti-badge-finalizada, .amti-badge-aparelho_pronto, .amti-badge-concluida_entregue { background-color: rgba(16, 182, 129, 0.1); color: var(--color-emerald); } .amti-badge-cancelada, .amti-badge-sem_conserto_condenado, .amti-badge-devolvido_sem_conserto { background-color: rgba(244, 63, 94, 0.1); color: var(--color-rose); } .amti-badge-aparelho_doado { background-color: rgba(139, 92, 246, 0.1); color: var(--color-violet); } .amti-badge-aparelho_abandonado { background-color: rgba(249, 115, 22, 0.1); color: var(--color-orange); } .amti-badge-garantia { background-color: rgba(6, 182, 212, 0.1); color: var(--color-cyan); } /* Modal styles */ @keyframes amti-modal-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes amti-modal-zoom-in { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } .amti-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 9999; display: flex; align-items: center; justify-content: center; animation: amti-modal-fade-in 0.24s ease-out; transform: translateZ(0); contain: layout paint; } .amti-modal.amti-modal-transitioning, .amti-modal.amti-modal-transitioning .amti-modal-content, .amti-modal.amti-modal-handoff-settled, .amti-modal.amti-modal-handoff-settled .amti-modal-content { animation: none !important; } .amti-modal-content { background: var(--card-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-glow); border-radius: 20px; width: 90%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; position: relative; animation: amti-modal-zoom-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); color: var(--text-primary); } .amti-modal-content::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(56, 189, 248, 0.04), transparent 26%, transparent 74%, rgba(129, 140, 248, 0.04)); pointer-events: none; } .amti-modal-header { padding: 18px 24px; border-bottom: 1px solid var(--border-color); display: flex; background: var(--surface-strong); justify-content: space-between; align-items: center; flex-shrink: 0; } .amti-modal-header h3 { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; } .amti-modal-body { padding: 24px; overflow-y: auto; flex: 1; min-height: 0; background: var(--bg-card-soft); /* Firefox Scrollbar */ scrollbar-width: thin; scrollbar-color: rgba(150, 150, 150, 0) transparent; } .amti-modal-body:hover { scrollbar-color: rgba(150, 150, 150, 0.4) transparent; } /* Webkit Scrollbar */ .amti-modal-body::-webkit-scrollbar { width: 8px; } .amti-modal-body::-webkit-scrollbar-track { background: transparent; border-radius: 8px; } .amti-modal-body::-webkit-scrollbar-thumb { background-color: rgba(150, 150, 150, 0) !important; border-radius: 8px; background-clip: padding-box; } .amti-modal-body:hover::-webkit-scrollbar-thumb { background-color: rgba(150, 150, 150, 0.4) !important; } .amti-modal-body:hover::-webkit-scrollbar-thumb:hover { background-color: rgba(150, 150, 150, 0.7) !important; } /* ── Barra de rolagem padrão do Dashboard para Campos de Digitação (Textarea / Multi-line Inputs) ── */ textarea.amti-form-control, textarea, .amti-textarea, .zn-textarea, .os-textarea { overflow-y: auto !important; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; } textarea.amti-form-control::-webkit-scrollbar, textarea::-webkit-scrollbar, .amti-textarea::-webkit-scrollbar, .zn-textarea::-webkit-scrollbar, .os-textarea::-webkit-scrollbar { width: 6px !important; height: 6px !important; display: block !important; } textarea.amti-form-control::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track, .amti-textarea::-webkit-scrollbar-track, .zn-textarea::-webkit-scrollbar-track, .os-textarea::-webkit-scrollbar-track { background: transparent !important; } textarea.amti-form-control::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, .amti-textarea::-webkit-scrollbar-thumb, .zn-textarea::-webkit-scrollbar-thumb, .os-textarea::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.22) !important; border-radius: 6px !important; transition: background-color 0.2s ease, opacity 0.2s ease; } textarea.amti-form-control:hover::-webkit-scrollbar-thumb, textarea:hover::-webkit-scrollbar-thumb, textarea.amti-form-control:focus::-webkit-scrollbar-thumb, textarea:focus::-webkit-scrollbar-thumb, .amti-textarea:hover::-webkit-scrollbar-thumb, .zn-textarea:hover::-webkit-scrollbar-thumb, .os-textarea:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.38) !important; } textarea.amti-form-control::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover, .amti-textarea::-webkit-scrollbar-thumb:hover, .zn-textarea::-webkit-scrollbar-thumb:hover, .os-textarea::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.55) !important; } /* Suporte aos temas claros (Light Mode / Block Light) */ html[data-theme='light'] textarea.amti-form-control, html[data-theme='light'] textarea, html[data-theme='block-light'] textarea.amti-form-control, html[data-theme='block-light'] textarea, body.theme-light textarea.amti-form-control, body.theme-light textarea { scrollbar-color: rgba(15, 23, 42, 0.22) transparent; } html[data-theme='light'] textarea.amti-form-control::-webkit-scrollbar-thumb, html[data-theme='light'] textarea::-webkit-scrollbar-thumb, html[data-theme='block-light'] textarea.amti-form-control::-webkit-scrollbar-thumb, html[data-theme='block-light'] textarea::-webkit-scrollbar-thumb, body.theme-light textarea.amti-form-control::-webkit-scrollbar-thumb, body.theme-light textarea::-webkit-scrollbar-thumb { background-color: rgba(15, 23, 42, 0.22) !important; } html[data-theme='light'] textarea.amti-form-control:hover::-webkit-scrollbar-thumb, html[data-theme='light'] textarea:hover::-webkit-scrollbar-thumb, html[data-theme='light'] textarea.amti-form-control:focus::-webkit-scrollbar-thumb, html[data-theme='light'] textarea:focus::-webkit-scrollbar-thumb, html[data-theme='block-light'] textarea.amti-form-control:hover::-webkit-scrollbar-thumb, html[data-theme='block-light'] textarea:hover::-webkit-scrollbar-thumb, body.theme-light textarea.amti-form-control:hover::-webkit-scrollbar-thumb, body.theme-light textarea:hover::-webkit-scrollbar-thumb { background-color: rgba(15, 23, 42, 0.40) !important; } .amti-modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-color); display: flex; background: var(--surface-strong); justify-content: flex-end; gap: 12px; flex-shrink: 0; } .amti-modal-content > form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .amti-modal-content > form > .amti-modal-body { flex: 1; min-height: 0; } .amti-modal-content > form > .amti-modal-footer { flex-shrink: 0; } .amti-modal-close { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); padding: 0; } .amti-modal-close i { font-size: 13px; line-height: 1; display: inline-block; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .amti-modal-close:hover { background: rgba(239, 68, 68, 0.12) !important; border-color: rgba(239, 68, 68, 0.25) !important; color: #ef4444 !important; transform: scale(1.08); box-shadow: 0 0 12px rgba(239, 68, 68, 0.2); } .amti-modal-close:hover i { transform: rotate(90deg); } .amti-modal-close:active { transform: scale(0.95); background: rgba(239, 68, 68, 0.22) !important; } .hidden { display: none !important; } /* AI Advisor Chat styles */ .ai-advisor-layout { display: flex; flex-direction: column; gap: 16px; min-height: auto; padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Visualização detalhada da Ordem de Serviço */ /* ============================================= VIEW OS — Modernized ============================================= */ .view-os-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 16px; transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .view-os-hero-info { flex: 1; min-width: 0; } .view-os-hero-info h3 { margin: 4px 0; font-size: 1.25rem; color: var(--text-primary); } .view-os-hero-badge { margin-bottom: 4px; } .view-os-hero-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.85rem; color: var(--text-secondary); } .view-os-hero-meta span { display: inline-flex; align-items: center; gap: 4px; } .view-os-hero-total { text-align: right; min-width: 160px; } .view-os-total-label { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 2px; } .view-os-total-value { font-weight: 700; font-size: 1.55rem; color: var(--primary); line-height: 1.1; } .view-os-total-sinal { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border-soft); } /* Hero priority variants — glass gradient */ .view-os-hero.hero-priority-sem-pressa { background: linear-gradient(135deg, rgba(148,163,184,0.08) 0%, rgba(148,163,184,0.03) 100%); border-color: rgba(148,163,184,0.18); } .view-os-hero.hero-priority-alta { background: linear-gradient(135deg, rgba(255,192,203,0.14) 0%, rgba(255,192,203,0.05) 60%, transparent 100%); border-color: rgba(255,192,203,0.30); box-shadow: 0 0 24px rgba(255,192,203,0.08), inset 0 1px 0 rgba(255,192,203,0.10); } .view-os-hero.hero-priority-garantia { background: linear-gradient(135deg, rgba(250,204,21,0.16) 0%, rgba(250,204,21,0.05) 60%, transparent 100%); border-color: rgba(250,204,21,0.34); box-shadow: 0 0 24px rgba(250,204,21,0.08), inset 0 1px 0 rgba(250,204,21,0.10); } .view-os-hero.hero-priority-atraso { background: linear-gradient(135deg, rgba(255,0,0,0.12) 0%, rgba(255,0,0,0.04) 60%, transparent 100%); border-color: rgba(255,60,60,0.30); box-shadow: 0 0 26px rgba(255,0,0,0.10), inset 0 1px 0 rgba(255,0,0,0.12); animation: hero-pulse-atraso 3s ease-in-out infinite; } @keyframes hero-pulse-atraso { 0%, 100% { border-color: rgba(255, 60, 60, 0.25); opacity: 0.92; } 50% { border-color: rgba(255, 60, 60, 0.55); opacity: 1; } } /* Priority badge in hero */ .view-os-priority-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; text-align: right; justify-content: flex-end; } .view-os-priority-badge.prio-sem-pressa { background: rgba(148,163,184,0.10); color: rgba(148,163,184,0.7); border: 1px solid rgba(148,163,184,0.12); } .view-os-priority-badge.prio-alta { background: linear-gradient(135deg, rgba(255,192,203,0.18), rgba(255,192,203,0.08)); color: #ffb3c6; border: 1px solid rgba(255,192,203,0.20); box-shadow: 0 0 10px rgba(255,192,203,0.08); } .view-os-priority-badge.prio-garantia { background: linear-gradient(135deg, rgba(250,204,21,0.18), rgba(250,204,21,0.08)); color: #facc15; border: 1px solid rgba(250,204,21,0.24); box-shadow: 0 0 10px rgba(250,204,21,0.08); } .view-os-priority-badge.prio-atraso { background: linear-gradient(135deg, rgba(255,0,0,0.16), rgba(255,0,0,0.06)); color: #ff6b6b; border: 1px solid rgba(255,60,60,0.20); box-shadow: 0 0 10px rgba(255,0,0,0.08); } /* Light theme hero priority */ html[data-theme='light'] .view-os-hero.hero-priority-sem-pressa { background: linear-gradient(135deg, rgba(148,163,184,0.06) 0%, rgba(148,163,184,0.02) 100%); border-color: rgba(148,163,184,0.20); } html[data-theme='light'] .view-os-hero.hero-priority-alta { background: linear-gradient(135deg, rgba(255,192,203,0.10) 0%, rgba(255,192,203,0.03) 60%, transparent 100%); border-color: rgba(220,140,160,0.28); box-shadow: 0 0 20px rgba(255,192,203,0.06); } html[data-theme='light'] .view-os-hero.hero-priority-garantia { background: linear-gradient(135deg, rgba(250,204,21,0.13) 0%, rgba(250,204,21,0.04) 60%, transparent 100%); border-color: rgba(202,138,4,0.30); box-shadow: 0 0 20px rgba(250,204,21,0.06); } html[data-theme='light'] .view-os-hero.hero-priority-atraso { background: linear-gradient(135deg, rgba(255,0,0,0.08) 0%, rgba(255,0,0,0.03) 60%, transparent 100%); border-color: rgba(220,40,40,0.28); box-shadow: 0 0 20px rgba(255,0,0,0.06); } html[data-theme='light'] .view-os-priority-badge.prio-sem-pressa { background: rgba(148,163,184,0.08); color: rgba(100,116,139,0.7); border-color: rgba(148,163,184,0.15); } html[data-theme='light'] .view-os-priority-badge.prio-alta { background: linear-gradient(135deg, rgba(255,192,203,0.12), rgba(255,192,203,0.04)); color: #c4607a; border-color: rgba(220,140,160,0.18); } html[data-theme='light'] .view-os-priority-badge.prio-garantia { background: linear-gradient(135deg, rgba(250,204,21,0.16), rgba(250,204,21,0.06)); color: #8a6500; border-color: rgba(202,138,4,0.25); } html[data-theme='light'] .view-os-priority-badge.prio-atraso { background: linear-gradient(135deg, rgba(255,0,0,0.10), rgba(255,0,0,0.03)); color: #c02020; border-color: rgba(220,40,40,0.18); } .view-os-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .view-os-card { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card-soft); overflow: hidden; } .view-os-card-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 700; font-size: 0.9rem; color: var(--text-primary); background: var(--bg-surface); border-bottom: 1px solid var(--border-color); } .view-os-card-header i { color: var(--text-secondary); font-size: 0.95rem; } .view-os-card-body { padding: 12px 14px; } .view-os-row { display: flex; gap: 8px; padding: 5px 0; font-size: 0.93rem; line-height: 1.4; align-items: baseline; } .view-os-row + .view-os-row { border-top: 1px solid rgba(148,163,184,0.04); } .view-os-label { flex: 0 0 110px; font-weight: 600; color: var(--text-secondary); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; padding-top: 1px; } .view-os-row > span:last-child { flex: 1; min-width: 0; word-break: break-word; } .view-os-block { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card-soft); margin-bottom: 12px; overflow: hidden; } .view-os-block-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 700; font-size: 0.9rem; color: var(--text-primary); background: var(--bg-surface); border-bottom: 1px solid var(--border-color); } .view-os-block-header i { color: var(--text-secondary); font-size: 0.95rem; } .view-os-block-body { padding: 12px 14px; font-size: 0.93rem; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; } .view-os-items-table { width: 100%; border-collapse: collapse; } .view-os-items-table th { text-align: left; padding: 10px 14px; font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); } .view-os-items-table td { padding: 10px 14px; vertical-align: top; color: var(--text-primary); font-size: 0.93rem; border-top: 1px solid rgba(148,163,184,0.06); } .view-os-items-table .t-qty { text-align: center; font-weight: 600; } .view-os-items-table .t-unit, .view-os-items-table .t-sub { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .view-os-totals { padding: 12px 14px; border-top: 1px solid var(--border-color); background: var(--bg-surface); } .view-os-totals-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 0.9rem; color: var(--text-primary); } .view-os-totals-row + .view-os-totals-row { border-top: 1px solid rgba(148,163,184,0.04); } .view-os-totals-row-grand { font-weight: 700; font-size: 1.05rem; color: var(--primary); padding: 8px 0 0 0; margin-top: 4px; border-top: 2px solid var(--border-color) !important; } .ai-advisor-top-grid { display: flex; gap: 24px; height: 75vh; min-height: 400px; } .ai-advisor-chat { flex: 2; display: flex; flex-direction: column; overflow: hidden; } .ai-advisor-messages { flex: 1; padding: 12px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } /* Modern discrete scrollbars */ /* Chat messages scrollbar is always visible */ .ai-advisor-messages { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; } .ai-advisor-messages::-webkit-scrollbar { width: 6px; } .ai-advisor-messages::-webkit-scrollbar-track { background: transparent; } .ai-advisor-messages::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12)); border-radius: var(--radius-md); border: 2px solid transparent; background-clip: padding-box; } .ai-advisor-messages::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); } /* Suggestions card: scrollable with hover-only scrollbar */ .ai-sugg-list { flex: 1; } .ai-advisor-suggestions { flex: 1; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; } .ai-advisor-suggestions::-webkit-scrollbar { width: 6px; } .ai-advisor-suggestions::-webkit-scrollbar-track { background: transparent; } .ai-advisor-suggestions::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--radius-md); border: 2px solid transparent; background-clip: padding-box; transition: background-color 200ms ease; } .ai-advisor-suggestions:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); } .ai-advisor-suggestions:hover { scrollbar-color: rgba(255,255,255,0.12) transparent; } html[data-theme='light'] .ai-advisor-suggestions:hover::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.10); } html[data-theme='light'] .ai-advisor-suggestions:hover { scrollbar-color: rgba(15,23,42,0.10) transparent; } .ai-advisor-top-grid { align-items: stretch; min-height: 65vh; } /* Global — barras de rolagem invisíveis até hover para todos os cards e tabelas */ .amti-card .amti-card-body, .amti-grid-card .amti-card-body, .amti-card .amti-table-container, .amti-grid-card .amti-table-container { overflow: auto; overflow-x: auto; overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; /* Firefox: hide by default */ /* invisível por padrão — aparece somente no hover */ --scroll-thumb-default: transparent; --scroll-thumb-hover: rgba(255,255,255,0.06); } .amti-card .amti-card-body::-webkit-scrollbar, .amti-grid-card .amti-card-body::-webkit-scrollbar, .amti-card .amti-table-container::-webkit-scrollbar, .amti-grid-card .amti-table-container::-webkit-scrollbar { width: 4px; height: 4px; } .amti-card .amti-card-body::-webkit-scrollbar-track, .amti-grid-card .amti-card-body::-webkit-scrollbar-track, .amti-card .amti-table-container::-webkit-scrollbar-track, .amti-grid-card .amti-table-container::-webkit-scrollbar-track { background: transparent; } .amti-card .amti-card-body::-webkit-scrollbar-thumb, .amti-grid-card .amti-card-body::-webkit-scrollbar-thumb, .amti-card .amti-table-container::-webkit-scrollbar-thumb, .amti-grid-card .amti-table-container::-webkit-scrollbar-thumb { background: var(--scroll-thumb-default); border-radius: var(--radius-md); border: 1px solid transparent; background-clip: padding-box; transition: background-color 160ms ease, opacity 160ms ease; opacity: 0; /* invisível até hover */ filter: none; } /* Mostrar thumb apenas no card marcado com a classe `scroll-hover` ou no :hover */ .amti-card.scroll-hover .amti-card-body::-webkit-scrollbar-thumb, .amti-grid-card.scroll-hover .amti-card-body::-webkit-scrollbar-thumb, .amti-card.scroll-hover .amti-table-container::-webkit-scrollbar-thumb, .amti-grid-card.scroll-hover .amti-table-container::-webkit-scrollbar-thumb, .amti-card:hover .amti-card-body::-webkit-scrollbar-thumb, .amti-grid-card:hover .amti-card-body::-webkit-scrollbar-thumb, .amti-card:hover .amti-table-container::-webkit-scrollbar-thumb, .amti-grid-card:hover .amti-table-container::-webkit-scrollbar-thumb { background: var(--scroll-thumb-hover); opacity: 1; } /* Light theme: use subtle dark thumb instead */ html[data-theme='light'] .amti-card .amti-card-body, html[data-theme='light'] .amti-grid-card .amti-card-body, html[data-theme='light'] .amti-card .amti-table-container, html[data-theme='light'] .amti-grid-card .amti-table-container { --scroll-thumb-default: transparent; --scroll-thumb-hover: rgba(15,23,42,0.06); scrollbar-color: transparent transparent; } /* Firefox: mostrar thumb apenas no card com classe `scroll-hover` ou no :hover */ html[data-theme='light'] .amti-card.scroll-hover .amti-card-body, html[data-theme='light'] .amti-grid-card.scroll-hover .amti-card-body, html[data-theme='light'] .amti-card.scroll-hover .amti-table-container, html[data-theme='light'] .amti-grid-card.scroll-hover .amti-table-container, html[data-theme='light'] .amti-card:hover .amti-card-body, html[data-theme='light'] .amti-grid-card:hover .amti-card-body, html[data-theme='light'] .amti-card:hover .amti-table-container, html[data-theme='light'] .amti-grid-card:hover .amti-table-container, .amti-card.scroll-hover .amti-card-body, .amti-grid-card.scroll-hover .amti-card-body, .amti-card.scroll-hover .amti-table-container, .amti-grid-card.scroll-hover .amti-table-container, .amti-card:hover .amti-card-body, .amti-grid-card:hover .amti-card-body, .amti-card:hover .amti-table-container, .amti-grid-card:hover .amti-table-container { scrollbar-color: var(--scroll-thumb-hover) transparent; } .ai-advisor-chat, .ai-advisor-suggestions { min-height: 0; height: 100%; } /* Chat header actions */ .ai-advisor-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 0 16px; } .ai-chat-title { font-weight:600; color:var(--text-secondary); font-size:0.95rem; } .ai-chat-actions { display:flex; gap:8px; align-items:center; } .ai-chat-action-btn { background: transparent; border: 1px solid transparent; color: var(--text-secondary); padding: 8px; border-radius: 8px; cursor: pointer; display:inline-flex; align-items:center; justify-content:center; transition: all 0.14s ease; } .ai-chat-action-btn i { font-size:0.95rem; } .ai-chat-action-btn:hover { background: rgba(255,255,255,0.02); color: var(--text-primary); transform: translateY(-1px); border-color: rgba(255,255,255,0.04); } .ai-msg { position: relative; max-width: 80%; padding: 12px 16px; /* Balões discretos, com cantos quase quadrados para acompanhar o estilo do painel. */ border-radius: 5px; font-size: 0.95rem; line-height: 1.5; box-shadow: 0 2px 8px rgba(0,0,0,0.15); white-space: pre-wrap; } .ai-msg.user { background-color: rgba(71, 85, 105, 0.42); border: 1px solid rgba(148, 163, 184, 0.34); color: var(--text-primary); align-self: flex-end; border-bottom-right-radius: 1px; } .ai-msg.bot { background-color: rgba(14, 74, 89, 0.38); border: 1px solid rgba(56, 189, 210, 0.24); color: var(--text-primary); align-self: flex-start; border-bottom-left-radius: 1px; } /* =================================================== AI ADVISOR WELCOME CARD (COMPACT & MODERN) =================================================== */ .ai-msg.bot.ai-welcome-bubble { width: 100% !important; max-width: 100% !important; align-self: stretch !important; box-sizing: border-box !important; background: linear-gradient(135deg, rgba(14, 74, 89, 0.4) 0%, rgba(15, 23, 42, 0.65) 100%) !important; border: 1px solid rgba(56, 189, 210, 0.3) !important; border-radius: 8px !important; padding: 12px 14px 10px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; backdrop-filter: none !important; white-space: normal !important; line-height: normal !important; } html[data-theme='light'] .ai-msg.bot.ai-welcome-bubble { background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%) !important; border: 1px solid #bae6fd !important; box-shadow: 0 3px 12px rgba(14, 165, 233, 0.1) !important; color: #0f172a !important; } .ai-welcome-header { display: flex !important; align-items: center !important; gap: 10px !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(56, 189, 210, 0.2) !important; margin: 0 0 9px 0 !important; white-space: normal !important; } html[data-theme='light'] .ai-welcome-header { border-bottom-color: rgba(14, 165, 233, 0.2) !important; } .ai-welcome-avatar { width: 24px !important; height: 24px !important; border-radius: 6px !important; background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; font-size: 0.78rem !important; box-shadow: 0 2px 6px rgba(14, 165, 233, 0.3) !important; flex-shrink: 0 !important; } .ai-welcome-title-group { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; } .ai-welcome-badge { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 0.90rem !important; font-weight: 600 !important; color: #f1f5f9 !important; letter-spacing: -0.01em !important; line-height: 1.25 !important; } html[data-theme='light'] .ai-welcome-badge { color: #0f172a !important; } .ai-welcome-badge .ai-status-word { font-weight: 700 !important; transition: color 0.3s ease !important; } .ai-welcome-pulse { width: 4px !important; height: 4px !important; border-radius: 1px !important; background-color: #10b981 !important; animation: aiWelcomePulse 1.2s infinite ease-in-out !important; flex-shrink: 0 !important; display: inline-block !important; transform-origin: center center !important; transition: background-color 0.3s ease !important; } .ai-welcome-pulse.is-offline { background-color: #ef4444 !important; animation: aiWelcomePulseOffline 1.2s infinite ease-in-out !important; } @keyframes aiWelcomePulse { 0% { transform: scale(0.95); opacity: 0.75; box-shadow: 0 0 0 rgba(16, 185, 129, 0); } 50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 5px #10b981; } 100% { transform: scale(0.95); opacity: 0.75; box-shadow: 0 0 0 rgba(16, 185, 129, 0); } } @keyframes aiWelcomePulseOffline { 0% { transform: scale(0.95); opacity: 0.75; box-shadow: 0 0 0 rgba(239, 68, 68, 0); } 50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 5px #ef4444; } 100% { transform: scale(0.95); opacity: 0.75; box-shadow: 0 0 0 rgba(239, 68, 68, 0); } } @keyframes aiWelcomePulseChecking { 0% { transform: scale(0.95); opacity: 0.75; box-shadow: 0 0 0 rgba(245, 158, 11, 0); } 50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 5px #f59e0b; } 100% { transform: scale(0.95); opacity: 0.75; box-shadow: 0 0 0 rgba(245, 158, 11, 0); } } /* Título dinâmico do chat: "Gerente Virtual - [■] IA Online / IA Offline" */ .ai-chat-title { display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; } .ai-header-name { font-weight: 700 !important; } .ai-header-sep { opacity: 0.55 !important; font-weight: 400 !important; } .ai-header-status-square { width: 5px !important; height: 5px !important; border-radius: 1px !important; background-color: #10b981 !important; animation: aiWelcomePulse 1.2s infinite ease-in-out !important; flex-shrink: 0 !important; display: inline-block !important; transform-origin: center center !important; transition: background-color 0.3s ease !important; } .ai-header-status-square.is-offline { background-color: #ef4444 !important; animation: aiWelcomePulseOffline 1.2s infinite ease-in-out !important; } .ai-header-status-square.is-online { background-color: #10b981 !important; animation: aiWelcomePulse 1.2s infinite ease-in-out !important; } .ai-chat-title[data-ai-status="checking"] .ai-header-status-square { background-color: #f59e0b !important; animation: aiWelcomePulseChecking 1.2s infinite ease-in-out !important; } .ai-header-status-text { font-size: 0.85em !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: #10b981 !important; transition: color 0.3s ease !important; } .ai-header-status-text.is-offline, .ai-chat-title[data-ai-status="offline"] .ai-header-status-text { color: #ef4444 !important; } .ai-header-status-text.is-online, .ai-chat-title[data-ai-status="online"] .ai-header-status-text { color: #10b981 !important; } .ai-chat-title[data-ai-status="checking"] .ai-header-status-text { color: #f59e0b !important; } html[data-theme='light'] .ai-chat-title[data-ai-status="offline"] .ai-header-status-text { color: #dc2626 !important; } html[data-theme='light'] .ai-chat-title[data-ai-status="online"] .ai-header-status-text { color: #059669 !important; } .ai-configure-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 10px !important; font-size: 0.76rem !important; font-weight: 600 !important; line-height: 1.2 !important; border-radius: var(--radius-md, 6px) !important; border: 1px solid rgba(56, 189, 248, 0.4) !important; background: rgba(56, 189, 248, 0.12) !important; color: #38bdf8 !important; cursor: pointer !important; transition: all 0.2s ease !important; text-decoration: none !important; white-space: nowrap !important; } .ai-configure-btn:hover { background: rgba(56, 189, 248, 0.22) !important; border-color: #38bdf8 !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 2px 8px rgba(56, 189, 248, 0.25) !important; } .ai-configure-btn.is-online, .ai-configure-btn[data-online="true"] { display: none !important; } .ai-configure-btn.is-offline { border-color: rgba(239, 68, 68, 0.55) !important; background: rgba(239, 68, 68, 0.16) !important; color: #f87171 !important; animation: aiConfigurePulse 2.5s infinite !important; } .ai-configure-btn.is-offline:hover { background: rgba(239, 68, 68, 0.28) !important; border-color: #ef4444 !important; color: #ffffff !important; box-shadow: 0 2px 10px rgba(239, 68, 68, 0.35) !important; } @keyframes aiConfigurePulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); } 70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } html[data-theme='light'] .ai-configure-btn { border: 1px solid rgba(2, 132, 199, 0.3) !important; background: rgba(2, 132, 199, 0.08) !important; color: #0284c7 !important; } html[data-theme='light'] .ai-configure-btn.is-offline { border-color: rgba(220, 38, 38, 0.45) !important; background: rgba(220, 38, 38, 0.08) !important; color: #dc2626 !important; } .ai-welcome-intro { font-size: 0.83rem !important; line-height: 1.4 !important; color: #cbd5e1 !important; margin: 0 0 8px 0 !important; padding: 0 !important; white-space: normal !important; } html[data-theme='light'] .ai-welcome-intro { color: #334155 !important; } .ai-welcome-features { display: flex !important; flex-direction: column !important; gap: 5px !important; margin-top: 0 !important; margin-bottom: 8px !important; padding: 0 !important; width: 100% !important; white-space: normal !important; } .ai-welcome-feature-item { display: flex !important; align-items: center !important; gap: 9px !important; padding: 5px 9px !important; background: rgba(15, 23, 42, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 6px !important; transition: transform 0.15s ease, background-color 0.15s ease !important; width: 100% !important; box-sizing: border-box !important; } .ai-welcome-feature-item:hover { transform: translateY(-1px) !important; background: rgba(15, 23, 42, 0.55) !important; } html[data-theme='light'] .ai-welcome-feature-item { background: rgba(241, 245, 249, 0.85) !important; border: 1px solid rgba(203, 213, 225, 0.7) !important; } html[data-theme='light'] .ai-welcome-feature-item:hover { background: rgba(226, 232, 240, 0.95) !important; } .ai-welcome-feature-icon { width: 20px !important; height: 20px !important; border-radius: 5px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.70rem !important; flex-shrink: 0 !important; } .ai-welcome-feature-text { font-size: 0.78rem !important; line-height: 1.3 !important; color: #e2e8f0 !important; } html[data-theme='light'] .ai-welcome-feature-text { color: #1e293b !important; } .ai-welcome-feature-text strong { color: #f8fafc !important; font-weight: 600 !important; } html[data-theme='light'] .ai-welcome-feature-text strong { color: #0f172a !important; } .ai-welcome-footer { display: flex !important; align-items: center !important; gap: 7px !important; padding-top: 7px !important; border-top: 1px dashed rgba(56, 189, 210, 0.2) !important; font-size: 0.74rem !important; color: #94a3b8 !important; line-height: 1.3 !important; } html[data-theme='light'] .ai-welcome-footer { border-top-color: rgba(14, 165, 233, 0.2) !important; color: #64748b !important; } .ai-welcome-footer i { color: #f59e0b !important; font-size: 0.80rem !important; flex-shrink: 0 !important; } .ai-welcome-footer strong { color: #38bdf8 !important; } html[data-theme='light'] .ai-welcome-footer strong { color: #0284c7 !important; } .ai-chat-input, textarea.ai-chat-input, #aiChatInput { min-height: 38px !important; height: auto; max-height: none; box-sizing: border-box !important; padding: 8px 12px !important; resize: vertical !important; line-height: 20px !important; font-size: 0.88rem !important; overflow-y: auto; border-radius: var(--radius-md) !important; } .ai-chat-input::placeholder, textarea.ai-chat-input::placeholder, #aiChatInput::placeholder { color: var(--placeholder-color, rgba(148, 163, 184, 0.18)) !important; opacity: 1 !important; } .ai-chat-input::-webkit-input-placeholder, textarea.ai-chat-input::-webkit-input-placeholder, #aiChatInput::-webkit-input-placeholder { color: var(--placeholder-color, rgba(148, 163, 184, 0.18)) !important; opacity: 1 !important; } .ai-chat-input::-moz-placeholder, textarea.ai-chat-input::-moz-placeholder, #aiChatInput::-moz-placeholder { color: var(--placeholder-color, rgba(148, 163, 184, 0.18)) !important; opacity: 1 !important; } .ai-chat-input:-ms-input-placeholder, textarea.ai-chat-input:-ms-input-placeholder, #aiChatInput:-ms-input-placeholder { color: var(--placeholder-color, rgba(148, 163, 184, 0.18)) !important; opacity: 1 !important; } .ai-advisor-input-area { align-items: center !important; padding: 8px 16px !important; border-top: 1px solid var(--border-color) !important; display: flex !important; gap: 10px !important; } .ai-advisor-input-area .amti-btn, .ai-advisor-input-area button { height: 38px !important; min-height: 38px !important; max-height: 38px !important; box-sizing: border-box !important; padding: 0 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-size: 0.88rem !important; white-space: nowrap !important; border-radius: var(--radius-md) !important; } .ai-advisor-suggestions { flex: 1; } /* Mantém os dois painéis do Gerente Virtual com a mesma superfície elevada do card de prompts. */ .ai-advisor-top-grid > .amti-grid-card.os-card { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30) !important; } .ai-advisor-bottom-card { width: 100%; margin-top: 0 !important; } /* Cards colapsáveis do Gerente Virtual (Prompts e WhatsApp) seguindo o padrão amti-card / balcaoCash */ .amti-ai-collapsible-card { width: 100%; box-sizing: border-box; } .amti-ai-collapsible-card .amti-card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; user-select: none; padding: 8px 10px; margin: -4px -6px; border-bottom: none !important; transition: opacity 0.15s ease; background: transparent !important; } .amti-ai-collapsible-card .amti-card-header:hover { opacity: 0.88; background: transparent !important; } .amti-ai-collapsible-card .amti-card-title { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0; line-height: 1.25; } .amti-ai-collapsible-card .amti-settings-help { font-size: 0.84rem; margin: 4px 0 0 0; color: var(--text-secondary); line-height: 1.35; } .amti-ai-collapsible-card .amti-btn-primary { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .amti-ai-collapsible-card .amti-card-body { padding-top: 14px; border-top: 1px solid var(--border, rgba(148, 163, 184, 0.12)); margin-top: 12px; } html[data-theme='light'] .amti-ai-collapsible-card .amti-card-body { border-top-color: rgba(0, 0, 0, 0.08); } .ai-sugg-title { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; } .ai-sugg-list { display: flex; flex-direction: column; gap: 8px; } .ai-sugg-item { width: 100%; padding: 14px 16px; background-color: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); color: var(--text-primary); font-size: 0.85rem; text-align: left; cursor: pointer; transition: all 0.2s; } .ai-sugg-item:hover { border-color: var(--border-focus); background-color: rgba(6, 182, 212, 0.06); box-shadow: 0 4px 14px rgba(0,0,0,0.22); transform: translateY(-1px); } /* Sales Cart area - Padrão Reduzido de Margens (16px) */ .pdv-layout { display: flex; gap: 16px; flex: 1 1 auto; height: 100% !important; max-height: 100% !important; min-height: 0 !important; box-sizing: border-box; background: transparent; padding: 0; overflow: hidden !important; } .pdv-catalog { flex: 2.2; display: flex; flex-direction: column; overflow: hidden !important; height: 100% !important; min-height: 0 !important; padding-right: 0; } /* Scrollbar premium para PDV */ .pdv-catalog::-webkit-scrollbar, .pdv-product-grid::-webkit-scrollbar, .pdv-cart-items::-webkit-scrollbar { width: 6px; } .pdv-catalog::-webkit-scrollbar-thumb, .pdv-product-grid::-webkit-scrollbar-thumb, .pdv-cart-items::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 8px; } .amti-pdv-catalog-card { margin-bottom: 16px; padding: 0; } .pdv-search-wrapper { position: relative; } .pdv-search-wrapper .amti-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--color-cyan); font-size: 1rem; pointer-events: none; } .pdv-search-wrapper .amti-pdv-search-input { width: 100%; height: 48px; padding-left: 46px; font-size: 0.95rem; font-weight: 500; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); color: #fff; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .pdv-search-wrapper .amti-pdv-search-input:focus { background: rgba(0, 0, 0, 0.4); border-color: var(--color-cyan); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15); outline: none; } .pdv-cart { flex: 1; min-width: 320px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: linear-gradient(145deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.95) 100%); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } .amti-pdv-cart-header { padding: 14px 16px; font-size: 1.1rem; font-weight: 800; background: rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; gap: 10px; color: #fff; letter-spacing: 0.5px; } .amti-pdv-cart-header i { color: var(--color-cyan); font-size: 1.3rem; filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.4)); } .pdv-cart-items { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .pdv-cart-summary { padding: 16px; border-top: 1px solid rgba(255, 255, 255, 0.05); background: rgba(0, 0, 0, 0.4); } .amti-pdv-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 1.2rem; font-weight: 800; margin: 14px 0; padding: 12px 0; border-top: 2px dashed rgba(255, 255, 255, 0.1); border-bottom: 2px dashed rgba(255, 255, 255, 0.1); } .amti-pdv-summary-row #pdvCartTotal { color: var(--color-cyan); font-size: 1.45rem; text-shadow: 0 0 20px rgba(6, 182, 212, 0.4); } .pdv-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; } .pdv-product-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 16px 14px; text-align: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 120px; } .pdv-product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-cyan), #8b5cf6); opacity: 0; transition: opacity 0.4s; } .pdv-product-card:hover { transform: translateY(-8px) scale(1.03); border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3), 0 0 24px rgba(6, 182, 212, 0.15); background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); } .pdv-product-card:hover::before { opacity: 1; } .pdv-product-card .product-name { font-size: 1.15rem; font-weight: 600; color: var(--text-main); margin-bottom: 12px; } .pdv-product-card .product-price { font-size: 1.3rem; font-weight: 800; color: var(--color-cyan); background: rgba(6, 182, 212, 0.1); padding: 6px 12px; border-radius: 8px; display: inline-block; margin: 0 auto; } /* Ensure Sales tab fills remaining vertical space so Cart column stretches to bottom */ #tab-sales.amti-tab-pane.active { display: flex !important; flex-direction: column !important; height: calc(100vh - 72px - 64px) !important; max-height: calc(100vh - 72px - 64px) !important; overflow: hidden !important; } body.has-contract-expiration-banner #tab-sales.amti-tab-pane.active { height: calc(100vh - 38px - 72px - 64px) !important; max-height: calc(100vh - 38px - 72px - 64px) !important; } @media (max-width: 700px) { body.has-contract-expiration-banner .amti-tab-pane.active.amti-flex-tab { height: calc(100vh - 50px - 80px - 32px) !important; max-height: calc(100vh - 50px - 80px - 32px) !important; } body.has-contract-expiration-banner #tab-sales.amti-tab-pane.active { height: calc(100vh - 50px - 72px - 64px) !important; max-height: calc(100vh - 50px - 72px - 64px) !important; } } #tab-sales .pdv-layout { flex: 1 1 auto; height: 100% !important; max-height: 100% !important; min-height: 0 !important; overflow: hidden !important; } /* Checkout button modernization */ .amti-pdv-checkout-btn { width: 100%; height: 64px; font-size: 1.2rem; font-weight: 800; color: #ffffff; border-radius: 16px; background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%); border: none; box-shadow: 0 12px 28px rgba(139, 92, 246, 0.35); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 1.5px; position: relative; overflow: hidden; } .amti-pdv-checkout-btn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s; } .amti-pdv-checkout-btn i { color: #ffffff; margin-right: 8px; font-size: 1.3rem; } .amti-pdv-checkout-btn:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(139, 92, 246, 0.5); filter: brightness(1.15); } .amti-pdv-checkout-btn:hover::after { opacity: 1; } .amti-pdv-checkout-btn:active { transform: translateY(2px); box-shadow: 0 8px 16px rgba(139, 92, 246, 0.3); } /* Agenda list */ .agenda-list { display: flex; flex-direction: column; gap: 10px; } .agenda-item { border: none; border-left: 4px solid var(--color-indigo); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 14px 16px; background: var(--bg-card); display: flex; justify-content: space-between; align-items: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .agenda-item:hover { transform: translateX(4px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .agenda-item[style*="opacity: 0.6"] { border-left-color: var(--text-secondary); opacity: 0.55 !important; } .agenda-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .agenda-title { font-weight: 600; font-size: 0.92rem; line-height: 1.3; } .agenda-meta { font-size: 0.78rem; color: var(--text-secondary); display: flex; gap: 14px; flex-wrap: wrap; } .agenda-meta i { opacity: 0.6; margin-right: 2px; } /* Agenda near/expired animations */ @keyframes agendaNearPulse { 0%, 100% { border-left-color: var(--color-indigo, #6366f1); box-shadow: 0 0 0 0 rgba(99,102,241,0.2); } 50% { border-left-color: #6366f1; box-shadow: 0 0 8px 2px rgba(99,102,241,0.15); } } .agenda-item.agenda-near, .agenda-item-compact.agenda-near { animation: agendaNearPulse 2s ease-in-out infinite; } @keyframes agendaExpiredBanner { 0%, 100% { border-left-color: #ef4444; background: rgba(239,68,68,0.04); } 50% { border-left-color: #dc2626; background: rgba(239,68,68,0.08); } } .agenda-item.agenda-expired, .agenda-item-compact.agenda-expired { animation: agendaExpiredBanner 1.5s ease-in-out infinite; border-left-color: #ef4444; position: relative; } .agenda-item.agenda-expired .agenda-title, .agenda-item-compact.agenda-expired .agenda-title { color: #ef4444; } .agenda-item::before, .agenda-item::after, .agenda-item.agenda-expired::before, .agenda-item.agenda-expired::after, .agenda-item-compact.agenda-expired::before, .agenda-item-compact.agenda-expired::after { content: none !important; display: none !important; } /* ============================================================ MODERN AI ALERT ANIMATIONS (SOFT & DIFFUSED GLOW SYSTEM) Efeitos suavizados para o botão flutuante em modo de alerta. Substitui bordas rígidas e definidas por auras translúcidas e halos difusos. ============================================================ */ @keyframes aiAlertGlow { 0%, 100% { box-shadow: 0 0 16px 3px rgba(var(--alert-color-rgb), 0.45), 0 0 32px 8px rgba(var(--alert-color-rgb), 0.22), 0 0 54px 14px rgba(var(--alert-color-rgb), 0.08); transform: scale(1); } 50% { box-shadow: 0 0 24px 6px rgba(var(--alert-color-rgb), 0.7), 0 0 46px 14px rgba(var(--alert-color-rgb), 0.35), 0 0 76px 20px rgba(var(--alert-color-rgb), 0.16); transform: scale(1.05); } } .ai-alert-mode, html[data-theme] .amti-monitor-fab.ai-alert-mode, .amti-monitor-fab.ai-alert-mode { --alert-color: #ffb703; --alert-color-rgb: 255, 183, 3; background-color: var(--alert-color); color: #000000; border-color: rgba(var(--alert-color-rgb), 0.4); box-shadow: 0 0 18px rgba(var(--alert-color-rgb), 0.4); z-index: 60; overflow: visible !important; transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Garante que o ícone do botão flutuante permaneça sempre acima dos anéis/auras animadas */ .amti-monitor-fab.ai-alert-mode i, .amti-monitor-fab.ai-alert-mode svg, html[data-theme] .amti-monitor-fab.ai-alert-mode i, html[data-theme] .amti-monitor-fab.ai-alert-mode svg { position: relative !important; z-index: 5 !important; } /* Sem cor: keep animation motion but use theme-default colors, soft glow */ .ai-alert-mode.amti-fab-no-color { background-color: var(--alert-color) !important; border-color: rgba(var(--alert-color-rgb), 0.25) !important; } .ai-alert-mode.amti-fab-no-color::after, .ai-alert-mode.amti-fab-no-color::before { border-color: rgba(var(--alert-color-rgb), 0.2) !important; box-shadow: 0 0 14px rgba(var(--alert-color-rgb), 0.18) !important; } /* Theme warning color mappings */ html[data-theme='light'] .ai-alert-mode { --alert-color: #3b82f6; --alert-color-rgb: 59, 130, 246; color: #ffffff !important; } html[data-theme='block-steel'] .ai-alert-mode { --alert-color: #e28743; --alert-color-rgb: 226, 135, 67; } html[data-theme='block-blue'] .ai-alert-mode { --alert-color: #00f5ff; --alert-color-rgb: 0, 245, 255; } html[data-theme='block-light'] .ai-alert-mode { --alert-color: #6366f1; --alert-color-rgb: 99, 102, 241; color: #ffffff !important; } /* 1. Brilho Dourado (Aura Difusa) */ .ai-alert-mode.ai-alert-glow { animation: aiAlertGlow 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important; overflow: visible !important; } /* 2. Ondas Sonoras (Ondas Acústicas Esferoides Suaves) */ @keyframes aiAlertSoundWaves { 0%, 100% { box-shadow: 0 0 16px 2px rgba(var(--alert-color-rgb), 0.45), 0 0 32px 6px rgba(var(--alert-color-rgb), 0.2); transform: scale(1); } 40% { box-shadow: 0 0 22px 5px rgba(var(--alert-color-rgb), 0.7), 0 0 44px 10px rgba(var(--alert-color-rgb), 0.3); transform: scale(1.05); } } .ai-alert-mode.ai-alert-sound-waves { animation: aiAlertSoundWaves 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important; overflow: visible !important; } .ai-alert-mode.ai-alert-sound-waves::after, .ai-alert-mode.ai-alert-sound-waves::before { content: '' !important; display: block !important; position: absolute; inset: -6px; border-radius: max(14px, inherit) !important; border: 1px solid rgba(var(--alert-color-rgb), 0.22); box-shadow: 0 0 18px 3px rgba(var(--alert-color-rgb), 0.35), inset 0 0 10px rgba(var(--alert-color-rgb), 0.12); background: radial-gradient(circle, rgba(var(--alert-color-rgb), 0.06) 0%, transparent 75%); animation: aiAlertWaveRings 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite; pointer-events: none; z-index: 1; } .ai-alert-mode.ai-alert-sound-waves::after { animation-delay: 0.45s; } .ai-alert-mode.amti-fab-no-color.ai-alert-sound-waves::after, .ai-alert-mode.amti-fab-no-color.ai-alert-sound-waves::before { border-color: rgba(var(--alert-color-rgb), 0.16) !important; box-shadow: 0 0 14px rgba(var(--alert-color-rgb), 0.15) !important; } @keyframes aiAlertWaveRings { 0% { transform: scale(0.92); opacity: 0.8; } 50% { opacity: 0.4; } 100% { transform: scale(2.05); opacity: 0; } } /* 3. Toque de Telefone (Jitter Elegante + Ondas de Chamada) */ @keyframes aiAlertPhoneRing { 0%, 100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 14px rgba(var(--alert-color-rgb), 0.4), 0 0 28px rgba(var(--alert-color-rgb), 0.18); } 3% { transform: scale(1.05) rotate(-4deg); box-shadow: 0 0 20px rgba(var(--alert-color-rgb), 0.65), 0 0 38px rgba(var(--alert-color-rgb), 0.3); } 6% { transform: scale(1.05) rotate(4deg); } 9% { transform: scale(1.05) rotate(-4deg); } 12% { transform: scale(1.05) rotate(4deg); } 15% { transform: scale(1.05) rotate(-2deg); } 18% { transform: scale(1.02) rotate(0deg); } } .ai-alert-mode.ai-alert-phone-ring { animation: aiAlertPhoneRing 1.8s ease-in-out infinite !important; overflow: visible !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-phone-ring::before, html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-phone-ring::after, .ai-alert-mode.ai-alert-phone-ring::before, .ai-alert-mode.ai-alert-phone-ring::after { content: '' !important; display: block !important; position: absolute !important; inset: -6px !important; border-radius: max(14px, inherit) !important; border: 1px solid rgba(var(--alert-color-rgb), 0.22) !important; box-shadow: 0 0 16px 2px rgba(var(--alert-color-rgb), 0.35), inset 0 0 10px rgba(var(--alert-color-rgb), 0.12) !important; background: radial-gradient(circle, rgba(var(--alert-color-rgb), 0.05) 0%, transparent 75%) !important; animation: aiAlertPhoneWave 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite !important; pointer-events: none !important; z-index: 1 !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-phone-ring::after, .ai-alert-mode.ai-alert-phone-ring::after { animation-delay: 0.45s !important; } .ai-alert-mode.amti-fab-no-color.ai-alert-phone-ring::before, .ai-alert-mode.amti-fab-no-color.ai-alert-phone-ring::after { border-color: rgba(var(--alert-color-rgb), 0.16) !important; box-shadow: 0 0 12px rgba(var(--alert-color-rgb), 0.18) !important; } @keyframes aiAlertPhoneWave { 0% { transform: scale(0.92); opacity: 0.8; } 50% { opacity: 0.35; } 100% { transform: scale(1.85); opacity: 0; } } /* 4. Pulso Magnético (Vórtice Suave de Plasma) */ @keyframes aiAlertMagneticPulse { 0%, 100% { box-shadow: 0 0 16px 2px rgba(var(--alert-color-rgb), 0.45), 0 0 32px rgba(var(--alert-color-rgb), 0.2); transform: scale(1); } 50% { box-shadow: 0 0 24px 5px rgba(var(--alert-color-rgb), 0.75), 0 0 46px rgba(var(--alert-color-rgb), 0.35); transform: scale(1.05); } } .ai-alert-mode.ai-alert-magnetic-pulse { animation: aiAlertMagneticPulse 2s ease-in-out infinite !important; overflow: visible !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-magnetic-pulse::after, .ai-alert-mode.ai-alert-magnetic-pulse::after { content: '' !important; display: block !important; position: absolute !important; inset: -8px !important; border-radius: 50% !important; background: conic-gradient(from 0deg, transparent 0deg, rgba(var(--alert-color-rgb), 0.5) 70deg, transparent 140deg, rgba(var(--alert-color-rgb), 0.25) 260deg, transparent 360deg) !important; filter: none !important; box-shadow: 0 0 22px rgba(var(--alert-color-rgb), 0.35) !important; animation: aiAlertMagneticSpin 1.8s linear infinite !important; pointer-events: none !important; z-index: 2 !important; } .ai-alert-mode.amti-fab-no-color.ai-alert-magnetic-pulse::after { background: conic-gradient(from 0deg, transparent 0deg, rgba(var(--alert-color-rgb), 0.25) 70deg, transparent 140deg, rgba(var(--alert-color-rgb), 0.12) 260deg, transparent 360deg) !important; } @keyframes aiAlertMagneticSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 5. Neon Digital (Glow Suave Estilo Tubo de Néon) */ @keyframes aiAlertNeonDigital { 0%, 100% { box-shadow: 0 0 14px 2px rgba(var(--alert-color-rgb), 0.5), 0 0 28px 6px rgba(var(--alert-color-rgb), 0.25); transform: scale(1); } 30% { box-shadow: 0 0 8px 1px rgba(var(--alert-color-rgb), 0.3), 0 0 18px 3px rgba(var(--alert-color-rgb), 0.15); transform: scale(0.99); } 50% { box-shadow: 0 0 22px 4px rgba(var(--alert-color-rgb), 0.7), 0 0 42px 10px rgba(var(--alert-color-rgb), 0.35); transform: scale(1.03); } } .ai-alert-mode.ai-alert-neon-digital { animation: aiAlertNeonDigital 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important; overflow: visible !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-neon-digital::after, .ai-alert-mode.ai-alert-neon-digital::after { content: '' !important; display: block !important; position: absolute !important; inset: -5px !important; border-radius: max(10px, inherit) !important; border: 1px solid rgba(var(--alert-color-rgb), 0.3) !important; box-shadow: 0 0 18px 2px rgba(var(--alert-color-rgb), 0.5), inset 0 0 12px 1px rgba(var(--alert-color-rgb), 0.25) !important; animation: aiAlertNeonFlicker 0.25s infinite alternate ease-in-out !important; pointer-events: none !important; z-index: 1 !important; } .ai-alert-mode.amti-fab-no-color.ai-alert-neon-digital::after { border-color: rgba(var(--alert-color-rgb), 0.18) !important; box-shadow: 0 0 12px rgba(var(--alert-color-rgb), 0.25), inset 0 0 6px rgba(var(--alert-color-rgb), 0.12) !important; } @keyframes aiAlertNeonFlicker { 0% { opacity: 0.55; } 100% { opacity: 0.95; } } /* 6. Scan Digital (Varredura de Linha Difusa) */ @keyframes aiAlertDigitalScan { 0% { box-shadow: inset 0 0 0 0 rgba(var(--alert-color-rgb), 0), 0 0 14px rgba(var(--alert-color-rgb), 0.35); background-position: -200% 0; } 35% { box-shadow: inset 0 0 16px 2px rgba(var(--alert-color-rgb), 0.25), 0 0 20px rgba(var(--alert-color-rgb), 0.5); } 50% { box-shadow: inset 0 0 26px 4px rgba(var(--alert-color-rgb), 0.45), 0 0 28px rgba(var(--alert-color-rgb), 0.65); } 65% { box-shadow: inset 0 0 16px 2px rgba(var(--alert-color-rgb), 0.25), 0 0 20px rgba(var(--alert-color-rgb), 0.5); } 100% { box-shadow: inset 0 0 0 0 rgba(var(--alert-color-rgb), 0), 0 0 14px rgba(var(--alert-color-rgb), 0.35); background-position: 200% 0; } } .ai-alert-mode.ai-alert-digital-scan { animation: aiAlertDigitalScan 2s ease-in-out infinite !important; background-image: linear-gradient(90deg, transparent 0%, rgba(var(--alert-color-rgb), 0.12) 45%, rgba(var(--alert-color-rgb), 0.22) 50%, rgba(var(--alert-color-rgb), 0.12) 55%, transparent 100%) !important; background-size: 200% 100% !important; overflow: visible !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-digital-scan::after, .ai-alert-mode.ai-alert-digital-scan::after { content: '' !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; height: 6px !important; background: linear-gradient(90deg, transparent 5%, rgba(var(--alert-color-rgb), 0.85) 50%, transparent 95%) !important; filter: none !important; box-shadow: 0 0 16px 3px rgba(var(--alert-color-rgb), 0.6) !important; animation: aiAlertScanLine 2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important; pointer-events: none !important; z-index: 2 !important; } .ai-alert-mode.amti-fab-no-color.ai-alert-digital-scan::after { box-shadow: 0 0 8px rgba(var(--alert-color-rgb), 0.3) !important; } @keyframes aiAlertScanLine { 0% { top: -4px; opacity: 0; } 15% { opacity: 0.9; } 85% { opacity: 0.9; } 100% { top: calc(100% + 4px); opacity: 0; } } /* 7. Quadrado Pulsante (Camadas Expansivas Translúcidas e Suaves) */ @keyframes aiAlertSquarePulse { 0%, 100% { box-shadow: 0 0 16px 2px rgba(var(--alert-color-rgb), 0.45), 0 0 32px 6px rgba(var(--alert-color-rgb), 0.2); transform: scale(1); } 50% { box-shadow: 0 0 24px 5px rgba(var(--alert-color-rgb), 0.75), 0 0 48px 12px rgba(var(--alert-color-rgb), 0.35); transform: scale(1.05); } } .ai-alert-mode.ai-alert-square-pulse { animation: aiAlertSquarePulse 1.8s ease-in-out infinite !important; overflow: visible !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-square-pulse::before, html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-square-pulse::after, .ai-alert-mode.ai-alert-square-pulse::before, .ai-alert-mode.ai-alert-square-pulse::after { content: '' !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; inset: -6px !important; border-radius: max(12px, inherit) !important; border: 1px solid rgba(var(--alert-color-rgb), 0.22) !important; background: radial-gradient(circle, rgba(var(--alert-color-rgb), 0.06) 0%, transparent 75%) !important; box-shadow: 0 0 18px 2px rgba(var(--alert-color-rgb), 0.35), inset 0 0 12px 1px rgba(var(--alert-color-rgb), 0.15), 0 0 32px rgba(var(--alert-color-rgb), 0.12) !important; animation: aiAlertSquareExpand 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite !important; pointer-events: none !important; z-index: 1 !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-square-pulse::after, .ai-alert-mode.ai-alert-square-pulse::after { animation-delay: 0.45s !important; } .ai-alert-mode.amti-fab-no-color.ai-alert-square-pulse::after, .ai-alert-mode.amti-fab-no-color.ai-alert-square-pulse::before { border-color: rgba(var(--alert-color-rgb), 0.16) !important; box-shadow: 0 0 12px rgba(var(--alert-color-rgb), 0.18) !important; } @keyframes aiAlertSquareExpand { 0% { transform: scale(0.94); opacity: 0.8; } 50% { opacity: 0.35; } 100% { transform: scale(1.85); opacity: 0; } } /* 8. Glitch Block (Distorção Digital com Iluminação Suave) */ @keyframes aiAlertGlitchBlock { 0%, 100% { transform: translate(0, 0) scale(1); box-shadow: 0 0 14px rgba(var(--alert-color-rgb), 0.45), 0 0 28px rgba(var(--alert-color-rgb), 0.2); } 10% { transform: translate(-2px, 1px) scale(1.02); box-shadow: 3px 0 14px rgba(255, 70, 70, 0.35), -3px 0 14px rgba(60, 230, 255, 0.35), 0 0 24px rgba(var(--alert-color-rgb), 0.4); } 20% { transform: translate(2px, -1px) scale(0.99); box-shadow: -3px 0 14px rgba(255, 70, 70, 0.35), 3px 0 14px rgba(60, 230, 255, 0.35); } 35% { transform: translate(0, 0) scale(1.03); box-shadow: 0 0 26px rgba(var(--alert-color-rgb), 0.65); } 50% { transform: translate(-1px, -1px) scale(0.99); } } .ai-alert-mode.ai-alert-glitch-block { animation: aiAlertGlitchBlock 2s ease-in-out infinite !important; overflow: visible !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-glitch-block::after, .ai-alert-mode.ai-alert-glitch-block::after { content: '' !important; display: block !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(var(--alert-color-rgb), 0.08) 3px, rgba(var(--alert-color-rgb), 0.08) 6px ) !important; filter: none !important; animation: aiAlertGlitchScanlines 0.2s linear infinite !important; pointer-events: none !important; z-index: 1 !important; } .ai-alert-mode.amti-fab-no-color.ai-alert-glitch-block::after { background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(var(--alert-color-rgb), 0.04) 3px, rgba(var(--alert-color-rgb), 0.04) 6px ) !important; } @keyframes aiAlertGlitchScanlines { 0% { transform: translateY(0); } 100% { transform: translateY(6px); } } /* 9. Cubo Giratório (Rotação 3D com Iluminação e Cantos Arredondados) */ @keyframes aiAlertFlipCube { 0% { transform: perspective(350px) rotateX(0deg) rotateY(0deg); box-shadow: 0 0 14px rgba(var(--alert-color-rgb), 0.45); } 50% { transform: perspective(350px) rotateX(-180deg) rotateY(0deg); box-shadow: 0 0 28px rgba(var(--alert-color-rgb), 0.7), 0 0 50px rgba(var(--alert-color-rgb), 0.3); } 100% { transform: perspective(350px) rotateX(-180deg) rotateY(-180deg); box-shadow: 0 0 14px rgba(var(--alert-color-rgb), 0.45); } } .ai-alert-mode.ai-alert-flip-cube { animation: aiAlertFlipCube 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite !important; border-radius: max(8px, inherit) !important; overflow: visible !important; } /* 10. Borda Rotativa (Pulso de Aura Translúcida) */ @keyframes aiAlertBorderSpin { 0%, 100% { box-shadow: inset 0 0 12px 2px rgba(var(--alert-color-rgb), 0.5), 0 0 16px 2px rgba(var(--alert-color-rgb), 0.4); transform: scale(1); } 50% { box-shadow: inset 0 0 20px 4px rgba(var(--alert-color-rgb), 0.8), 0 0 32px 8px rgba(var(--alert-color-rgb), 0.6), 0 0 56px rgba(var(--alert-color-rgb), 0.25); transform: scale(1.04); } } .ai-alert-mode.ai-alert-border-spin { animation: aiAlertBorderSpin 1.6s ease-in-out infinite !important; border-radius: max(8px, inherit) !important; overflow: visible !important; } /* 11. Bloco Saltitante (Salto Dinâmico com Sombra de Contato Suave) */ @keyframes aiAlertPopBlock { 0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 6px 14px rgba(var(--alert-color-rgb), 0.4), 0 0 16px rgba(var(--alert-color-rgb), 0.2); } 50% { transform: translateY(-8px) scale(1.08); box-shadow: 0 18px 30px rgba(var(--alert-color-rgb), 0.5), 0 0 32px rgba(var(--alert-color-rgb), 0.35); } } .ai-alert-mode.ai-alert-pop-block { animation: aiAlertPopBlock 1.2s cubic-bezier(0.34, 1.3, 0.64, 1) infinite !important; border-radius: max(8px, inherit) !important; overflow: visible !important; } /* 12. Halo Holográfico (🌟 Halo Holográfico Eféreo) */ @keyframes aiAlertHoloGlow { 0%, 100% { box-shadow: 0 0 16px 2px rgba(var(--alert-color-rgb), 0.5), 0 0 34px 6px rgba(var(--alert-color-rgb), 0.25); transform: scale(1); } 50% { box-shadow: 0 0 26px 5px rgba(var(--alert-color-rgb), 0.8), 0 0 52px 12px rgba(var(--alert-color-rgb), 0.4); transform: scale(1.05); } } .ai-alert-mode.ai-alert-holographic-halo { animation: aiAlertHoloGlow 2s ease-in-out infinite !important; overflow: visible !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-holographic-halo::before, html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-holographic-halo::after, .ai-alert-mode.ai-alert-holographic-halo::before, .ai-alert-mode.ai-alert-holographic-halo::after { content: '' !important; display: block !important; position: absolute !important; inset: -6px !important; border-radius: max(16px, inherit) !important; border: 1px solid rgba(var(--alert-color-rgb), 0.25) !important; box-shadow: 0 0 20px 4px rgba(var(--alert-color-rgb), 0.4), inset 0 0 12px rgba(var(--alert-color-rgb), 0.15) !important; background: radial-gradient(circle, rgba(var(--alert-color-rgb), 0.08) 0%, transparent 75%) !important; animation: aiAlertHoloHaloExpand 2s cubic-bezier(0.16, 1, 0.3, 1) infinite !important; pointer-events: none !important; z-index: 1 !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-holographic-halo::after, .ai-alert-mode.ai-alert-holographic-halo::after { animation-delay: 0.5s !important; } .ai-alert-mode.amti-fab-no-color.ai-alert-holographic-halo::before, .ai-alert-mode.amti-fab-no-color.ai-alert-holographic-halo::after { border-color: rgba(var(--alert-color-rgb), 0.18) !important; box-shadow: 0 0 14px rgba(var(--alert-color-rgb), 0.2) !important; } @keyframes aiAlertHoloHaloExpand { 0% { transform: scale(0.92); opacity: 0.85; } 50% { opacity: 0.35; } 100% { transform: scale(1.95); opacity: 0; } } /* 13. Feixe Cyber (💫 Feixe Cyber Futurista e Translúcido) */ @keyframes aiAlertCyberPulse { 0%, 100% { box-shadow: 0 0 14px 2px rgba(var(--alert-color-rgb), 0.5), inset 0 0 10px rgba(var(--alert-color-rgb), 0.25); transform: scale(1); } 50% { box-shadow: 0 0 28px 5px rgba(var(--alert-color-rgb), 0.85), 0 0 48px 10px rgba(var(--alert-color-rgb), 0.35), inset 0 0 16px rgba(var(--alert-color-rgb), 0.45); transform: scale(1.04); } } .ai-alert-mode.ai-alert-cyber-beam { animation: aiAlertCyberPulse 1.6s ease-in-out infinite !important; overflow: visible !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-cyber-beam::before, .ai-alert-mode.ai-alert-cyber-beam::before { content: '' !important; display: block !important; position: absolute !important; inset: -6px !important; border-radius: max(12px, inherit) !important; border: 1px solid rgba(var(--alert-color-rgb), 0.35) !important; box-shadow: 0 0 18px 3px rgba(var(--alert-color-rgb), 0.5), inset 0 0 10px rgba(var(--alert-color-rgb), 0.2) !important; animation: aiAlertCyberBlink 1.6s ease-in-out infinite !important; pointer-events: none !important; z-index: 2 !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-cyber-beam::after, .ai-alert-mode.ai-alert-cyber-beam::after { content: '' !important; display: block !important; position: absolute !important; inset: -10px !important; border-radius: max(16px, inherit) !important; border: 1px dashed rgba(var(--alert-color-rgb), 0.25) !important; box-shadow: 0 0 24px 4px rgba(var(--alert-color-rgb), 0.3) !important; animation: aiAlertCyberExpand 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite !important; pointer-events: none !important; z-index: 1 !important; } @keyframes aiAlertCyberBlink { 0%, 100% { opacity: 0.65; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.03); } } @keyframes aiAlertCyberExpand { 0% { transform: scale(0.92); opacity: 0.8; } 100% { transform: scale(1.75); opacity: 0; } } /* 14. Radar Sonar (📡 Radar Sonar com Varredura Eférea) */ @keyframes aiAlertSonarCenter { 0%, 100% { transform: scale(1); box-shadow: 0 0 14px rgba(var(--alert-color-rgb), 0.45); } 30% { transform: scale(1.05); box-shadow: 0 0 26px rgba(var(--alert-color-rgb), 0.75); } 60% { transform: scale(1.01); } } .ai-alert-mode.ai-alert-radar-sonar { animation: aiAlertSonarCenter 2.2s ease-in-out infinite !important; overflow: visible !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-radar-sonar::before, .ai-alert-mode.ai-alert-radar-sonar::before { content: '' !important; display: block !important; position: absolute !important; inset: -6px !important; border-radius: 50% !important; border: 1px solid rgba(var(--alert-color-rgb), 0.3) !important; box-shadow: 0 0 18px 2px rgba(var(--alert-color-rgb), 0.4), inset 0 0 10px rgba(var(--alert-color-rgb), 0.15) !important; animation: aiAlertSonarPing 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite !important; pointer-events: none !important; z-index: 1 !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-radar-sonar::after, .ai-alert-mode.ai-alert-radar-sonar::after { content: '' !important; display: block !important; position: absolute !important; inset: -8px !important; border-radius: 50% !important; border: 1px solid rgba(var(--alert-color-rgb), 0.2) !important; background: conic-gradient(from 0deg, rgba(var(--alert-color-rgb), 0.35) 0deg, rgba(var(--alert-color-rgb), 0.05) 60deg, transparent 90deg, transparent 360deg) !important; filter: none !important; animation: aiAlertRadarSweep 2.2s linear infinite !important; pointer-events: none !important; z-index: 2 !important; } .ai-alert-mode.amti-fab-no-color.ai-alert-radar-sonar::before { border-color: rgba(var(--alert-color-rgb), 0.2) !important; } @keyframes aiAlertSonarPing { 0% { transform: scale(0.92); opacity: 0.85; box-shadow: 0 0 0 rgba(var(--alert-color-rgb), 0.5); } 60% { opacity: 0.35; box-shadow: 0 0 18px rgba(var(--alert-color-rgb), 0.35); } 100% { transform: scale(2.1); opacity: 0; box-shadow: 0 0 28px transparent; } } @keyframes aiAlertRadarSweep { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 15. Órbita Estelar (🪐 Órbita Estelar Suave) */ @keyframes aiAlertStellarCore { 0%, 100% { box-shadow: 0 0 16px 2px rgba(var(--alert-color-rgb), 0.5), 0 0 32px 4px rgba(var(--alert-color-rgb), 0.25); transform: scale(1); } 50% { box-shadow: 0 0 24px 4px rgba(var(--alert-color-rgb), 0.75), 0 0 46px 8px rgba(var(--alert-color-rgb), 0.35); transform: scale(1.05); } } .ai-alert-mode.ai-alert-stellar-orbit { animation: aiAlertStellarCore 2.6s ease-in-out infinite !important; overflow: visible !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-stellar-orbit::before, .ai-alert-mode.ai-alert-stellar-orbit::before { content: '' !important; display: block !important; position: absolute !important; inset: -12px !important; border-radius: 50% !important; border: 1px dashed rgba(var(--alert-color-rgb), 0.25) !important; box-shadow: 0 0 14px rgba(var(--alert-color-rgb), 0.15) !important; animation: aiAlertStellarOrbitSpin 3s linear infinite !important; pointer-events: none !important; z-index: 1 !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-stellar-orbit::after, .ai-alert-mode.ai-alert-stellar-orbit::after { content: '' !important; display: block !important; position: absolute !important; top: -8px !important; left: 50% !important; width: 8px !important; height: 8px !important; margin-left: -4px !important; border-radius: 50% !important; background: var(--alert-color) !important; box-shadow: 0 0 12px 3px var(--alert-color), 0 0 24px 6px rgba(var(--alert-color-rgb), 0.5) !important; transform-origin: 4px calc(50% + 36px) !important; animation: aiAlertStellarSatellite 3s linear infinite !important; pointer-events: none !important; z-index: 3 !important; } .ai-alert-mode.amti-fab-no-color.ai-alert-stellar-orbit::after { box-shadow: 0 0 8px 1px var(--alert-color) !important; } @keyframes aiAlertStellarOrbitSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes aiAlertStellarSatellite { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 16. Cristal Radiante (💎 Cristal Radiante Translúcido e Lapidado) */ @keyframes aiAlertCrystalPulse { 0%, 100% { box-shadow: 0 0 16px 2px rgba(var(--alert-color-rgb), 0.5), 0 0 28px 4px rgba(var(--alert-color-rgb), 0.22), inset 0 0 10px rgba(255, 255, 255, 0.35); transform: scale(1); } 40% { box-shadow: 0 0 26px 5px rgba(var(--alert-color-rgb), 0.85), 0 0 50px 10px rgba(var(--alert-color-rgb), 0.35), inset 0 0 16px rgba(255, 255, 255, 0.6); transform: scale(1.05); } } .ai-alert-mode.ai-alert-crystal-radiant { animation: aiAlertCrystalPulse 2s ease-in-out infinite !important; overflow: visible !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-crystal-radiant::before, .ai-alert-mode.ai-alert-crystal-radiant::before { content: '' !important; display: block !important; position: absolute !important; inset: -5px !important; border-radius: max(12px, inherit) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; box-shadow: 0 0 18px 3px rgba(var(--alert-color-rgb), 0.5), inset 0 0 12px rgba(255, 255, 255, 0.3) !important; animation: aiAlertCrystalFacet 2s ease-in-out infinite alternate !important; pointer-events: none !important; z-index: 1 !important; } html[data-theme] .amti-monitor-fab.ai-alert-mode.ai-alert-crystal-radiant::after, .ai-alert-mode.ai-alert-crystal-radiant::after { content: '' !important; display: block !important; position: absolute !important; inset: -10px !important; border-radius: max(16px, inherit) !important; border: 1px solid rgba(var(--alert-color-rgb), 0.22) !important; box-shadow: 0 0 24px 6px rgba(var(--alert-color-rgb), 0.3) !important; background: radial-gradient(circle, rgba(var(--alert-color-rgb), 0.05) 0%, transparent 75%) !important; animation: aiAlertCrystalRing 2s cubic-bezier(0.16, 1, 0.3, 1) infinite !important; pointer-events: none !important; z-index: 1 !important; } @keyframes aiAlertCrystalFacet { 0% { transform: scale(0.96); opacity: 0.4; } 100% { transform: scale(1.08); opacity: 0.9; } } @keyframes aiAlertCrystalRing { 0% { transform: scale(0.92); opacity: 0.8; } 100% { transform: scale(1.85); opacity: 0; } } /* OFFLINE/DISCONNECT HAZARD PULSE - HIGHLIGHTED EVEN WITH OPEN POPUPS AND BLUR BACKGROUNDS */ html[data-theme] .amti-monitor-fab.ai-alert-offline-pulse, .amti-monitor-fab.ai-alert-offline-pulse { background: #ffc107 !important; border: none !important; box-shadow: 0 0 24px rgba(255, 193, 7, 0.85), 0 0 48px rgba(255, 193, 7, 0.45) !important; overflow: visible !important; animation: aiAlertOfflineHeartbeat 1.5s infinite ease-in-out !important; color: #000 !important; z-index: 99999999 !important; pointer-events: auto !important; opacity: 1 !important; filter: none !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Hide theme overlays when offline */ html[data-theme] .amti-monitor-fab.ai-alert-offline-pulse::before, html[data-theme] .amti-monitor-fab.ai-alert-offline-pulse::after, .amti-monitor-fab.ai-alert-offline-pulse::before, .amti-monitor-fab.ai-alert-offline-pulse::after { display: none !important; animation: none !important; } html[data-theme] .amti-monitor-fab.ai-alert-offline-pulse i, html[data-theme] .amti-monitor-fab.ai-alert-offline-pulse svg, .amti-monitor-fab.ai-alert-offline-pulse i, .amti-monitor-fab.ai-alert-offline-pulse svg, .amti-disconnect-svg { position: relative !important; z-index: 10 !important; color: #000 !important; fill: #000 !important; stroke: #000 !important; animation: none !important; transform: none !important; width: 36px !important; height: 36px !important; max-width: 75% !important; max-height: 75% !important; aspect-ratio: 1 / 1 !important; object-fit: contain !important; flex-shrink: 0 !important; display: block !important; margin: auto !important; } @keyframes aiAlertOfflineHeartbeat { 0% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.14); } 60% { transform: scale(1); } 100% { transform: scale(1); } } /* ============================================================ SKELETON LOADING & SCROLL INFINITO Estilos para feedback visual durante carregamento de dados ============================================================ */ /* Células skeleton com animação shimmer */ .amti-skeleton-row td { padding: 10px 8px; border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06)); } .amti-skeleton-cell { height: 14px; border-radius: 6px; background: linear-gradient( 90deg, var(--bg-secondary, rgba(255,255,255,0.06)) 25%, var(--bg-tertiary, rgba(255,255,255,0.12)) 50%, var(--bg-secondary, rgba(255,255,255,0.06)) 75% ); background-size: 200% 100%; animation: amti-shimmer 1.4s ease-in-out infinite; } .amti-skeleton-row:nth-child(odd) .amti-skeleton-cell { width: 80%; } .amti-skeleton-row:nth-child(even) .amti-skeleton-cell { width: 65%; } .amti-skeleton-row:first-child .amti-skeleton-cell { width: 45%; } .amti-skeleton-row td:first-child .amti-skeleton-cell { width: 50px; } .amti-skeleton-row td:last-child .amti-skeleton-cell { width: 70px; margin-left: auto; } @keyframes amti-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Linha de indicador "carregando mais..." */ .amti-load-more-row td { background: transparent !important; border: none !important; } .amti-suggestion-wrapper { position: relative; z-index: 60; } .amti-suggestion-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; background: var(--bg-card, #1e293b); border: 1px solid var(--border-color); border-radius: 8px; margin-top: 4px; max-height: 260px; overflow-y: auto; display: none; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); } .amti-suggestion-dropdown.open { display: block; } .amti-suggestion-item { padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-color); transition: background 0.15s; } .amti-suggestion-item:last-child { border-bottom: none; } .amti-suggestion-item:hover { background: var(--bg-hover); } .amti-suggestion-item i { color: var(--primary); font-size: 1rem; flex-shrink: 0; } .amti-suggestion-item .amti-suggestion-name { font-weight: 600; color: var(--text-primary); } .amti-suggestion-item .amti-suggestion-detail { font-size: 0.82rem; color: var(--text-secondary); } .amti-suggestion-empty { padding: 14px; text-align: center; color: var(--text-secondary); font-size: 0.9rem; } #finalizedOsArchiveCard[data-collapsed="true"], #activeOsCard[data-collapsed="true"], #aiAdvisorPromptCard[data-collapsed="true"], #aiAdvisorWhatsAppCard[data-collapsed="true"] { min-height: 0 !important; height: max-content !important; flex: 0 0 auto !important; } #activeOsCard[data-collapsed="true"] #osSearchContainer, #activeOsCard[data-collapsed="true"] #openOSModalBtn { display: none !important; } /* Clickable collapsed cards — cursor indicates collapse/expand */ #finalizedOsArchiveCard[data-collapsed="true"], #activeOsCard[data-collapsed="true"] { cursor: pointer; user-select: none; } .amti-drag-ghost { opacity: 0.3 !important; background: var(--surface-medium, #1e293b) !important; border: 2px dashed rgba(56, 189, 248, 0.5) !important; } /* ========================================================================= DEFINITIVE FLEX LAYOUT RULES FOR FULL-PAGE CARDS These rules make cards that use amti-flex-tab + amti-flex-1 fill available vertical space without overflowing the browser window. ========================================================================= */ /* Cards inside a flex-tab must be flex-column and fill the pane */ .amti-tab-pane.amti-flex-tab > .amti-grid-card.amti-flex-1, .amti-tab-pane.amti-flex-tab > .amti-card.amti-flex-1 { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } /* The card body inside those cards must also flex and shrink */ .amti-tab-pane.amti-flex-tab > .amti-grid-card.amti-flex-1 > .amti-card-body, .amti-tab-pane.amti-flex-tab > .amti-card.amti-flex-1 > .amti-card-body { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } /* Table containers inside those card bodies scroll vertically */ .amti-tab-pane.amti-flex-tab > .amti-grid-card.amti-flex-1 > .amti-card-body > .amti-table-container, .amti-tab-pane.amti-flex-tab > .amti-card.amti-flex-1 > .amti-card-body > .amti-table-container, .amti-tab-pane.amti-flex-tab > .amti-grid-card.amti-flex-1 .amti-table-container, .amti-tab-pane.amti-flex-tab > .amti-card.amti-flex-1 .amti-table-container, .amti-tab-pane.amti-flex-tab > .amti-grid-card.amti-flex-1 .agenda-list { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: auto !important; } /* Keep scroll containers flexible while tables retain their natural row heights. */ .amti-tab-pane.amti-flex-tab > .amti-grid-card.amti-flex-1 .amti-table-container .amti-table, .amti-tab-pane.amti-flex-tab > .amti-card.amti-flex-1 .amti-table-container .amti-table { height: auto !important; } .amti-tab-pane.amti-flex-tab > .amti-card.amti-flex-1 .amti-table-container, .amti-grid-card.amti-flex-1 .agenda-list, .amti-grid-card.amti-flex-1 .amti-table-wrapper { flex: 1; min-height: 0; overflow-y: auto !important; } /* Special case: cards where amti-table-container is DIRECT child of card (no amti-card-body wrapper) Used in: Banco de Clientes, Inventário de Equipamentos, Cadastro de Serviços, Catálogo de Peças These cards have structure: .amti-card > .amti-card-header + .amti-table-container */ .amti-tab-pane.amti-flex-tab > .amti-card.amti-flex-1.amti-flex-col { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } .amti-tab-pane.amti-flex-tab > .amti-card.amti-flex-1.amti-flex-col > .amti-card-header { flex-shrink: 0; } .amti-tab-pane.amti-flex-tab > .amti-card.amti-flex-1.amti-flex-col > .amti-table-container { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: auto !important; } /* OS tab: active OS card grows, finalized stays collapsed (and vice-versa) */ #tab-orders > #activeOsCard.amti-flex-1, #tab-orders > #finalizedOsArchiveCard.amti-flex-1 { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; height: 100% !important; overflow: hidden !important; } #tab-orders > #activeOsCard > .os-card-header, #tab-orders > #finalizedOsArchiveCard > .os-card-header { flex-shrink: 0 !important; } #tab-orders > #activeOsCard.amti-flex-1 > #activeOsBody, #tab-orders > #finalizedOsArchiveCard.amti-flex-1 > #finalizedOsArchiveBody { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; height: 100% !important; overflow: hidden !important; } #tab-orders > #activeOsCard.amti-flex-1 > #activeOsBody > div:first-child, #tab-orders > #finalizedOsArchiveCard.amti-flex-1 > #finalizedOsArchiveBody > div:first-child { flex-shrink: 0 !important; } /* Keep the scroll region full-height while OS rows retain their natural height. */ #tab-orders > #activeOsCard.amti-flex-1 .amti-table-container, #tab-orders > #finalizedOsArchiveCard.amti-flex-1 .amti-table-container, #activeOsCard .amti-table-container, #finalizedOsArchiveCard .amti-table-container { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; height: 100% !important; max-height: none !important; overflow-y: auto !important; overflow-x: auto !important; } #tab-orders > #activeOsCard.amti-flex-1 .amti-table-container .amti-table, #tab-orders > #finalizedOsArchiveCard.amti-flex-1 .amti-table-container .amti-table, #activeOsCard .amti-table-container .amti-table, #finalizedOsArchiveCard .amti-table-container .amti-table { width: 100% !important; display: table !important; } /* Legacy grid-card flex support (dashboard home) */ .amti-grid-card.amti-flex-1.amti-digital-clock, .amti-modern-calendar { border-radius: var(--radius-lg); padding: 18px; box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0,0,0,0.04); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; transform: translateZ(0); } .amti-grid-card.amti-flex-1 { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .amti-grid-card.amti-flex-1 .amti-card-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .amti-grid-card.amti-flex-1 .amti-table-container, AGENDA & DATETIME CARDS: NO SCROLLBARS, COMPACT LAYOUT ===================================================================== */ /* Hide scrollbars visually on agenda list (keep scroll functionality) */ #tab-agenda #agendaItemsContainer { scrollbar-width: none !important; -ms-overflow-style: none !important; } #tab-agenda #agendaItemsContainer::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* No scrollbar on datetime card body */ #tab-agenda #agendaDateTimeBody { overflow: hidden !important; } /* Compact agenda items inside the agenda tab */ #tab-agenda .agenda-item { padding: 10px 12px 10px 12px; margin-bottom: 0; } #tab-agenda .agenda-info { gap: 2px; } /* Compact calendar inside the datetime card */ #tab-agenda .amti-modern-calendar { gap: 3px; padding: 10px !important; background: var(--bg-card); border: 1px solid var(--border-color); } #tab-agenda .amti-modern-calendar .cal-day { padding: 0; font-size: 0.72rem; } #tab-agenda .amti-modern-calendar .calendar-header { padding-bottom: 3px; } #tab-agenda .amti-modern-calendar .cal-month-title { font-size: 0.82rem; } #tab-agenda .amti-modern-calendar .calendar-weekdays { font-size: 0.65rem; padding: 2px 0; } #tab-agenda .amti-modern-calendar .calendar-days-grid { gap: 2px; } /* Fixed digital clock in agenda tab (no theme class) */ #tab-agenda .amti-clock-widget { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 8px; box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0,0,0,0.04); text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; } /* Compact digital clock inside the datetime card */ #tab-agenda .amti-digital-clock { min-height: auto; gap: 2px; padding: 8px !important; } #tab-agenda .amti-clock-widget .clock-time, #tab-agenda .amti-digital-clock .clock-time { background: none; -webkit-background-clip: unset; -webkit-text-fill-color: unset; background-clip: unset; background-image: none; filter: none; color: var(--text-primary); font-size: clamp(1.2rem, 3.5vw, 2rem); letter-spacing: 1px; } #tab-agenda .amti-digital-clock .clock-date, #tab-agenda .amti-clock-widget .clock-date { font-size: 0.66rem; } /* Compact analog clock inside the datetime card */ /* Compact analog clock inside the datetime card */ #tab-agenda .amti-analog-clock { width: min(100px, 70%); height: min(100px, 70%); border-width: 2px; margin: 4px auto; } #tab-agenda .amti-analog-clock .hour-hand { height: 28px; width: 3px; } #tab-agenda .amti-analog-clock .minute-hand { height: 38px; width: 2px; } #tab-agenda .amti-analog-clock .second-hand { background: var(--table-header-bg, #0f172a) !important; background-color: var(--table-header-bg, #0f172a) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; box-shadow: 0 -1px 0 0 var(--table-header-bg, #0f172a) !important; height: 42px; width: 1.5px; } #tab-agenda .amti-analog-clock .clock-center { width: 8px; height: 8px; box-shadow: 0 0 0 2px rgba(99,102,241,0.15); } #tab-agenda .amti-analog-clock .clock-markers .marker { font-size: 0.55rem; } #tab-agenda .amti-analog-clock .clock-markers .m12 { top: 4px; } #tab-agenda .amti-analog-clock .clock-markers .m3 { right: 5px; } #tab-agenda .amti-analog-clock .clock-markers .m6 { bottom: 4px; } #tab-agenda .amti-analog-clock .clock-markers .m9 { left: 5px; } /* Design variants compact */ #tab-agenda .design-digital-retro .clock-time { font-size: clamp(1.2rem, 3.5vw, 2rem) !important; padding: 6px 14px !important; } #tab-agenda .design-digital-minimal .clock-time { font-size: clamp(1rem, 3vw, 1.6rem) !important; } /* Remove outer padding from widgets inside the datetime card */ #tab-agenda .amti-clock-widget { padding: 0; } /* Responsive breakpoint: very narrow cards (< 250px) */ @media (max-width: 250px) { #tab-agenda .agenda-item { padding: 8px 8px 8px 10px; } #tab-agenda .agenda-title { font-size: 0.82rem; } #tab-agenda .agenda-meta { font-size: 0.7rem; gap: 6px; } } /* ===================================================================== DASHBOARD OVERRIDES: STICKY HEADERS, FONT/PADDING STANDARDIZATION, HOVER CLIPPING, AND POPUP WIDTH ===================================================================== */ /* 1. Sticky Table Headers for all tables */ .amti-table th, .view-os-items-table th { position: sticky !important; top: -1px !important; z-index: 10 !important; background: var(--table-header-bg, #0f172a) !important; background-color: var(--table-header-bg, #0f172a) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; box-shadow: 0 -1px 0 0 var(--table-header-bg, #0f172a) !important; } html[data-theme='light'] .amti-table th, html[data-theme='light'] .view-os-items-table th { background: #ffffff !important; background-color: #ffffff !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; box-shadow: 0 -1px 0 0 #ffffff !important; } /* 2. Standardize all tables' font size and vertical padding */ .amti-table th, .amti-table td, .view-os-items-table th, .view-os-items-table td { padding: 5px 10px !important; font-size: 0.9rem !important; } /* 3. Prevent hover cards from being cut off at container boundaries */ .amti-dashboard-grid, .amti-settings-grid, .amti-cards-grid, .amti-card-library-grid, #amtiDashboardGrid { overflow: visible !important; } /* Ensure active/hovered cards float on top of others */ .amti-grid-card:hover, .amti-card:hover { z-index: 15 !important; } /* 4. Improve popups/modals: prevent horizontal stretching, center properly */ .amti-modal-content { width: 90% !important; max-width: 550px !important; } .amti-modal-content-sm { max-width: 440px !important; } .amti-modal-content-lg { max-width: 750px !important; } .amti-modal-content-wide { max-width: 960px !important; } .amti-modal-content-xl { max-width: 1200px !important; } /* Popup de equipamento: respeita o layout wide sem comprimir o formulário e o footer */ #equipmentModal .amti-modal-content { width: min(90vw, 960px) !important; max-width: 960px !important; } #equipmentModal .amti-form-row { gap: 16px; } #equipmentModal .amti-modal-footer { flex-wrap: wrap; row-gap: 10px; } #equipmentModal .amti-modal-footer .amti-btn { flex: 0 0 auto; } /* ============================================================ AI ALERT MODAL ============================================================ */ .ai-alert-modal-content { border: none; overflow: hidden; max-width: 520px !important; } .ai-alert-modal-content .ai-alert-modal-header { background: linear-gradient(135deg, #1e1b4b, #312e81); padding: 18px 20px; display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; } .ai-alert-modal-content .ai-alert-modal-header::after { content: ''; position: absolute; bottom: 0; left: 20px; right: 20px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,193,7,0.4), transparent); } .ai-alert-modal-content .ai-alert-modal-header-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,193,7,0.15); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #ffc107; flex-shrink: 0; box-shadow: 0 0 12px rgba(255,193,7,0.2); } .ai-alert-modal-content .ai-alert-modal-header-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ai-alert-modal-content .ai-alert-modal-header-text h3 { margin: 0; font-weight: 700; font-size: 1.05rem; color: #f1f5f9; letter-spacing: 0.3px; } .ai-alert-modal-content .ai-alert-modal-header-badge { font-size: 0.68rem; color: rgba(255,193,7,0.7); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; } .ai-alert-modal-content .amti-modal-close { color: rgba(255,255,255,0.5); font-size: 1.5rem; transition: color 0.2s; align-self: flex-start; margin-top: -2px; } .ai-alert-modal-content .amti-modal-close:hover { color: #fff; } .ai-alert-modal-content .ai-alert-modal-body { padding: 20px; background: transparent; position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: 70vh; } .ai-alert-modal-content .ai-alert-hero { text-align: center; margin-bottom: 20px; } .ai-alert-modal-content .ai-alert-hero-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,193,7,0.08); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 1.4rem; color: #ffc107; animation: aiAlertHeroPulse 2s ease-in-out infinite; } @keyframes aiAlertHeroPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,0.2); } 50% { box-shadow: 0 0 0 10px rgba(255,193,7,0); } } .ai-alert-modal-content .ai-alert-hero-text { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.5; margin: 0; } .ai-alert-modal-content .ai-alert-options { display: flex; flex-direction: column; gap: 10px; } .ai-alert-modal-content .ai-alert-option-btn { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-input); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-align: left; font-family: inherit; width: 100%; } .ai-alert-modal-content .ai-alert-option-btn:hover { transform: translateX(4px); border-color: rgba(255,193,7,0.3); } .ai-alert-modal-content .ai-alert-option-shortcut:hover { background: rgba(99,102,241,0.04); border-color: rgba(99,102,241,0.25); } .ai-alert-modal-content .ai-alert-option-shortcut .ai-alert-option-icon { color: var(--color-indigo); } .ai-alert-modal-content .ai-alert-option-message:hover { background: rgba(255,193,7,0.04); border-color: rgba(255,193,7,0.25); } .ai-alert-modal-content .ai-alert-option-message .ai-alert-option-icon { color: #ffc107; } .ai-alert-modal-content .ai-alert-option-icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; } .ai-alert-modal-content .ai-alert-option-label { flex: 1; font-size: 0.88rem; color: var(--text-primary); } .ai-alert-modal-content .ai-alert-option-arrow { color: var(--text-muted); font-size: 0.75rem; opacity: 0.4; transition: opacity 0.2s; } .ai-alert-modal-content .ai-alert-option-btn:hover .ai-alert-option-arrow { opacity: 0.8; } /* Message view */ .ai-alert-modal-content .ai-alert-message-card { background: linear-gradient(135deg, rgba(255,193,7,0.04), rgba(255,193,7,0.01)); border: 1px solid rgba(255,193,7,0.15); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 18px; } .ai-alert-modal-content .ai-alert-message-card-header { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(255,193,7,0.06); border-bottom: 1px solid rgba(255,193,7,0.08); font-size: 0.75rem; font-weight: 600; color: rgba(255,193,7,0.8); text-transform: uppercase; letter-spacing: 0.4px; } .ai-alert-modal-content .ai-alert-message-card-header i { font-size: 0.7rem; } .ai-alert-modal-content .ai-alert-message-text { margin: 0; padding: 16px 14px; font-size: 0.92rem; line-height: 1.6; color: var(--text-primary); } .ai-alert-modal-content .ai-alert-modal-footer { flex: 0 0 auto; position: relative; z-index: 2; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg-surface, var(--card-surface, #1e293b)); border-top: 1px solid rgba(148,163,184,0.16); } .ai-alert-modal-content .ai-alert-modal-footer > .ai-alert-actions { display: grid; flex: 1 1 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; min-width: 0; min-height: 0; max-height: none; height: auto; margin: 0; } .ai-alert-modal-content .ai-alert-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .ai-alert-modal-content .ai-alert-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 10px 8px; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); font-size: 0.82rem; line-height: 1.35; font-family: inherit; cursor: pointer; transition: all 0.2s; font-weight: 500; text-align: center; white-space: normal; overflow-wrap: anywhere; } .ai-alert-modal-content .ai-alert-action-remind { color: var(--text-secondary); } .ai-alert-modal-content .ai-alert-action-remind:hover { border-color: rgba(255,193,7,0.3); background: rgba(255,193,7,0.04); color: #ffc107; } .ai-alert-modal-content .ai-alert-action-primary { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; border-color: transparent; font-weight: 600; } .ai-alert-modal-content .ai-alert-action-primary:hover { background: linear-gradient(135deg, #4338ca, #4f46e5); box-shadow: 0 4px 12px rgba(99,102,241,0.3); } .ai-alert-modal-content .ai-alert-action-agenda { background: linear-gradient(135deg, #059669, #10b981); color: #fff; border-color: transparent; font-weight: 600; } .ai-alert-modal-content .ai-alert-action-agenda:hover { background: linear-gradient(135deg, #047857, #059669); box-shadow: 0 4px 12px rgba(16,185,129,0.3); } /* ── Structured Alert Content ── */ .ai-alert-modal-content .ai-alert-info-section { margin-bottom: 18px; padding: 12px; border: 1px solid rgba(148,163,184,0.16); border-radius: 14px; background: linear-gradient(145deg, rgba(148,163,184,0.055), rgba(15,23,42,0.12)); box-shadow: 0 8px 20px rgba(0,0,0,0.08); } .ai-alert-modal-content .ai-alert-info-section:last-child { margin-bottom: 0; } .ai-alert-modal-content .ai-alert-info-section-header { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); padding: 2px 2px 10px; border-bottom: 1px solid rgba(148,163,184,0.16); margin-bottom: 10px; } .ai-alert-modal-content .ai-alert-info-section-header i { font-size: 0.8rem; opacity: 0.7; } .ai-alert-modal-content .ai-alert-agenda-section .ai-alert-info-section-header { color: #fbbf24; border-color: rgba(251,191,36,0.22); } .ai-alert-modal-content .ai-alert-agenda-section { border-color: rgba(251,191,36,0.2); background: linear-gradient(145deg, rgba(251,191,36,0.075), rgba(15,23,42,0.14)); } .ai-alert-modal-content .ai-alert-tips-section { border-color: rgba(129,140,248,0.24); background: linear-gradient(145deg, rgba(99,102,241,0.09), rgba(15,23,42,0.14)); } .ai-alert-modal-content .ai-alert-tips-section .ai-alert-info-section-header { color: #a5b4fc; border-color: rgba(129,140,248,0.24); } .ai-alert-modal-content .ai-alert-tip-row { display: flex; align-items: flex-start; gap: 8px; padding: 10px 2px; border-bottom: 1px solid rgba(148,163,184,0.14); font-size: 0.9rem; line-height: 1.55; color: var(--text-primary); } .ai-alert-modal-content .ai-alert-tip-row:first-of-type { padding-top: 2px; } .ai-alert-modal-content .ai-alert-tip-row:last-child { border-bottom: 0; padding-bottom: 2px; } .ai-alert-modal-content .ai-alert-info-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.04); background: rgba(255,255,255,0.015); margin-bottom: 4px; transition: background 0.15s; } .ai-alert-modal-content .ai-alert-info-row:last-child { margin-bottom: 0; } .ai-alert-modal-content .ai-alert-info-row:hover { background: rgba(255,255,255,0.03); } .ai-alert-modal-content .ai-alert-info-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ai-alert-modal-content .ai-alert-info-title { font-size: 0.86rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-alert-modal-content .ai-alert-info-meta { font-size: 0.76rem; color: var(--text-muted); } .ai-alert-modal-content .ai-alert-info-badge { flex-shrink: 0; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; } .ai-alert-badge-time { background: rgba(99,102,241,0.1); color: #818cf8; border: 1px solid rgba(99,102,241,0.2); } .ai-alert-agenda-expired { border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.04); } .ai-alert-agenda-expired .ai-alert-info-badge { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.3); } .ai-alert-agenda-urgent { border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.03); } .ai-alert-agenda-urgent .ai-alert-info-badge { background: rgba(239,68,68,0.12); color: #fb7185; border-color: rgba(239,68,68,0.25); animation: aiAlertUrgentPulse 1.5s ease-in-out infinite; } .ai-alert-agenda-soon { border-color: rgba(251,191,36,0.18); background: rgba(251,191,36,0.03); } .ai-alert-agenda-soon .ai-alert-info-badge { background: rgba(251,191,36,0.12); color: #fbbf24; border-color: rgba(251,191,36,0.25); } @keyframes aiAlertUrgentPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .ai-alert-modal-content .ai-alert-tip-row { border-color: rgba(99,102,241,0.08) !important; } .ai-alert-modal-content .ai-alert-tip-text { font-weight: 500 !important; white-space: normal !important; line-height: 1.45; } @media (max-width: 600px) { .ai-alert-modal-content .ai-alert-modal-footer { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); } .ai-alert-modal-content .ai-alert-modal-footer > .ai-alert-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-alert-modal-content .ai-alert-action-primary { grid-column: 1 / -1; } } /* Disable hover float for all main full-tab cards to prevent top clipping and standardize UX */ .amti-tab-pane > .amti-grid-card:hover, .amti-tab-pane > .amti-card:hover { transform: none !important; } /* ======================================================== MODERN PDV WIDGET CARD (FRENTE DE CAIXA RÁPIDO) Layout Ultra-Organizado, Responsivo e Estilizado ======================================================== */ .amti-grid-card.pdv-widget-card { display: flex !important; flex-direction: column !important; border-radius: var(--radius-lg, 14px); background: var(--bg-card, #131a25); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.35); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease; overflow: hidden !important; } .amti-grid-card.pdv-widget-card:hover { box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.45); border-color: rgba(16, 185, 129, 0.25); } /* Header Refinado com Identidade Visual e Badge */ .pdv-widget-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%); gap: 12px; flex-shrink: 0; } .pdv-widget-header-main { display: flex; align-items: center; gap: 10px; min-width: 0; } .pdv-widget-header-avatar { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(6, 182, 212, 0.16)); border: 1px solid rgba(16, 185, 129, 0.35); color: #34d399; display: flex; align-items: center; justify-content: center; font-size: 0.90rem; flex-shrink: 0; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2); } .pdv-widget-header-titles { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .pdv-widget-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pdv-widget-header-title { font-size: 0.92rem; font-weight: 700; color: var(--text-main, #f8fafc); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .pdv-status-indicator { display: none !important; } .pdv-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 6px #10b981; animation: pdvPulseDot 1.8s infinite; } @keyframes pdvPulseDot { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } .pdv-widget-header-subtitle { font-size: 0.70rem; color: var(--text-secondary, #94a3b8); font-weight: 500; line-height: 1.2; } .pdv-widget-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .pdv-widget-clear-cart-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 0.70rem; font-weight: 600; color: rgba(239, 68, 68, 0.85); background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.25); cursor: pointer; transition: all 0.2s ease; } .pdv-widget-clear-cart-btn:hover { background: rgba(239, 68, 68, 0.22); color: #ef4444; border-color: rgba(239, 68, 68, 0.45); } .pdv-widget-header-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: rgba(255, 255, 255, 0.05); color: var(--text-secondary, #94a3b8); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.25s ease; flex-shrink: 0; } .pdv-widget-header-badge.has-items { background: rgba(16, 185, 129, 0.18); color: #34d399; border-color: rgba(16, 185, 129, 0.4); box-shadow: 0 0 10px rgba(16, 185, 129, 0.25); } /* Corpo do Widget */ .pdv-widget-card .pdv-widget-body { display: flex; flex-direction: column; flex: 1 1 0px; min-height: 0; min-width: 0; box-sizing: border-box; padding: 12px 14px !important; gap: 12px; background: transparent; overflow-x: hidden; overflow-y: auto; } /* Área de Busca */ .pdv-widget-search-section { position: relative; z-index: 40; flex-shrink: 0; } .pdv-widget-search-bar { position: relative; display: flex; align-items: center; background: rgba(0, 0, 0, 0.30); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 9px; min-height: 42px; padding: 0 6px 0 12px; gap: 8px; transition: all 0.2s ease; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25); } .pdv-widget-search-bar:focus-within { border-color: rgba(16, 185, 129, 0.55); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.42); } .pdv-widget-search-icon { color: var(--text-secondary, #94a3b8); font-size: 0.88rem; pointer-events: none; flex-shrink: 0; transition: color 0.2s ease; } .pdv-widget-search-bar:focus-within .pdv-widget-search-icon { color: #34d399; } .pdv-widget-search-input { flex: 1 1 0%; min-width: 0; padding: 6px 4px !important; background: transparent !important; border: none !important; color: var(--text-main, #f8fafc) !important; font-size: 0.86rem !important; outline: none !important; box-shadow: none !important; } .pdv-widget-search-input::placeholder { color: rgba(255, 255, 255, 0.45) !important; font-size: 0.82rem; } .pdv-widget-search-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .pdv-widget-search-clear { background: rgba(255, 255, 255, 0.08); border: none; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary, #94a3b8); font-size: 0.70rem; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .pdv-widget-search-clear:hover { background: rgba(239, 68, 68, 0.25); color: #ef4444; } /* Botão Escanear no Celular (Quadrado 36x36 alinhado com o botão X) */ .pdv-widget-barcode-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; flex: 0 0 36px !important; aspect-ratio: 1 / 1 !important; padding: 0 !important; margin: 0 !important; border-radius: 8px !important; background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(6, 182, 212, 0.12)); border: 1px solid rgba(16, 185, 129, 0.35); color: #34d399; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; box-sizing: border-box !important; align-self: center !important; } .pdv-widget-barcode-btn i { font-size: 0.95rem; color: #34d399; } .pdv-barcode-btn-label { display: none !important; } .pdv-widget-barcode-btn:hover { background: linear-gradient(135deg, rgba(16, 185, 129, 0.28), rgba(6, 182, 212, 0.2)); border-color: rgba(16, 185, 129, 0.6); color: #6ee7b7; transform: translateY(-1px); box-shadow: 0 0 10px rgba(16, 185, 129, 0.25); } .pdv-widget-barcode-btn:active { transform: translateY(0); } .pdv-widget-barcode-btn.is-activating { background: rgba(16, 185, 129, 0.35); border-color: #34d399; color: #ffffff; } /* Chips de Produtos Rápidos */ .pdv-widget-quick-chips { display: flex; align-items: center; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .pdv-widget-quick-chips::-webkit-scrollbar { display: none; } .pdv-quick-chips-label { font-size: 0.70rem; font-weight: 600; color: var(--text-secondary, #94a3b8); white-space: nowrap; display: flex; align-items: center; gap: 4px; } .pdv-quick-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); color: var(--text-main, #f8fafc); font-size: 0.72rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all 0.15s ease; } .pdv-quick-chip:hover { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.35); color: #34d399; transform: translateY(-1px); } .pdv-chip-price { color: #34d399; font-weight: 700; font-size: 0.70rem; } /* Dropdown de Resultados da Busca */ .pdv-widget-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: rgba(19, 26, 37, 0.96); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 9px; max-height: 220px; overflow-y: auto; z-index: 100; box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05); scrollbar-width: thin; } .pdv-widget-results::-webkit-scrollbar { width: 5px; } .pdv-widget-results::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 999px; } .pdv-widget-result-item { padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.15s ease; } .pdv-widget-result-item:last-child { border-bottom: none; } .pdv-widget-result-item:hover { background: rgba(16, 185, 129, 0.14); padding-left: 14px; } .pdv-widget-result-icon { width: 26px; height: 26px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); display: flex; align-items: center; justify-content: center; color: #34d399; font-size: 0.78rem; flex-shrink: 0; } .pdv-widget-result-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pdv-widget-result-item-name { font-weight: 600; color: var(--text-main, #f8fafc); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdv-widget-result-item-sub { font-size: 0.70rem; } .pdv-widget-result-item-sub.pdv-stock-ok { color: #10b981; } .pdv-widget-result-item-sub.pdv-stock-empty { color: #ef4444; } .pdv-widget-result-item-price { color: #34d399; font-weight: 700; font-size: 0.84rem; flex-shrink: 0; background: rgba(16, 185, 129, 0.1); padding: 2px 8px; border-radius: 5px; border: 1px solid rgba(16, 185, 129, 0.2); } /* Área do Carrinho */ .pdv-widget-cart-section { flex: 1 1 0px; min-height: 120px; display: flex; flex-direction: column; overflow: hidden; } .pdv-widget-cart-container { flex: 1 1 0px; background: rgba(0, 0, 0, 0.22); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.07); overflow-y: auto; scrollbar-width: thin; position: relative; display: flex; flex-direction: column; } .pdv-widget-cart-container::-webkit-scrollbar { width: 5px; } .pdv-widget-cart-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 999px; } .pdv-widget-cart-items { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .pdv-cart-list-wrapper { display: flex; flex-direction: column; gap: 6px; width: 100%; } /* Estado Vazio do Carrinho */ .pdv-empty-cart { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 80px; padding: 14px 12px; text-align: center; user-select: none; } .pdv-empty-icon-bubble { display: none !important; } .pdv-empty-title { font-size: 0.88rem; font-weight: 700; color: var(--text-main, #f8fafc); margin-bottom: 3px; } .pdv-empty-subtitle { font-size: 0.74rem; color: var(--text-secondary, #94a3b8); max-width: 280px; line-height: 1.35; } .pdv-empty-scan-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 14px; border-radius: 8px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(6, 182, 212, 0.1)); border: 1px solid rgba(16, 185, 129, 0.35); color: #34d399; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .pdv-empty-scan-cta:hover { background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(6, 182, 212, 0.18)); border-color: rgba(16, 185, 129, 0.6); color: #6ee7b7; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25); } /* Linha de Item no Carrinho */ .pdv-widget-cart-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; gap: 10px; transition: all 0.2s ease; } .pdv-widget-cart-item:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); } .pdv-widget-cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pdv-widget-cart-item-name { font-size: 0.84rem; font-weight: 600; color: var(--text-main, #f8fafc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .pdv-widget-cart-item-meta { font-size: 0.70rem; color: var(--text-secondary, #94a3b8); margin-top: 2px; } .pdv-widget-cart-item-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Stepper de Quantidade */ .pdv-widget-qty-stepper { display: inline-flex; align-items: center; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; overflow: hidden; } .pdv-widget-stepper-btn { background: transparent; border: none; color: var(--text-secondary, #94a3b8); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.68rem; transition: all 0.15s ease; } .pdv-widget-stepper-btn:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; } .pdv-widget-stepper-val { font-size: 0.78rem; font-weight: 700; color: var(--text-main, #f8fafc); min-width: 20px; text-align: center; user-select: none; } .pdv-widget-item-subtotal { font-size: 0.84rem; font-weight: 700; color: #34d399; min-width: 60px; text-align: right; font-variant-numeric: tabular-nums; } .pdv-widget-item-remove { background: transparent; color: rgba(239, 68, 68, 0.65); border: none; border-radius: 6px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.74rem; transition: all 0.15s ease; } .pdv-widget-item-remove:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; } /* Seção de Fechamento / Rodapé */ .pdv-widget-footer-section { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; margin-top: auto; } .pdv-checkout-panel-head { display: none !important; } .pdv-checkout-panel-title { display: flex; align-items: center; gap: 6px; font-size: 0.80rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-main, #f8fafc); } .pdv-checkout-panel-title i { color: #34d399; } .pdv-checkout-badge { font-size: 0.68rem; font-weight: 600; color: #38bdf8; background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.25); border-radius: 999px; padding: 1px 7px; display: inline-flex; align-items: center; gap: 4px; } /* Seletor de Cliente */ .pdv-widget-client-box { display: flex; flex-direction: column; gap: 4px; } .pdv-widget-client-label { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary, #94a3b8); display: flex; align-items: center; gap: 5px; } .pdv-widget-combobox { position: relative; width: 100%; } .pdv-widget-combobox-trigger, #tab-sales #pdvClientTrigger { width: 100%; height: 42px !important; min-height: 42px !important; max-height: 42px !important; box-sizing: border-box !important; display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 8px; color: var(--text-main, #f8fafc); font-size: 0.80rem; cursor: pointer; transition: all 0.2s ease; } .pdv-widget-combobox-trigger:hover { border-color: rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.38); } .pdv-widget-client-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } /* Seletor de Pagamento com Pills Interativas */ .pdv-widget-payment-box { display: flex; flex-direction: column; gap: 4px; } .pdv-payment-pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .pdv-pay-pill { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.25); color: var(--text-secondary, #94a3b8); font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .pdv-pay-pill:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: var(--text-main, #f8fafc); } .pdv-pay-pill.active { background: rgba(16, 185, 129, 0.16); border-color: rgba(16, 185, 129, 0.45); color: #34d399; box-shadow: 0 0 10px rgba(16, 185, 129, 0.18); } .pdv-pay-pill[data-method="Fiado"] { grid-column: span 2; } .pdv-pay-pill[data-method="Fiado"].active { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.50); color: #fbbf24; box-shadow: 0 0 10px rgba(245, 158, 11, 0.22); } .pdv-widget-add-client-btn, .pdv-page-add-client-btn { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; max-width: 42px !important; max-height: 42px !important; flex: 0 0 42px !important; aspect-ratio: 1 / 1 !important; box-sizing: border-box !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; background: rgba(0, 0, 0, 0.28) !important; color: var(--text-main, #f8fafc) !important; font-size: 0.95rem !important; cursor: pointer !important; transition: all 0.2s ease !important; } .pdv-widget-add-client-btn:hover, .pdv-page-add-client-btn:hover { background: rgba(0, 0, 0, 0.45) !important; border-color: var(--color-cyan, #06b6d4) !important; color: var(--color-cyan, #06b6d4) !important; } .pdv-widget-fiado-date-input { font-size: 0.82rem; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-main, #f8fafc); width: 100%; } /* Card de Resumo do Total */ .pdv-widget-summary-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(6, 182, 212, 0.05)); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: 10px; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.04), 0 4px 12px rgba(0, 0, 0, 0.15); } .pdv-summary-header-row { display: flex; align-items: center; justify-content: space-between; } .pdv-widget-summary-title { font-size: 0.70rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--text-secondary, #94a3b8); } .pdv-widget-summary-count { font-size: 0.74rem; color: rgba(255, 255, 255, 0.75); font-weight: 600; } .pdv-summary-main-row { display: flex; align-items: baseline; justify-content: space-between; } .pdv-summary-sublabel { font-size: 0.70rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text-secondary, #64748b); } .pdv-widget-total-val { color: #34d399; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(16, 185, 129, 0.35); } /* Botão de Finalizar Venda */ .pdv-widget-checkout-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 9px; font-size: 0.90rem; font-weight: 700; letter-spacing: 0.015em; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important; background: linear-gradient(135deg, #047857 0%, #059669 50%, #047857 100%) !important; border: 1px solid rgba(52, 211, 153, 0.5) !important; box-shadow: 0 4px 14px rgba(4, 120, 87, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .pdv-widget-checkout-btn:hover { transform: translateY(-1.5px); background: linear-gradient(135deg, #059669 0%, #065f46 100%) !important; border-color: #34d399 !important; box-shadow: 0 6px 18px rgba(5, 150, 105, 0.45); color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important; } .pdv-widget-checkout-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3); } .pdv-widget-checkout-btn.is-empty { opacity: 0.85; } /* Layout Split Moderno em Desktop para Cards size-full e size-large de Frente de Caixa */ @media (min-width: 860px) { .amti-grid-card.pdv-widget-card.size-full .pdv-widget-body, .amti-grid-card.pdv-widget-card.size-large .pdv-widget-body { display: grid !important; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto 1fr; gap: 16px; padding: 14px 16px !important; align-items: stretch; height: 100%; } .amti-grid-card.pdv-widget-card.size-full .pdv-widget-search-section, .amti-grid-card.pdv-widget-card.size-large .pdv-widget-search-section { grid-column: 1; grid-row: 1; } .amti-grid-card.pdv-widget-card.size-full .pdv-widget-cart-section, .amti-grid-card.pdv-widget-card.size-large .pdv-widget-cart-section { grid-column: 1; grid-row: 2; min-height: 220px; height: 100%; display: flex; flex-direction: column; } .amti-grid-card.pdv-widget-card.size-full .pdv-widget-footer-section, .amti-grid-card.pdv-widget-card.size-large .pdv-widget-footer-section { grid-column: 2; grid-row: 1 / span 2; border-top: none; border-left: 1px solid rgba(255, 255, 255, 0.08); padding-left: 18px; padding-top: 0; margin-top: 0; display: flex; flex-direction: column; gap: 12px; } } /* Tema Claro (Light Mode) */ html[data-theme='light'] .amti-grid-card.pdv-widget-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05); } html[data-theme='light'] .pdv-widget-header { border-bottom-color: rgba(0, 0, 0, 0.06); background: rgba(0, 0, 0, 0.01); } html[data-theme='light'] .pdv-widget-search-bar, html[data-theme='light'] .pdv-widget-cart-container, html[data-theme='light'] .pdv-widget-combobox-trigger, html[data-theme='light'] .pdv-pay-pill { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); } html[data-theme='light'] .pdv-pay-pill.active { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.4); color: #059669; } html[data-theme='light'] .pdv-widget-results { background: rgba(255, 255, 255, 0.98); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); } html[data-theme='light'] .pdv-widget-cart-item { background: #f8fafc; border-color: rgba(0, 0, 0, 0.06); } html[data-theme='light'] .pdv-widget-summary-card { background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(6, 182, 212, 0.04)); border-color: rgba(16, 185, 129, 0.25); } html[data-theme='light'] .pdv-widget-total-val { color: #059669; text-shadow: none; } /* Force all form controls to match button radius */ input.amti-form-control, select.amti-form-control, textarea.amti-form-control, .amti-form-control, .os-card-search-input, .pdv-widget-search-input, .chat-input, #chatInput { border-radius: var(--radius-md) !important; } /* Force remove shadow */ input.amti-form-control, select.amti-form-control, textarea.amti-form-control, .amti-form-control, .os-card-search-input, .pdv-widget-search-input, .chat-input, #chatInput, .amti-search-wrapper, .os-card-search-panel { box-shadow: none !important; outline: none !important; } .amti-monitor-fab { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 56px; height: 56px; border-radius: 50% !important; border: 1px solid rgba(6, 182, 212, 0.35); background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(99, 102, 241, 0.18)); color: #fff; box-shadow: 0 18px 30px rgba(6, 182, 212, 0.2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; } /* Custom spacing and layout improvements */ .amti-topbar-action-group { display: flex; align-items: center; gap: 12px; } .amti-topbar-action-group .amti-btn { height: 42px; min-height: 42px; box-sizing: border-box; } .ai-advisor-suggestions .ai-sugg-list { flex: none !important; } .ai-advisor-suggestions .amti-ai-tip-card { flex: 1; display: flex; flex-direction: column; margin-top: 16px; border: none !important; box-shadow: none !important; background: transparent !important; } .ai-advisor-suggestions .amti-ai-tip-label { padding-bottom: 16px; border: none !important; box-shadow: none !important; outline: none !important; } .ai-advisor-suggestions .amti-ai-tip-copy { flex: 1; overflow-y: auto; } /* Subtle highlight for internal technical info */ .tech-info-highlight { background: var(--accent-soft); border: 1px dashed rgba(129, 140, 248, 0.3) !important; padding: 12px; border-radius: var(--radius-md); margin-bottom: 12px; } .tech-info-highlight label { color: var(--color-indigo) !important; font-weight: 600; display: flex; align-items: center; gap: 6px; } .tech-info-highlight label::before { content: '🔒'; } /* ============================================================ CLOCK & CALENDAR WIDGETS ============================================================ */ .amti-digital-clock, .amti-modern-calendar { border-radius: var(--radius-lg); padding: 18px; box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0,0,0,0.04); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; transform: translateZ(0); } /* Themes styling */ .theme-glass { background: rgba(255, 255, 255, 0.08); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(255, 255, 255, 0.15); color: var(--text-main); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255,255,255,0.1); } .theme-dark, .theme-block-steel, .theme-block-blue, .theme-dark-block { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .theme-light { background: #ffffff; border: 1px solid #e8ecf1; color: #1e293b; box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .theme-cyberpunk { background: linear-gradient(145deg, #0a0a0a, #111); border: 1px solid rgba(236, 72, 153, 0.5); color: #39ff14; box-shadow: 0 0 20px rgba(236, 72, 153, 0.15), inset 0 0 30px rgba(57, 255, 20, 0.02); font-family: 'Courier New', Courier, monospace; } .theme-forest { background: linear-gradient(145deg, #0d3b3e, #1a5c4a); border: 1px solid rgba(16, 185, 129, 0.25); color: #ecfdf5; box-shadow: 0 8px 32px rgba(16, 185, 129, 0.12); } .theme-sunset { background: linear-gradient(145deg, #831843, #9d174d); border: 1px solid rgba(244, 114, 182, 0.3); color: #fdf2f8; box-shadow: 0 8px 32px rgba(236, 72, 153, 0.15); } /* Digital Clock */ .amti-digital-clock { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; min-height: 110px; } .amti-digital-clock .clock-time { font-size: 2.8rem; font-weight: 800; letter-spacing: 2px; line-height: 1; background: linear-gradient(135deg, var(--color-indigo), #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .amti-digital-clock .clock-date { font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; letter-spacing: 0.3px; } /* Modern Calendar */ .amti-modern-calendar { display: flex; flex-direction: column; gap: 10px; } .amti-modern-calendar .calendar-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); } .amti-modern-calendar .cal-month-title { font-weight: 700; font-size: 1rem; letter-spacing: 0.3px; } .amti-modern-calendar .cal-nav-btn { background: transparent; border: 1px solid var(--border-color); color: inherit; font-size: 0.8rem; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .amti-modern-calendar .cal-nav-btn:hover { background: var(--color-indigo); color: #fff; border-color: var(--color-indigo); transform: scale(1.1); } .amti-modern-calendar .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 600; font-size: 0.72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 0; } .amti-modern-calendar .calendar-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .amti-modern-calendar .cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0; font-size: 0.85rem; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; font-weight: 500; } .amti-modern-calendar .cal-day:hover:not(.pad-day):not(.today) { background: rgba(99, 102, 241, 0.08); transform: scale(1.12); } .amti-modern-calendar .cal-day.pad-day { opacity: 0.2; cursor: default; } .amti-modern-calendar .cal-day.pad-day:hover { background: transparent; transform: none; } .amti-modern-calendar .cal-day.today { font-weight: 800; background: var(--color-indigo); color: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35); } .amti-modern-calendar .cal-day.has-appointments { background: #eab308; color: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(234, 179, 8, 0.35); } .amti-modern-calendar .cal-day.has-holiday { background: #371529; color: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(55, 21, 41, 0.45); } .amti-modern-calendar .cal-day.has-appointments.has-holiday { background: linear-gradient(135deg, #eab308 50%, #371529 50%); } .amti-modern-calendar .cal-day.today.has-appointments, .amti-modern-calendar .cal-day.today.has-holiday { background: var(--color-indigo); } /* Appointment Popup Tooltip */ .amti-cal-popup { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: 0 20px 60px -12px rgba(0,0,0,0.18), 0 8px 20px -8px rgba(0,0,0,0.1); width: 280px; overflow: hidden; animation: popupSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes popupSlideIn { from { opacity: 0; transform: translateY(-8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .amti-cal-popup .popup-header { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #ffffff; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; font-weight: 600; } .amti-cal-popup .popup-header button { background: rgba(255,255,255,0.15); border: none; color: inherit; font-size: 1rem; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .amti-cal-popup .popup-header button:hover { background: rgba(255,255,255,0.3); } .amti-cal-popup .popup-body { padding: 10px 12px; max-height: 250px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } .amti-cal-popup .popup-item { border-bottom: 1px solid var(--border-color); padding-bottom: 8px; } .amti-cal-popup .popup-item:last-child { border-bottom: none; padding-bottom: 0; } .amti-cal-popup .popup-item-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 3px; display: flex; justify-content: space-between; align-items: center; } .amti-cal-popup .popup-item-time, .amti-cal-popup .popup-item-client { font-size: 0.76rem; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; margin-bottom: 2px; } .amti-cal-popup .popup-item-desc { font-size: 0.78rem; color: var(--text-main); background: var(--bg-main); padding: 6px 8px; border-radius: var(--radius-sm); margin-top: 4px; line-height: 1.4; } /* Analog Clock Styling */ .amti-analog-clock { width: 160px; height: 160px; border-radius: 50%; border: 3px solid var(--color-indigo); position: relative; margin: 8px auto; background: radial-gradient(circle at 50% 50%, rgba(99,102,241,0.03), transparent 70%); box-shadow: 0 0 0 6px rgba(99,102,241,0.06), 0 4px 16px rgba(0,0,0,0.08); } .amti-analog-clock .hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom center; border-top-left-radius: 3px; border-top-right-radius: 3px; } .amti-analog-clock .hour-hand { width: 4px; height: 42px; background: var(--text-main); margin-left: -2px; z-index: 3; } .amti-analog-clock .minute-hand { width: 3px; height: 58px; background: var(--text-main); margin-left: -1.5px; z-index: 2; opacity: 0.8; } .amti-analog-clock .second-hand { width: 1.5px; height: 62px; background: #f43f5e; margin-left: -0.75px; z-index: 1; } .amti-analog-clock .clock-center { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--color-indigo); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); } .amti-analog-clock .clock-markers .marker { position: absolute; font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); } .amti-analog-clock .clock-markers .m12 { top: 6px; left: 50%; transform: translateX(-50%); } .amti-analog-clock .clock-markers .m3 { right: 8px; top: 50%; transform: translateY(-50%); } .amti-analog-clock .clock-markers .m6 { bottom: 6px; left: 50%; transform: translateX(-50%); } .amti-analog-clock .clock-markers .m9 { left: 8px; top: 50%; transform: translateY(-50%); } /* Digital Clock Formats & Designs */ .amti-digital-clock .clock-time, .amti-clock-widget .clock-time { font-size: 2.8rem; font-weight: 800; letter-spacing: 2px; } .design-digital-retro .clock-time { font-family: 'Courier New', Courier, monospace; font-size: 2.6rem; color: #39ff14 !important; -webkit-text-fill-color: #39ff14 !important; text-shadow: 0 0 12px rgba(57, 255, 20, 0.8); letter-spacing: 4px; background: #0a0a0a; padding: 12px 28px; border-radius: var(--radius-lg); border: 1px solid rgba(57, 255, 20, 0.3); box-shadow: 0 0 24px rgba(57, 255, 20, 0.1), inset 0 0 20px rgba(57, 255, 20, 0.03); } .design-digital-minimal .clock-time { font-size: 2rem; font-weight: 300; opacity: 0.75; letter-spacing: 3px; } .design-digital-minimal .clock-date { font-size: 0.78rem; opacity: 0.45; } /* Calendar Formats & Designs */ .design-minimal { box-shadow: none !important; border: none !important; background: transparent !important; } .design-minimal .cal-day:hover { background: rgba(99, 102, 241, 0.1) !important; color: var(--color-indigo); } .design-minimal .cal-day.today { border: none; font-weight: 900; color: var(--color-indigo); } .design-neon { border: 1px solid rgba(99, 102, 241, 0.4) !important; box-shadow: 0 0 20px rgba(99, 102, 241, 0.12) !important; color: #c7d2fe !important; } .design-neon .cal-day.today { border-color: #818cf8 !important; box-shadow: 0 0 10px rgba(129, 140, 248, 0.4); } .design-neon .cal-day.has-appointments { background: rgba(79, 70, 229, 0.8) !important; box-shadow: 0 0 8px rgba(79, 70, 229, 0.3); } .design-typewriter { font-family: 'Courier New', monospace; border: 1px solid rgba(255,255,255,0.1) !important; } .design-typewriter .cal-day.today { text-decoration: underline; border: none; } /* Force stability on static cards (disable hover transform movements) */ .amti-grid-card.amti-static-card:hover { transform: none !important; border-color: rgba(148, 163, 184, 0.12) !important; } /* Calendar legend */ .calendar-legend { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 4px 0; border-top: 1px solid var(--border-color); margin: 2px 0 4px; } .calendar-legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.65rem; color: var(--text-secondary); } .calendar-legend-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .calendar-legend-dot.appt { background: #eab308; box-shadow: 0 0 4px rgba(234, 179, 8, 0.4); } .calendar-legend-dot.holiday { background: #371529; box-shadow: 0 0 4px rgba(55, 21, 41, 0.4); } .calendar-legend-dot.today { background: var(--color-indigo); width: 9px; height: 9px; } /* Required Field Star styling */ .amti-required-star { color: #f87171 !important; /* bright rose/red */ font-weight: 800 !important; margin-left: 4px !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; } /* ================================================================ WIDGET THEMES & DESIGNS � ENHANCED v2 ================================================================ */ /* New Themes */ .theme-ocean { background: linear-gradient(145deg, #0c1445, #1a3a6b); border: 1px solid rgba(56, 189, 248, 0.25); color: #e0f2fe; box-shadow: 0 8px 32px rgba(56, 189, 248, 0.12); } .theme-aurora { background: linear-gradient(145deg, #0f0c29, #302b63, #24243e); border: 1px solid rgba(168, 85, 247, 0.3); color: #f3e8ff; box-shadow: 0 8px 32px rgba(168, 85, 247, 0.15); } /* -- Clock Widget base ------------------------------- */ .amti-clock-widget { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; width: 100%; min-height: 120px; } .amti-clock-widget .clock-time { font-size: 3.2rem; font-weight: 800; letter-spacing: 3px; line-height: 1; background: linear-gradient(135deg, #6366f1, #a78bfa, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 8px rgba(99,102,241,0.3)); } .amti-clock-widget .clock-date { font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; letter-spacing: 0.3px; } /* Redesigned analog clock */ .amti-analog-clock { width: 200px; height: 200px; border-radius: 50%; border: 3px solid var(--color-indigo); position: relative; margin: 8px auto; background: radial-gradient(circle at 30% 30%, rgba(99,102,241,0.08), transparent 70%); box-shadow: 0 0 0 8px rgba(99,102,241,0.07), 0 8px 32px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255,255,255,0.05); } /* Tick marks on analog clock */ .amti-analog-clock::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(99,102,241,0.12); } .amti-analog-clock .hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom center; border-radius: 4px 4px 2px 2px; transition: transform 0.05s cubic-bezier(0.4,2.08,.55,.44); } .amti-analog-clock .hour-hand { width: 5px; height: 52px; background: linear-gradient(to top, var(--color-indigo), #818cf8); margin-left: -2.5px; z-index: 3; box-shadow: 0 0 6px rgba(99,102,241,0.4); } .amti-analog-clock .minute-hand { width: 3px; height: 70px; background: linear-gradient(to top, var(--text-main), rgba(255,255,255,0.6)); margin-left: -1.5px; z-index: 2; } .amti-analog-clock .second-hand { width: 1.5px; height: 78px; background: linear-gradient(to top, #f43f5e, #fb7185); margin-left: -0.75px; z-index: 1; box-shadow: 0 0 6px rgba(244,63,94,0.5); } .amti-analog-clock .clock-center { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--color-indigo), #818cf8); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; box-shadow: 0 0 0 4px rgba(99,102,241,0.2), 0 2px 8px rgba(0,0,0,0.3); } .amti-analog-clock .clock-markers .marker { position: absolute; font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); } .amti-analog-clock .clock-markers .m12 { top: 8px; left: 50%; transform: translateX(-50%); } .amti-analog-clock .clock-markers .m3 { right: 10px; top: 50%; transform: translateY(-50%); } .amti-analog-clock .clock-markers .m6 { bottom: 8px; left: 50%; transform: translateX(-50%); } .amti-analog-clock .clock-markers .m9 { left: 10px; top: 50%; transform: translateY(-50%); } /* -- Clock Designs ------------------------------------ */ .design-digital-retro .clock-time { font-family: 'Courier New', Courier, monospace; font-size: 3rem; color: #39ff14 !important; -webkit-text-fill-color: #39ff14 !important; text-shadow: 0 0 15px rgba(57, 255, 20, 0.9), 0 0 30px rgba(57, 255, 20, 0.5); letter-spacing: 6px; background: #050505; padding: 14px 32px; border-radius: var(--radius-lg); border: 1px solid rgba(57, 255, 20, 0.25); box-shadow: 0 0 30px rgba(57, 255, 20, 0.08), inset 0 0 20px rgba(57, 255, 20, 0.02); filter: none; } .design-digital-minimal .clock-time { font-size: 2.2rem; font-weight: 200; letter-spacing: 6px; opacity: 0.7; -webkit-text-fill-color: currentColor; background: none; filter: none; } .design-digital-minimal .clock-date { font-size: 0.72rem; opacity: 0.4; } .design-digital-neon .clock-time { color: #a855f7 !important; -webkit-text-fill-color: #a855f7 !important; text-shadow: 0 0 12px rgba(168,85,247,0.8), 0 0 24px rgba(168,85,247,0.4); font-size: 3rem; letter-spacing: 4px; filter: none; background: none; } .design-digital-flip .clock-time { display: flex; gap: 4px; font-size: 0; /* hide the text, show split segments */ } /* Flip Clock: each char as a card */ .amti-clock-widget.design-digital-flip .clock-time::before { content: attr(data-time-display); font-size: 2.8rem; font-weight: 900; letter-spacing: 2px; font-family: 'Courier New', monospace; background: linear-gradient(135deg, #1e1b4b, #312e81); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; filter: none; } /* -- Calendar Designs -------------------------------- */ .design-minimal { box-shadow: none !important; border: none !important; background: transparent !important; padding: 8px !important; } .design-minimal .cal-day:hover:not(.pad-day) { background: rgba(99,102,241,0.1) !important; color: var(--color-indigo); } .design-minimal .cal-day.today { background: none !important; box-shadow: none !important; border: 2px solid var(--color-indigo) !important; color: var(--color-indigo); font-weight: 900; } .design-neon { border: 1px solid rgba(99,102,241,0.5) !important; box-shadow: 0 0 20px rgba(99,102,241,0.15), inset 0 0 40px rgba(99,102,241,0.03) !important; color: #c7d2fe !important; } .design-neon .calendar-header { border-bottom-color: rgba(99,102,241,0.3) !important; } .design-neon .cal-day.today { background: transparent !important; border: 2px solid #818cf8 !important; border-radius: 50% !important; color: #818cf8 !important; box-shadow: 0 0 12px rgba(129,140,248,0.5), inset 0 0 12px rgba(129,140,248,0.05) !important; } .design-neon .cal-day.has-appointments { background: rgba(79,70,229,0.6) !important; box-shadow: 0 0 8px rgba(79,70,229,0.4) !important; } .design-typewriter { font-family: 'Courier New', monospace; border: 1.5px solid rgba(255,255,255,0.12) !important; } .design-typewriter .cal-day.today { background: none !important; box-shadow: none !important; text-decoration: underline wavy var(--color-indigo) !important; border-radius: 0 !important; font-weight: 900 !important; } .design-glassmini .amti-modern-calendar, .design-glassmini { background: rgba(255,255,255,0.06) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(255,255,255,0.1) !important; padding: 10px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.08) !important; } .design-glassmini .cal-day { padding: 5px 0 !important; font-size: 0.78rem !important; } .design-compact-dots .cal-day { padding: 6px 0 !important; font-size: 0.78rem !important; } .design-compact-dots .cal-day.today { background: none !important; box-shadow: none !important; border-radius: 0 !important; position: relative; } .design-compact-dots .cal-day.today::before { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background: var(--color-indigo); border-radius: 50%; box-shadow: 0 0 6px rgba(99,102,241,0.6); } /* ── Startup Loader Overlay Styles (Critical styles live in dashboard.html #amti-startup-loader-critical-css) ── */ .amti-startup-loader { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 9999999; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; cursor: default !important; } .amti-startup-loader * { user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; cursor: default !important; } .amti-loader-error, #amtiLoaderError, .amti-loader-btn, .amti-loader-btn-primary, .amti-loader-btn-secondary { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================= PERFORMANCE & HARDWARE ACCELERATION OPTIMIZATIONS ========================================================= */ /* will-change removido de elementos sempre visíveis (sidebar, cards) — forçava camas separadas no GPU, estourando VRAM de GPUs antigas */ /* ========================================================= REGRAS DE RENDERIZAÇÃO DO PERFIL ULTRA ========================================================= */ /* Disable smooth scrolling entirely to save CPU cycles on layout recalculation */ html.amti-performance-mode, body.amti-performance-mode, body.amti-performance-mode .amti-sidebar, body.amti-performance-mode .amti-table-container, body.amti-performance-mode .amti-settings-shell, body.amti-performance-mode .modal-body, body.amti-performance-mode .os-modal-section { scroll-behavior: auto !important; } /* Eliminate transitions and animations completely on targeted elements (except loading indicators and emergency alarms) */ body.amti-performance-mode .amti-card, body.amti-performance-mode .amti-grid-card, body.amti-performance-mode .amti-stat-card, body.amti-performance-mode .amti-archive-card, body.amti-performance-mode .pdv-product-card, body.amti-performance-mode .comissao-stat-card, body.amti-performance-mode .amti-sidebar, body.amti-performance-mode .amti-header, body.amti-performance-mode .amti-topbar, body.amti-performance-mode .amti-brand-logo, body.amti-performance-mode .amti-btn, body.amti-performance-mode .amti-nav-item, body.amti-performance-mode .amti-logout-btn, body.amti-performance-mode .amti-modal-content, body.amti-performance-mode .amti-dropdown-menu, body.amti-performance-mode .amti-toast, body.amti-performance-mode .amti-form-control, body.amti-performance-mode .field-pill, body.amti-performance-mode .thumbnail-btn, body.amti-performance-mode .amti-home-action-btn, body.amti-performance-mode .ai-advisor-suggestions, body.amti-performance-mode .ai-chat-action-btn, body.amti-performance-mode .ai-sugg-item, body.amti-performance-mode .agenda-item:not(.ai-alert-mode), body.amti-performance-mode .amti-digital-clock, body.amti-performance-mode .amti-modern-calendar, body.amti-performance-mode .cal-nav-btn, body.amti-performance-mode .cal-day, body.amti-performance-mode .amti-cal-popup, body.amti-performance-mode .wtheme-swatch, body.amti-performance-mode .amti-startup-loader, body.amti-performance-mode .amti-loader-content, body.amti-performance-mode .amti-loader-logo-glow, body.amti-performance-mode .amti-loader-circle-progress, body.amti-performance-mode .amti-loader-progress-inner, body.amti-performance-mode .comissao-progress-fill, body.amti-performance-mode .comissao-bar-fill, body.amti-performance-mode .amti-toggle-slider, body.amti-performance-mode .zn-input, body.amti-performance-mode .zn-select, body.amti-performance-mode .zn-textarea, body.amti-performance-mode input, body.amti-performance-mode select, body.amti-performance-mode textarea { transition: none !important; animation: none !important; } body.amti-performance-mode .amti-card::before, body.amti-performance-mode .amti-card::after, body.amti-performance-mode .amti-grid-card::before, body.amti-performance-mode .amti-grid-card::after, body.amti-performance-mode .amti-stat-card::before, body.amti-performance-mode .amti-stat-card::after, body.amti-performance-mode .amti-btn::before, body.amti-performance-mode .amti-btn::after, body.amti-performance-mode .amti-sidebar::before, body.amti-performance-mode .amti-sidebar::after, body.amti-performance-mode .amti-nav-item::before, body.amti-performance-mode .amti-nav-item::after, body.amti-performance-mode .amti-form-control::before, body.amti-performance-mode .amti-form-control::after, body.amti-performance-mode .amti-topbar::before, body.amti-performance-mode .amti-topbar::after, body.amti-performance-mode .amti-toggle-slider::before, body.amti-performance-mode .amti-toggle-slider::after, body.amti-performance-mode .pdv-product-card::before, body.amti-performance-mode .pdv-product-card::after, body.amti-performance-mode .agenda-item::before, body.amti-performance-mode .agenda-item::after { transition: none !important; animation: none !important; } body.amti-performance-mode .amti-card, body.amti-performance-mode .amti-grid-card, body.amti-performance-mode .amti-stat-card, body.amti-performance-mode .amti-archive-card, body.amti-performance-mode .pdv-product-card, body.amti-performance-mode .comissao-stat-card, body.amti-performance-mode #tab-home .amti-card, body.amti-performance-mode #tab-home .amti-grid-card, body.amti-performance-mode #tab-home .amti-stat-card, body.amti-performance-mode #tab-home .amti-archive-card, body.amti-performance-mode #tab-home .pdv-product-card, body.amti-performance-mode #tab-home .amti-grid-card.os-card, body.amti-performance-mode #tab-home .amti-card-library-item, body.amti-performance-mode #tab-home .amti-grid-card.shortcut-card, body.amti-performance-mode #tab-home .amti-grid-card.agenda-card, body.amti-performance-mode #tab-home .amti-grid-card.ai-tips-live-card, body.amti-performance-mode #tab-home .amti-grid-card.clock-widget-card, body.amti-performance-mode #tab-home .amti-grid-card.calendar-widget-card, body.amti-performance-mode #tab-home .amti-grid-card.pdv-widget-card, body.amti-performance-mode #tab-home .amti-card:hover, body.amti-performance-mode #tab-home .amti-grid-card:hover, body.amti-performance-mode #tab-home .amti-stat-card:hover, body.amti-performance-mode #tab-home .amti-archive-card:hover, body.amti-performance-mode #tab-home .pdv-product-card:hover, body.amti-performance-mode #tab-home .amti-grid-card.os-card:hover, body.amti-performance-mode #tab-home .amti-card-library-item:hover, body.amti-performance-mode #tab-home .amti-grid-card.shortcut-card:hover, body.amti-performance-mode #tab-home .amti-grid-card.agenda-card:hover, body.amti-performance-mode #tab-home .amti-grid-card.ai-tips-live-card:hover, body.amti-performance-mode #tab-home .amti-grid-card.clock-widget-card:hover, body.amti-performance-mode #tab-home .amti-grid-card.calendar-widget-card:hover, body.amti-performance-mode #tab-home .amti-grid-card.pdv-widget-card:hover, body.amti-performance-mode .amti-sidebar, body.amti-performance-mode .amti-header, body.amti-performance-mode .amti-topbar, body.amti-performance-mode .amti-brand-logo, body.amti-performance-mode .amti-btn, body.amti-performance-mode .amti-nav-item, body.amti-performance-mode .amti-logout-btn, body.amti-performance-mode .amti-modal-content, body.amti-performance-mode .amti-dropdown-menu, body.amti-performance-mode .amti-toast, body.amti-performance-mode .amti-monitor-fab:not(.ai-alert-mode), body.amti-performance-mode .amti-form-control, body.amti-performance-mode .field-pill, body.amti-performance-mode .thumbnail-btn, body.amti-performance-mode .amti-home-action-btn, body.amti-performance-mode .ai-advisor-suggestions, body.amti-performance-mode .ai-chat-action-btn, body.amti-performance-mode .ai-sugg-item, body.amti-performance-mode .agenda-item, body.amti-performance-mode .amti-digital-clock, body.amti-performance-mode .amti-modern-calendar, body.amti-performance-mode .cal-nav-btn, body.amti-performance-mode .cal-day, body.amti-performance-mode .amti-cal-popup, body.amti-performance-mode .wtheme-swatch, body.amti-performance-mode .amti-startup-loader, body.amti-performance-mode .amti-loader-content, body.amti-performance-mode .amti-loader-logo-glow, body.amti-performance-mode .amti-loader-circle-progress, body.amti-performance-mode .amti-loader-progress-inner, body.amti-performance-mode .comissao-progress-fill, body.amti-performance-mode .comissao-bar-fill, body.amti-performance-mode .amti-toggle-slider, body.amti-performance-mode .zn-input, body.amti-performance-mode .zn-select, body.amti-performance-mode .zn-textarea, body.amti-performance-mode input, body.amti-performance-mode select, body.amti-performance-mode textarea { box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; transform: none !important; } body.amti-performance-mode .amti-card::before, body.amti-performance-mode .amti-card::after, body.amti-performance-mode .amti-grid-card::before, body.amti-performance-mode .amti-grid-card::after, body.amti-performance-mode .amti-stat-card::before, body.amti-performance-mode .amti-stat-card::after, body.amti-performance-mode .amti-btn::before, body.amti-performance-mode .amti-btn::after, body.amti-performance-mode .amti-sidebar::before, body.amti-performance-mode .amti-sidebar::after, body.amti-performance-mode .amti-nav-item::before, body.amti-performance-mode .amti-nav-item::after, body.amti-performance-mode .amti-form-control::before, body.amti-performance-mode .amti-form-control::after, body.amti-performance-mode .amti-topbar::before, body.amti-performance-mode .amti-topbar::after, body.amti-performance-mode .amti-toggle-slider::before, body.amti-performance-mode .amti-toggle-slider::after, body.amti-performance-mode .pdv-product-card::before, body.amti-performance-mode .pdv-product-card::after, body.amti-performance-mode .agenda-item::before, body.amti-performance-mode .agenda-item::after { box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; } /* Disable expensive background gradients, replacing them with flat solid colors */ body.amti-performance-mode, body.amti-performance-mode .amti-sidebar, body.amti-performance-mode .amti-header, body.amti-performance-mode .amti-card, body.amti-performance-mode .amti-grid-card, body.amti-performance-mode .amti-glass-panel, body.amti-performance-mode .amti-widget, body.amti-performance-mode .amti-modal-content, body.amti-performance-mode .os-modal-section, body.amti-performance-mode .amti-dropdown-menu, body.amti-performance-mode .amti-toast, body.amti-performance-mode .amti-monitor-fab:not(.ai-alert-mode), body.amti-performance-mode .amti-form-control, body.amti-performance-mode input, body.amti-performance-mode select, body.amti-performance-mode textarea { background-image: none !important; background-color: #121820 !important; /* Clean flat dark background */ border-color: #2b3543 !important; border-radius: 4px !important; /* Flat sharp borders compile faster than complex rounded values */ } /* Tabelas herdam a cor dos cards no perfil ultra (todos os temas) */ html[data-theme] body.amti-performance-mode .amti-table-container, html[data-theme] body.amti-performance-mode .amti-table, html[data-theme] body.amti-performance-mode .amti-table table, html[data-theme] body.amti-performance-mode .amti-table thead, html[data-theme] body.amti-performance-mode .amti-table tbody tr:not([style*="background"]):not([class*="priority"]):not([class*="status-"]):not(.amti-selected):not(.selected) td, html[data-theme] body.amti-performance-mode .amti-table tbody tr:not([style*="background"]):not([class*="priority"]):not([class*="status-"]):not(.amti-selected):not(.selected) { background-color: transparent !important; background-image: none !important; } /* Preserva o fundo do cabeçalho da tabela no perfil ultra */ html[data-theme] body.amti-performance-mode .amti-table th { background: var(--table-header-bg, #0f172a) !important; background-color: var(--table-header-bg, #0f172a) !important; color: var(--text-primary) !important; } /* Specific elements background tuning for readability */ body.amti-performance-mode .amti-card, body.amti-performance-mode .amti-grid-card, body.amti-performance-mode .amti-widget, body.amti-performance-mode .amti-modal-content { background-color: #18202c !important; /* Slightly lighter flat color to distinguish cards */ } body.amti-performance-mode .amti-sidebar { background-color: #0f141c !important; /* Sidebar solid dark coloring */ } body.amti-performance-mode .amti-header { background-color: #0d1117 !important; } /* Disable high-contrast and complex animated pseudo-decorations in block themes */ body.amti-performance-mode .amti-card::before, body.amti-performance-mode .amti-card::after, body.amti-performance-mode .amti-grid-card::before, body.amti-performance-mode .amti-grid-card::after, body.amti-performance-mode .amti-stat-card::before, body.amti-performance-mode .amti-stat-card::after, body.amti-performance-mode .os-modal-section--internal::before, body.amti-performance-mode .os-modal-section--internal::after { display: none !important; content: none !important; } /* Force pixelated image scaling to save GPU rasterization overhead on canvas (Chart.js) and generic graphics */ body.amti-performance-mode canvas { image-rendering: pixelated !important; image-rendering: crisp-edges !important; } /* Optimize text rendering for absolute performance over aesthetic subpixel rendering */ body.amti-performance-mode { text-rendering: speed !important; -webkit-font-smoothing: none !important; -moz-osx-font-smoothing: none !important; } /* Remove filtros do fundo do modal no perfil ultra */ body.amti-performance-mode .modal-backdrop, body.amti-performance-mode .amti-modal-backdrop, body.amti-performance-mode .os-modal-backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background-color: rgba(0, 0, 0, 0.7) !important; /* Just simple semi-transparent black overlay */ } /* Remove filtros de todos os popups e overlays, inclusive estilos inline */ :is(body, html).amti-performance-mode :is( #feedbackOverlay, #osUnsavedPopup, .zn-modal-overlay, #amtiValidationPopup, #updateProgressModal, #amtiSuccessPopup, #restoreProgressModal, #userLogDetailModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, .amti-modal-backdrop-blur, .modal ) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Otimizações adicionais para digitação rápida e responsividade no perfil ultra */ body.amti-performance-mode input:focus, body.amti-performance-mode textarea:focus, body.amti-performance-mode select:focus, body.amti-performance-mode .amti-form-control:focus, html[data-theme] body.amti-performance-mode input:focus, html[data-theme] body.amti-performance-mode textarea:focus, html[data-theme] body.amti-performance-mode select:focus, html[data-theme] body.amti-performance-mode .amti-form-control:focus { box-shadow: none !important; text-shadow: none !important; border-color: #4b5563 !important; /* Borda sólida limpa, sem glows ou sombras caras */ } /* Desativar sombras e filtros no dropdown de autocompletes */ body.amti-performance-mode .amti-combobox-dropdown { box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid #2b3543 !important; } /* Prevenir a criação excessiva de camadas do compositor de GPU (will-change) */ body.amti-performance-mode *, body.amti-performance-mode *::before, body.amti-performance-mode *::after { will-change: auto !important; } /* ============================================= MODERNIZED MODAL SECTIONS — Premium Upgrade ============================================= */ /* Section with left accent bar */ .os-modal-section--accent { border-left: 3px solid var(--primary); } .os-modal-section--accent-warning { border-left: 3px solid var(--warning, #f59e0b); } .os-modal-section--accent-danger { border-left: 3px solid var(--danger, #ef4444); } .os-modal-section--accent-success { border-left: 3px solid var(--success, #22c55e); overflow: visible; } .os-modal-section--accent-info { border-left: 3px solid #38bdf8; } /* Section header icon badge */ .os-modal-section-header .section-icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; font-size: 0.75rem; flex-shrink: 0; } .os-modal-section-header .section-icon-badge.badge-primary { background: rgba(99, 102, 241, 0.15); color: #818cf8; } .os-modal-section-header .section-icon-badge.badge-warning { background: rgba(245, 158, 11, 0.15); color: #fbbf24; } .os-modal-section-header .section-icon-badge.badge-danger { background: rgba(239, 68, 68, 0.15); color: #f87171; } .os-modal-section-header .section-icon-badge.badge-success { background: rgba(34, 197, 94, 0.15); color: #4ade80; } .os-modal-section-header .section-icon-badge.badge-info { background: rgba(56, 189, 248, 0.15); color: #38bdf8; } .os-modal-section-header .section-icon-badge.badge-purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; } .os-modal-section-header .section-icon-badge.badge-emerald { background: rgba(16, 185, 129, 0.15); color: #34d399; } .os-modal-section-header .section-icon-badge.badge-rose { background: rgba(244, 63, 94, 0.15); color: #fb7185; } /* Internal tech info highlight - improved */ .os-modal-section--internal { background: linear-gradient(135deg, rgba(245, 158, 11, 0.04), rgba(251, 191, 36, 0.02)); border-color: rgba(245, 158, 11, 0.2); } .os-modal-section--internal .os-modal-section-header { background: rgba(245, 158, 11, 0.08); border-bottom-color: rgba(245, 158, 11, 0.15); } /* ============================================= SERVICES TABLE — Professional Layout ============================================= */ .os-services-table-header { display: grid; grid-template-columns: 60px 1fr 110px 110px 72px; gap: 8px; padding: 8px 12px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border-color); background: var(--bg-input); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .os-services-table-header span:nth-child(3), .os-services-table-header span:nth-child(4) { text-align: right; } .os-services-table-header span:last-child { text-align: center; } /* Service item row — display mode */ .amti-os-item-row[data-mode="display"] .amti-os-row { display: grid !important; grid-template-columns: 60px 1fr 110px 110px 72px; gap: 8px; align-items: center; padding: 10px 12px; margin-bottom: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: background 0.2s; } .amti-os-item-row[data-mode="display"]:hover .amti-os-row { background: rgba(255, 255, 255, 0.02); } .amti-os-item-row[data-mode="display"] .os-row-qtd { font-weight: 700; font-size: 0.88rem; color: var(--primary); text-align: center; } .amti-os-item-row[data-mode="display"] .os-row-desc { font-size: 0.9rem; color: var(--text-primary); } .amti-os-item-row[data-mode="display"] .os-row-custo { text-align: right; font-size: 0.85rem; color: var(--text-secondary); } .amti-os-item-row[data-mode="display"] .os-row-valor { text-align: right; font-weight: 700; font-size: 0.92rem; color: var(--success, #22c55e); } .amti-os-item-row .os-row-actions { display: flex; gap: 4px; justify-content: center; align-items: center; flex-wrap: nowrap; } /* Service item row — edit mode */ .amti-os-item-row[data-mode="edit"] .amti-os-row { display: grid !important; grid-template-columns: 60px 1fr 110px 110px 72px; gap: 8px; align-items: center; padding: 8px 12px; margin-bottom: 0 !important; background: rgba(99, 102, 241, 0.04); border-bottom: 1px solid rgba(99, 102, 241, 0.12); } .amti-os-item-row[data-mode="edit"] .amti-form-control { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; max-width: none !important; } .amti-os-item-row .amti-os-row .amti-btn.amti-os-edit-btn, .amti-os-item-row .amti-os-row .amti-btn.amti-os-remove-btn { width: 32px; height: 32px; min-width: unset; padding: 0; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; font-size: 0.85rem; } /* Services actions bar */ .os-services-actions-bar { display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-color); background: rgba(0, 0, 0, 0.1); } /* ── Service Search Panel (OS edit) ── */ .os-service-search-shell { position: relative; display: flex; align-items: center; } .os-service-search-toggle { white-space: nowrap; } .os-client-equip-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } .os-service-search-panel { display: none; position: absolute; top: 0; left: calc(100% + 6px); z-index: 80; width: 340px; max-height: 0; opacity: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-card, #1a1f2e); border: 1px solid var(--border-color); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); transform: translateX(-6px); transition: max-height 280ms cubic-bezier(.2, .9, .2, 1), opacity 220ms ease, transform 280ms cubic-bezier(.2, .9, .2, 1); will-change: max-height, opacity, transform; pointer-events: none; } .os-service-search-panel[data-visible="true"] { display: block; max-height: 420px; opacity: 1; transform: translateX(0); pointer-events: auto; overflow: visible; } .os-service-search-input-wrap { display: flex; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border-color); background: rgba(0, 0, 0, 0.15); } .os-service-search-input { width: 100%; padding: 6px 10px; font-size: 0.8rem; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-color); outline: none; } .os-service-search-input:focus { border-color: rgba(99, 102, 241, 0.5); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12); } .os-service-search-results { max-height: 144px; overflow-y: auto; overscroll-behavior: contain; } .os-service-search-results::-webkit-scrollbar { width: 5px; } .os-service-search-results::-webkit-scrollbar-track { background: transparent; } .os-service-search-results::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.2); border-radius: 3px; } .os-service-search-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.03); transition: background 150ms ease; } .os-service-search-item:last-child { border-bottom: none; } .os-service-search-item:hover { background: rgba(99, 102, 241, 0.08); } .os-service-search-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .os-service-search-item-name { font-size: 0.82rem; font-weight: 600; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .os-service-search-item-loc { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .os-service-search-item-price { font-size: 0.8rem; font-weight: 700; color: var(--accent-success, #34d399); white-space: nowrap; flex-shrink: 0; } .os-service-search-empty { padding: 20px 12px; text-align: center; font-size: 0.78rem; color: var(--text-muted); font-style: italic; } /* Services total bar */ .os-services-total-bar { display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding: 14px 16px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(56, 189, 248, 0.04)); border-top: 1px solid rgba(99, 102, 241, 0.12); border-radius: 0 0 var(--radius-md) var(--radius-md); flex-wrap: wrap; } .os-services-total-bar .total-item { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; } .os-services-total-bar .total-item.total-main { font-size: 1.05rem; } .os-services-total-bar .total-item .total-label { color: var(--text-secondary); font-weight: 500; } .os-services-total-bar .total-item .total-value { font-weight: 800; color: var(--text-primary); } .os-services-total-bar .total-item.total-main .total-value { color: var(--primary); font-size: 1.15rem; } /* ============================================= TECHNICIAN SELECT — Premium Styling ============================================= */ .os-tecnico-select-wrapper { position: relative; } .os-tecnico-select-wrapper select { padding-left: 34px; } .os-tecnico-select-wrapper .tecnico-select-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 0.85rem; pointer-events: none; } /* ============================================= COMISSÃO TÉCNICA — Full Page Styles ============================================= */ .comissao-hero-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .comissao-stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; display: flex; align-items: flex-start; gap: 14px; transition: all 0.3s ease; position: relative; overflow: hidden; } .comissao-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius-md) var(--radius-md) 0 0; } .comissao-stat-card.card-primary::before { background: linear-gradient(90deg, #818cf8, #6366f1); } .comissao-stat-card.card-success::before { background: linear-gradient(90deg, #4ade80, #22c55e); } .comissao-stat-card.card-warning::before { background: linear-gradient(90deg, #fbbf24, #f59e0b); } .comissao-stat-card.card-info::before { background: linear-gradient(90deg, #38bdf8, #0ea5e9); } .comissao-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .comissao-stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .comissao-stat-icon.icon-primary { background: rgba(99, 102, 241, 0.15); color: #818cf8; } .comissao-stat-icon.icon-success { background: rgba(34, 197, 94, 0.15); color: #4ade80; } .comissao-stat-icon.icon-warning { background: rgba(245, 158, 11, 0.15); color: #fbbf24; } .comissao-stat-icon.icon-info { background: rgba(56, 189, 248, 0.15); color: #38bdf8; } .comissao-stat-info { flex: 1; min-width: 0; } .comissao-stat-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-bottom: 4px; } .comissao-stat-value { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; } .comissao-stat-sub { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; } /* Filters bar */ .comissao-filters-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 16px; background: var(--bg-card-soft); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 20px; } .comissao-filter-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 160px; } .comissao-filter-group label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .comissao-filter-group select, .comissao-filter-group input { padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); font-size: 0.88rem; } /* Charts area */ .comissao-charts-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 24px; } .comissao-charts-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .comissao-chart-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; overflow: hidden; } .comissao-chart-card h4 { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .comissao-chart-card h4 i { color: var(--primary); } .comissao-chart-canvas-wrap { position: relative; width: 100%; min-height: 220px; } .comissao-chart-canvas-wrap canvas { width: 100% !important; height: auto !important; } /* Config panel */ .comissao-config-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 24px; } .comissao-config-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--bg-input); border-bottom: 1px solid var(--border-color); } .comissao-config-header h4 { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; margin: 0; } .comissao-config-body { padding: 18px; } .comissao-config-section { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border-color); } .comissao-config-section:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .comissao-config-section-title { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .comissao-config-section-title i { color: var(--primary); font-size: 0.85rem; } .comissao-config-global-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 600px) { .comissao-config-global-grid { grid-template-columns: 1fr; } } .comissao-config-field { display: flex; flex-direction: column; gap: 4px; } .comissao-config-field label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); } .comissao-config-field select, .comissao-config-field input[type="number"] { padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); font-size: 0.85rem; } .amti-toggle, .amti-toggle-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; position: relative; user-select: none; -webkit-user-select: none; flex-shrink: 0; width: 46px; height: 24px; } .amti-toggle input[type="checkbox"], .amti-toggle-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; margin: 0; } .amti-toggle-slider { width: 46px; height: 24px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 99px; position: relative; transition: all 0.22s ease-in-out; flex-shrink: 0; display: block; box-sizing: border-box; } .amti-toggle-slider::after { content: ''; width: 18px; height: 18px; background: #ffffff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.22s ease-in-out; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .amti-toggle input:checked + .amti-toggle-slider, .amti-toggle-switch input:checked + .amti-toggle-slider { background: var(--color-cyan, #06b6d4) !important; border-color: rgba(6, 182, 212, 0.5) !important; box-shadow: 0 0 12px rgba(6, 182, 212, 0.45) !important; } .amti-toggle input:checked + .amti-toggle-slider::after, .amti-toggle-switch input:checked + .amti-toggle-slider::after { transform: translateX(22px); } html[data-theme='light'] .amti-toggle-slider { background: rgba(0, 0, 0, 0.15); border-color: rgba(0, 0, 0, 0.18); } .amti-toggle-label { font-size: 0.8rem; color: var(--text-secondary); } .comissao-config-table-header { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; display: grid; grid-template-columns: 1fr 120px 120px 80px; gap: 12px; padding: 0 0 8px 0; border-bottom: 1px solid var(--border-color); margin-bottom: 4px; } .comissao-config-table-header span:nth-child(2), .comissao-config-table-header span:nth-child(3) { text-align: center; } .comissao-config-row { display: grid; grid-template-columns: 1fr 120px 120px 80px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .comissao-config-row:last-child { border-bottom: none; } .comissao-config-row .config-tech-name { font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } .comissao-config-row .config-tech-name .tech-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #818cf8, #6366f1); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; color: white; flex-shrink: 0; } .comissao-config-row input[type="number"] { padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); font-size: 0.88rem; text-align: center; } /* Comissão table */ .comissao-detail-table { width: 100%; border-collapse: collapse; } .comissao-detail-table th { padding: 10px 14px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--bg-input); border-bottom: 1px solid var(--border-color); text-align: left; } .comissao-detail-table td { padding: 10px 14px; font-size: 0.88rem; color: var(--text-primary); border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .comissao-detail-table tr:hover td { background: rgba(255, 255, 255, 0.02); } .comissao-detail-table .td-value { font-weight: 700; color: var(--success, #22c55e); } .comissao-detail-table .td-comissao { font-weight: 700; color: var(--primary); } /* Progress bar for goals */ .comissao-progress-bar { height: 8px; background: rgba(255, 255, 255, 0.08); border-radius: 99px; overflow: hidden; position: relative; } .comissao-progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #818cf8, #6366f1); transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .comissao-progress-fill.progress-success { background: linear-gradient(90deg, #4ade80, #22c55e); } /* Bar chart (pure CSS fallback) */ .comissao-bar-chart { display: flex; align-items: flex-end; gap: 12px; height: 200px; padding: 0 8px; } .comissao-bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; } .comissao-bar-fill { width: 100%; max-width: 48px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #818cf8, #6366f1); transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); min-height: 4px; position: relative; } .comissao-bar-fill:hover { filter: brightness(1.15); } .comissao-bar-value { font-size: 0.72rem; font-weight: 700; color: var(--text-primary); text-align: center; } .comissao-bar-label { font-size: 0.68rem; color: var(--text-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; } /* Donut chart (pure CSS) */ .comissao-donut-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } .comissao-donut-canvas { width: 160px; height: 160px; } .comissao-donut-legend { display: flex; flex-direction: column; gap: 8px; } .comissao-donut-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-primary); } .comissao-donut-legend-item .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* Empty state */ .comissao-empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); } .comissao-empty-state i { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.4; } .comissao-empty-state p { font-size: 0.92rem; max-width: 400px; margin: 0 auto; } /* Cadastros card highlight for comissao */ .amti-settings-card-soft.comissao-card { border-color: rgba(168, 85, 247, 0.2); background: linear-gradient(135deg, var(--bg-card-soft), rgba(168, 85, 247, 0.03)); } .amti-settings-card-soft.comissao-card:hover { border-color: rgba(168, 85, 247, 0.35); box-shadow: 0 4px 20px rgba(168, 85, 247, 0.08); } @media (max-width: 768px) { .comissao-hero-cards { grid-template-columns: 1fr 1fr; } .comissao-config-row { grid-template-columns: 1fr 100px 80px; } .comissao-config-row .config-meta-col, .comissao-config-table-header .config-meta-col { display: none; } .comissao-config-table-header { grid-template-columns: 1fr 100px 80px; } .os-services-table-header { grid-template-columns: 32px minmax(0, 1fr) 60px 65px; gap: 4px; } .amti-os-item-row .amti-os-row { grid-template-columns: 32px minmax(0, 1fr) 60px 65px 50px !important; gap: 4px; } .amti-os-item-row .os-row-custo, .amti-os-item-row .os-service-custo { display: block; } } @media (max-width: 480px) { .comissao-hero-cards { grid-template-columns: 1fr; } .comissao-filters-bar { flex-direction: column; } } /* ===== Comissão Técnica (redesign dinâmico) ===== */ .amti-form-control-sm { padding: 6px 10px; font-size: 0.82rem; border-radius: var(--radius-sm); } /* Chips de período */ .comissao-periodo-group { flex: 1.6; } .comissao-periodo-chips { display: flex; flex-wrap: wrap; gap: 6px; } .comissao-chip { padding: 7px 12px; border-radius: 99px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .comissao-chip:hover { border-color: var(--primary); color: var(--primary); } .comissao-chip.active { background: var(--primary); border-color: var(--primary); color: #ffffff; } .comissao-custom-inputs { display: flex; align-items: center; gap: 8px; } .comissao-custom-inputs input[type="date"] { padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); font-size: 0.84rem; } .comissao-range-sep { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; } /* Loading */ .comissao-loading-indicator { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); padding: 6px 12px; margin-left: auto; } .comissao-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(148, 163, 184, 0.3); border-top-color: var(--primary); animation: comissaoSpin 0.7s linear infinite; flex-shrink: 0; } @keyframes comissaoSpin { to { transform: rotate(360deg); } } /* Meta do período (KPI) */ .comissao-meta-progress-wrap { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .comissao-meta-progress { flex: 1; min-width: 0; } .comissao-meta-pct { font-size: 0.85rem; font-weight: 700; color: var(--primary); white-space: nowrap; } /* Ranking / leaderboard */ .comissao-ranking-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; margin-bottom: 24px; } .comissao-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .comissao-section-head h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } .comissao-section-head h3 i { color: #fbbf24; } .comissao-section-sub { font-size: 0.78rem; color: var(--text-muted); } .comissao-ranking-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .comissao-rank-card { display: grid; grid-template-columns: 34px 42px minmax(0, 1.5fr) minmax(180px, 0.9fr) auto auto; align-items: center; gap: 16px; background: var(--bg-card-soft); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px 18px; transition: all 0.25s ease; position: relative; } .comissao-rank-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15); } .comissao-rank-card.rank-first { border-color: rgba(251, 191, 36, 0.45); background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), var(--bg-card-soft) 60%); } .comissao-rank-card.meta-hit { border-color: rgba(52, 211, 153, 0.4); } .comissao-rank-pos { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 800; color: #1e293b; background: var(--rank-color, #cbd5e1); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12); } .comissao-rank-avatar { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #818cf8, #6366f1); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; } .comissao-rank-info { min-width: 0; } .comissao-rank-meta-col { min-width: 0; } .comissao-rank-actions { display: flex; align-items: center; justify-content: flex-end; } .comissao-rank-name { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .comissao-rank-name-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .comissao-rank-stats { display: flex; gap: 10px; margin-top: 4px; font-size: 0.76rem; color: var(--text-muted); } .comissao-rank-stats i { font-size: 0.7rem; color: var(--primary); } .comissao-rank-meta-row { margin-top: 0; } .comissao-rank-progress { height: 6px; } .comissao-rank-meta-pct { display: block; margin-top: 4px; font-size: 0.7rem; color: var(--text-muted); } .comissao-rank-values { flex-shrink: 0; text-align: right; } .comissao-rank-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; } .comissao-rank-value { font-size: 1rem; font-weight: 800; color: var(--primary); white-space: nowrap; } .comissao-rank-sub { font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; } .comissao-congrats-btn { white-space: nowrap; animation: comissaoConfetti 1.6s ease-in-out infinite; } @keyframes comissaoConfetti { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @media (max-width: 820px) { .comissao-rank-card { grid-template-columns: 34px 42px minmax(0, 1fr) auto; } .comissao-rank-meta-col { grid-column: 2 / -1; } .comissao-rank-actions { grid-column: 2 / -1; justify-content: flex-start; margin-top: 4px; } } /* Grid principal (tabela+gráficos | e-mail) */ .comissao-main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; margin-bottom: 24px; } .comissao-main-grid .comissao-config-panel { margin-bottom: 0; } @media (max-width: 1100px) { .comissao-main-grid { grid-template-columns: 1fr; } } .comissao-table-count { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); } .comissao-load-more-wrap { padding: 12px; text-align: center; border-top: 1px solid var(--border-color); } .comissao-btn-block { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; } .comissao-email-hint { margin: 10px 0 0; font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; } .comissao-email-result { margin-top: 12px; font-size: 0.82rem; } .comissao-email-pending { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); } .comissao-email-success { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--success, #34d399); background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.25); } .comissao-email-error { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); color: #f87171; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.25); } /* Config card em paisagem (lado a lado: regras gerais | por técnico) */ .comissao-config-wide { margin-bottom: 0; } .comissao-config-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 28px; align-items: start; } .comissao-config-cols .comissao-config-section { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .comissao-config-cols .comissao-config-section:first-child { padding-right: 28px; border-right: 1px solid var(--border-color); } .comissao-config-cols .comissao-config-section-title { margin-bottom: 14px; } .comissao-config-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); text-align: right; } .comissao-config-table-header, .comissao-config-row { grid-template-columns: minmax(0, 1fr) 150px 110px 90px; } .comissao-config-row .config-tech-name { min-width: 0; } .comissao-config-row .config-tech-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 900px) { .comissao-charts-grid { grid-template-columns: 1fr; } .comissao-charts-duo { grid-template-columns: 1fr; } .comissao-config-cols { grid-template-columns: 1fr; } .comissao-config-cols .comissao-config-section:first-child { padding-right: 0; border-right: none; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border-color); } } @media (max-width: 768px) { .comissao-config-table-header, .comissao-config-row { grid-template-columns: minmax(0, 1fr) 100px 80px; } } /* Block Steel Custom Floating Action Button & Animations */ html[data-theme='block-steel'] .amti-monitor-fab { border-radius: 0px !important; background: linear-gradient(180deg, #3a4756 0%, #202832 100%) !important; border: 1px solid #5c7085 !important; border-top: 1px solid #7c8e9f !important; border-bottom: 2px solid #0f141a !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 8px 16px rgba(0,0,0,0.5) !important; color: #fff !important; overflow: hidden; } html[data-theme='block-steel'] .amti-monitor-fab:not(.ai-alert-mode):not(.ai-alert-offline-pulse)::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); animation: blockSteelShine 3.5s infinite linear; pointer-events: none; } @keyframes blockSteelShine { 0% { left: -100%; } 40% { left: -100%; } 100% { left: 200%; } } html[data-theme='block-steel'] .amti-monitor-fab:hover { background: linear-gradient(180deg, #475567 0%, #27303c 100%) !important; border-color: #728599 !important; transform: translateY(-2px); } /* Alert Modes in Block Steel theme - Warning Steel Aesthetic */ html[data-theme='block-steel'] .ai-alert-mode { --alert-color: #e28743; --alert-color-rgb: 226, 135, 67; background: linear-gradient(180deg, #b8621d 0%, #683007 100%); color: #ffffff; border: 1px solid var(--alert-color); border-top: 1px solid rgba(var(--alert-color-rgb), 0.8); border-bottom: 2px solid rgba(var(--alert-color-rgb), 0.3); } /* Reduz brilho e varreduras decorativas no perfil ultra */ body.amti-performance-mode html[data-theme='block-steel'] .amti-monitor-fab:not(.ai-alert-mode) { background: #1c232c !important; border: 1px solid #3b4756 !important; box-shadow: none !important; text-shadow: none !important; } /* Block Steel startup loader styles are managed by #amti-startup-loader-critical-css in dashboard.html */ /* ========================================== */ /* THEME: BLOCK BLUE */ /* ========================================== */ :root[data-theme='block-blue'] { color-scheme: dark; --bg-main: linear-gradient(180deg, #091322 0%, #040811 100%); --bg-card: linear-gradient(180deg, #10213d 0%, #091325 100%); --card-surface: linear-gradient(180deg, #10213d 0%, #091325 100%); --card-surface-hover: linear-gradient(180deg, #152c50 0%, #0d1a33 100%); --button-surface: linear-gradient(180deg, #1b3560 0%, #0a1832 100%); --button-surface-hover: linear-gradient(180deg, #224378 0%, #0e2247 100%); --bg-card-soft: #0c182d; --bg-input: #060c18; --border-color: #1a355e; --border-focus: #00d2ff; --text-primary: #f0f5ff; --text-secondary: #c2d1e8; --text-muted: #829abf; --surface-strong-hover: #0e1c35; --card-glow-hover: none; --shadow-soft: 0 4px 12px rgba(0,0,0,0.4); --shadow-glow: none; --sort-arrow-color: #00d2ff; --topbar-bg: linear-gradient(90deg, #010408 0%, #030814 30%, #061122 65%, #0b182e 100%); --table-header-bg: #10213d; --placeholder-color: #93c5fd; --primary: #00d2ff; --color-cyan: #00d2ff; --color-emerald: #00ffaa; --color-rose: #ff4d6a; --color-amber: #ffcc00; --color-indigo: #4d79ff; --surface-strong: #0a1832; --accent-soft: #0e2247; --accent-gradient: linear-gradient(180deg, #1b3560 0%, #0a1832 100%); /* Reset radius */ --radius-xl: 0px !important; --radius-lg: 0px !important; --radius-md: 0px !important; --radius-sm: 0px !important; --nav-item-radius: 0px !important; --close-btn-radius: 0px !important; } /* Force sharp corners on block-blue */ html[data-theme='block-blue'] *, html[data-theme='block-blue'] button, html[data-theme='block-blue'] input, html[data-theme='block-blue'] select, html[data-theme='block-blue'] textarea, html[data-theme='block-blue'] div, html[data-theme='block-blue'] a, html[data-theme='block-blue'] span, html[data-theme='block-blue'] table, html[data-theme='block-blue'] th, html[data-theme='block-blue'] td, html[data-theme='block-blue'] tr { border-radius: 0px !important; } /* Bevel / metallic neon details for block-blue cards */ html[data-theme='block-blue'] .amti-card, html[data-theme='block-blue'] .amti-grid-card, html[data-theme='block-blue'] .amti-stat-card, html[data-theme='block-blue'] .amti-archive-card, html[data-theme='block-blue'] .pdv-product-card, html[data-theme='block-blue'] .amti-card-library-item, html[data-theme='block-blue'] .amti-modal-content, html[data-theme='block-blue'] .amti-settings-card, html[data-theme='block-blue'] .amti-grid-card.os-card, html[data-theme='block-blue'] .amti-pdv-cart, html[data-theme='block-blue'] .amti-pdv-catalog-card { background: linear-gradient(180deg, #112546 0%, #081223 100%) !important; border: 1px solid #1a3c70 !important; border-top: 1px solid rgba(0, 210, 255, 0.35) !important; /* neon blue-cyan top bevel reflection */ border-bottom: 2px solid #02070f !important; box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important; color: var(--text-primary) !important; } /* ── block-blue: Cart inner elements ──────────────────────────────────────── */ html[data-theme='block-blue'] .amti-pdv-cart-header { background: rgba(16,33,61,0.5) !important; border-bottom-color: rgba(0, 210, 255, 0.14) !important; color: #f0f5ff !important; } html[data-theme='block-blue'] .amti-pdv-cart-header i { color: #00d2ff !important; filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.3)) !important; } html[data-theme='block-blue'] .pdv-cart-items { color: #f0f5ff !important; } html[data-theme='block-blue'] .pdv-cart-summary { background: rgba(4, 8, 17, 0.6) !important; border-top-color: rgba(0, 210, 255, 0.08) !important; backdrop-filter: none !important; } html[data-theme='block-blue'] .amti-pdv-summary-row { border-color: rgba(0, 210, 255, 0.10) !important; color: #f0f5ff !important; } html[data-theme='block-blue'] #pdvCartTotal { color: #00d2ff !important; text-shadow: 0 0 14px rgba(0, 210, 255, 0.3) !important; } html[data-theme='block-blue'] .pdv-empty-cart { color: rgba(0, 210, 255, 0.25) !important; } /* Bevel/Metal blue style for buttons */ html[data-theme='block-blue'] .amti-btn { background: linear-gradient(180deg, #1b3866 0%, #0b1830 100%) !important; border: 1px solid #244b88 !important; border-top: 1px solid rgba(0, 210, 255, 0.3) !important; border-bottom: 2px solid #040913 !important; color: #eff6ff !important; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.3) !important; } html[data-theme='block-blue'] .amti-btn:hover { background: linear-gradient(180deg, #224782 0%, #0e2042 100%) !important; border-color: #2d5ea8 !important; } html[data-theme='block-blue'] .amti-btn-primary { background: linear-gradient(180deg, #005f9e 0%, #003b66 100%) !important; border-color: #0077c2 !important; border-top-color: rgba(0, 210, 255, 0.45) !important; border-bottom-color: #001f37 !important; } html[data-theme='block-blue'] .amti-btn-primary:hover { background: linear-gradient(180deg, #0073c2 0%, #004c85 100%) !important; } html[data-theme='block-blue'] .amti-btn-danger { background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%) !important; border-color: #991b1b !important; border-top-color: #dc2626 !important; border-bottom-color: #450a0a !important; color: #fef2f2 !important; } html[data-theme='block-blue'] .amti-btn-danger:hover { background: linear-gradient(180deg, #991b1b 0%, #5c0a0a 100%) !important; } /* Metallic shine overlay for block-blue FAB */ html[data-theme='block-blue'] .amti-monitor-fab { border-radius: 0px !important; background: linear-gradient(180deg, #1c3b6b 0%, #0b172b 100%) !important; border: 1px solid #2b5596 !important; border-top: 1px solid rgba(0, 210, 255, 0.45) !important; border-bottom: 2px solid #040911 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 8px 16px rgba(0,0,0,0.5) !important; color: #fff !important; overflow: hidden; } html[data-theme='block-blue'] .amti-monitor-fab:not(.ai-alert-mode):not(.ai-alert-offline-pulse)::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); animation: blockSteelShine 3.5s infinite linear; pointer-events: none; } /* Alert mode in block-blue */ html[data-theme='block-blue'] .ai-alert-mode { --alert-color: #00f5ff; --alert-color-rgb: 0, 245, 255; background: linear-gradient(180deg, #005f73 0%, #0a2f35 100%); color: #ffffff; border: 1px solid var(--alert-color); border-top: 1px solid rgba(var(--alert-color-rgb), 0.8); border-bottom: 2px solid rgba(var(--alert-color-rgb), 0.3); } /* Block Blue startup loader styles are managed by #amti-startup-loader-critical-css in dashboard.html */ /* Reduz animações decorativas no tema Block Blue */ body.amti-performance-mode html[data-theme='block-blue'] .amti-monitor-fab:not(.ai-alert-mode), body.amti-ultra-performance-mode html[data-theme='block-blue'] .amti-monitor-fab:not(.ai-alert-mode) { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; box-shadow: none !important; text-shadow: none !important; } /* ── block-blue: Modal glass, form fields, select options ────────────────── */ html[data-theme='block-blue'] .os-modal-section { background: linear-gradient(135deg, rgba(14,28,55,0.5), rgba(8,16,32,0.7)) !important; border: 1px solid rgba(0,210,255,0.08) !important; border-left: 3px solid rgba(0,210,255,0.18) !important; } html[data-theme='block-blue'] .os-modal-section-header { background: rgba(16,33,61,0.5) !important; border-bottom-color: rgba(0,210,255,0.06) !important; } html[data-theme='block-blue'] .os-modal-section--accent { border-left-color: #00d2ff !important; } html[data-theme='block-blue'] .os-modal-section--accent-info { border-left-color: #38bdf8 !important; } html[data-theme='block-blue'] .os-modal-section--accent-warning { border-left-color: #f59e0b !important; } html[data-theme='block-blue'] .os-modal-section--accent-danger { border-left-color: #ef4444 !important; } html[data-theme='block-blue'] .os-modal-section--accent-success { border-left-color: #22c55e !important; } html[data-theme='block-blue'] .section-icon-badge.badge-primary { background: rgba(0,210,255,0.12) !important; color: #00d2ff !important; } html[data-theme='block-blue'] .section-icon-badge.badge-info { background: rgba(56,189,248,0.12) !important; color: #38bdf8 !important; } html[data-theme='block-blue'] .os-services-total-bar { background: linear-gradient(135deg, rgba(0,210,255,0.05), rgba(0,95,158,0.03)) !important; border-top: 1px solid rgba(0,210,255,0.12) !important; } html[data-theme='block-blue'] .amti-form-control, html[data-theme='block-blue'] input, html[data-theme='block-blue'] textarea, html[data-theme='block-blue'] select { background: #060c18 !important; background-color: #060c18 !important; border-color: #1a355e !important; color: #f0f5ff !important; } html[data-theme='block-blue'] select option:checked, html[data-theme='block-blue'] .amti-form-control option:checked, html[data-theme='block-blue'] .amti-form-control option:selected { background: rgba(0,210,255,0.10) !important; color: #f0f5ff !important; } html[data-theme='block-blue'] select option:hover, html[data-theme='block-blue'] .amti-form-control option:hover { background: rgba(0,210,255,0.06) !important; } /* ========================================== */ /* THEME: BLOCK LIGHT */ /* ========================================== */ :root[data-theme='block-light'] { color-scheme: light; --bg-main: #cbd5e1; /* platinum-slate gray */ --bg-card: #f8fafc; --card-surface: #f8fafc; --card-surface-hover: #f1f5f9; --button-surface: #f1f5f9; --button-surface-hover: #e2e8f0; --bg-card-soft: #f1f5f9; --bg-input: #ffffff; --placeholder-color: #475569; --border-color: #94a3b8; --border-focus: #1e293b; --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --surface-strong-hover: #f1f5f9; --card-glow-hover: none; --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-glow: none; --sort-arrow-color: #0f172a; --topbar-bg: linear-gradient(90deg, #a8b6c6 0%, #b8c4d3 35%, #c2cddb 70%, #cbd5e1 100%); --table-header-bg: #f8fafc; /* Reset radius */ --radius-xl: 0px !important; --radius-lg: 0px !important; --radius-md: 0px !important; --radius-sm: 0px !important; --nav-item-radius: 0px !important; --close-btn-radius: 0px !important; } /* Force sharp corners on block-light */ html[data-theme='block-light'] *, html[data-theme='block-light'] button, html[data-theme='block-light'] input, html[data-theme='block-light'] select, html[data-theme='block-light'] textarea, html[data-theme='block-light'] div, html[data-theme='block-light'] a, html[data-theme='block-light'] span, html[data-theme='block-light'] table, html[data-theme='block-light'] th, html[data-theme='block-light'] td, html[data-theme='block-light'] tr { border-radius: 0px !important; } /* Block Light: Header/Topbar seamlessly matches dashboard platinum-slate color */ html[data-theme='block-light'] .amti-topbar, html[data-theme='block-light'] body.amti-performance-mode .amti-topbar, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-topbar { background: linear-gradient(90deg, #a8b6c6 0%, #b8c4d3 35%, #c2cddb 70%, #cbd5e1 100%) !important; color: #0f172a !important; border-bottom: 1px solid #758599 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; } html[data-theme='block-light'] .amti-topbar .amti-title-area h2, html[data-theme='block-light'] .amti-topbar #currentTabTitle, html[data-theme='block-light'] body.amti-performance-mode .amti-topbar .amti-title-area h2, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-topbar .amti-title-area h2 { color: #0f172a !important; font-weight: 800 !important; } html[data-theme='block-light'] .amti-topbar .amti-title-area p, html[data-theme='block-light'] .amti-topbar #currentTabSubtitle, html[data-theme='block-light'] body.amti-performance-mode .amti-topbar .amti-title-area p, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-topbar .amti-title-area p { color: #475569 !important; } /* Header buttons in block-light with crisp high-contrast colors */ html[data-theme='block-light'] .amti-topbar .amti-btn-primary, html[data-theme='block-light'] body.amti-performance-mode .amti-topbar .amti-btn-primary, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-topbar .amti-btn-primary { background: #0284c7 !important; color: #ffffff !important; border: 1px solid #0369a1 !important; font-weight: 600 !important; border-radius: 4px !important; } html[data-theme='block-light'] .amti-topbar .amti-btn-primary i, html[data-theme='block-light'] body.amti-performance-mode .amti-topbar .amti-btn-primary i, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-topbar .amti-btn-primary i { color: #ffffff !important; } html[data-theme='block-light'] .amti-topbar .amti-btn-primary:hover { background: #0369a1 !important; } html[data-theme='block-light'] .amti-topbar .amti-btn-cyan, html[data-theme='block-light'] body.amti-performance-mode .amti-topbar .amti-btn-cyan, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-topbar .amti-btn-cyan { background: #4f46e5 !important; color: #ffffff !important; border: 1px solid #4338ca !important; font-weight: 600 !important; border-radius: 4px !important; } html[data-theme='block-light'] .amti-topbar .amti-btn-cyan i, html[data-theme='block-light'] body.amti-performance-mode .amti-topbar .amti-btn-cyan i, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-topbar .amti-btn-cyan i { color: #ffffff !important; } html[data-theme='block-light'] .amti-topbar .amti-btn-cyan:hover { background: #4338ca !important; } html[data-theme='block-light'] .amti-topbar .amti-btn-secondary, html[data-theme='block-light'] body.amti-performance-mode .amti-topbar .amti-btn-secondary, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-topbar .amti-btn-secondary { background: #334155 !important; color: #f1f5f9 !important; border: 1px solid #475569 !important; } html[data-theme='block-light'] .amti-topbar .amti-btn-secondary i { color: #f1f5f9 !important; } /* Ajustes do menu Block Light com texto e ícones legíveis no perfil ultra */ html[data-theme='block-light'] .amti-sidebar, html[data-theme='block-light'] body.amti-performance-mode .amti-sidebar, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-sidebar { background: #0f172a !important; background-color: #0f172a !important; color: #ffffff !important; border-right: 1px solid #1e293b !important; box-shadow: none !important; } html[data-theme='block-light'] .amti-sidebar .amti-brand, html[data-theme='block-light'] body.amti-performance-mode .amti-sidebar .amti-brand, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-sidebar .amti-brand { border-bottom: 1px solid #1e293b !important; } html[data-theme='block-light'] .amti-sidebar .amti-brand-name, html[data-theme='block-light'] body.amti-performance-mode .amti-sidebar .amti-brand-name, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-sidebar .amti-brand-name { color: #ffffff !important; font-weight: 700 !important; } html[data-theme='block-light'] .amti-nav-item button, html[data-theme='block-light'] body.amti-performance-mode .amti-nav-item button, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-nav-item button { color: #cbd5e1 !important; background: transparent !important; } html[data-theme='block-light'] .amti-nav-item button i, html[data-theme='block-light'] body.amti-performance-mode .amti-nav-item button i, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-nav-item button i { color: #94a3b8 !important; } html[data-theme='block-light'] .amti-nav-item button span, html[data-theme='block-light'] body.amti-performance-mode .amti-nav-item button span, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-nav-item button span { color: #cbd5e1 !important; font-weight: 500 !important; } html[data-theme='block-light'] .amti-nav-item button:hover, html[data-theme='block-light'] body.amti-performance-mode .amti-nav-item button:hover, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-nav-item button:hover { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } html[data-theme='block-light'] .amti-nav-item button:hover i, html[data-theme='block-light'] body.amti-performance-mode .amti-nav-item button:hover i, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-nav-item button:hover i { color: #38bdf8 !important; } html[data-theme='block-light'] .amti-nav-item button:hover span, html[data-theme='block-light'] body.amti-performance-mode .amti-nav-item button:hover span, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-nav-item button:hover span { color: #ffffff !important; } html[data-theme='block-light'] .amti-nav-item.active button, html[data-theme='block-light'] body.amti-performance-mode .amti-nav-item.active button, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-nav-item.active button { background: rgba(255, 255, 255, 0.14) !important; color: #ffffff !important; border-left: 4px solid #38bdf8 !important; box-shadow: none !important; } html[data-theme='block-light'] .amti-nav-item.active button i, html[data-theme='block-light'] body.amti-performance-mode .amti-nav-item.active button i, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-nav-item.active button i { color: #38bdf8 !important; } html[data-theme='block-light'] .amti-nav-item.active button span, html[data-theme='block-light'] body.amti-performance-mode .amti-nav-item.active button span, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-nav-item.active button span { color: #ffffff !important; font-weight: 700 !important; } /* Sidebar submenu arrows and items */ html[data-theme='block-light'] .amti-nav-item button .amti-submenu-arrow { color: #94a3b8 !important; } html[data-theme='block-light'] .amti-submenu { background: #080d1a !important; border: 1px solid #1e293b !important; } html[data-theme='block-light'] .amti-submenu-item button { color: #94a3b8 !important; } html[data-theme='block-light'] .amti-submenu-item button:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.08) !important; } /* Profile area at bottom of sidebar */ html[data-theme='block-light'] .amti-user-profile, html[data-theme='block-light'] body.amti-performance-mode .amti-user-profile, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-user-profile { border-top: 1px solid #1e293b !important; background: transparent !important; } html[data-theme='block-light'] .amti-user-name, html[data-theme='block-light'] .amti-user-action-label, html[data-theme='block-light'] body.amti-performance-mode .amti-user-name, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-user-name { color: #ffffff !important; font-weight: 600 !important; } html[data-theme='block-light'] .amti-user-role, html[data-theme='block-light'] body.amti-performance-mode .amti-user-role, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-user-role { color: #94a3b8 !important; } html[data-theme='block-light'] #myAccountBtn, html[data-theme='block-light'] .amti-logout-btn, html[data-theme='block-light'] body.amti-performance-mode #myAccountBtn, html[data-theme='block-light'] body.amti-ultra-performance-mode #myAccountBtn { color: #ffffff !important; } html[data-theme='block-light'] #myAccountBtn i, html[data-theme='block-light'] .amti-logout-btn i, html[data-theme='block-light'] body.amti-performance-mode #myAccountBtn i, html[data-theme='block-light'] body.amti-ultra-performance-mode #myAccountBtn i { color: #94a3b8 !important; } html[data-theme='block-light'] #myAccountBtn:hover i, html[data-theme='block-light'] .amti-logout-btn:hover i { color: #38bdf8 !important; } /* Cards in block-light: balanced borders and white surfaces */ html[data-theme='block-light'] .amti-card, html[data-theme='block-light'] .amti-grid-card, html[data-theme='block-light'] .amti-stat-card, html[data-theme='block-light'] .amti-archive-card, html[data-theme='block-light'] .pdv-product-card, html[data-theme='block-light'] .amti-card-library-item, html[data-theme='block-light'] .amti-modal-content, html[data-theme='block-light'] .amti-settings-card, html[data-theme='block-light'] .amti-grid-card.os-card, html[data-theme='block-light'] .amti-pdv-cart, html[data-theme='block-light'] .amti-pdv-catalog-card, html[data-theme='block-light'] body.amti-performance-mode .amti-card, html[data-theme='block-light'] body.amti-performance-mode .amti-grid-card, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-card, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-grid-card { background: #ffffff !important; background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; border-top: 1px solid #cbd5e1 !important; border-bottom: 2px solid #94a3b8 !important; box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important; color: #0f172a !important; } html[data-theme='block-light'] .amti-card-title, html[data-theme='block-light'] .os-card-title, html[data-theme='block-light'] .amti-card-header strong, html[data-theme='block-light'] body.amti-performance-mode .amti-card-title, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-card-title { color: #0f172a !important; font-weight: 700 !important; } /* ── block-light: Cart inner elements ─────────────────────────────────────── */ html[data-theme='block-light'] .amti-pdv-cart-header { background: #f1f5f9 !important; border-bottom: 2px solid #cbd5e1 !important; color: #0f172a !important; } html[data-theme='block-light'] .amti-pdv-cart-header i { color: #475569 !important; filter: none !important; } html[data-theme='block-light'] .pdv-cart-items { color: #0f172a !important; } html[data-theme='block-light'] .pdv-cart-summary { background: #f1f5f9 !important; border-top-color: #cbd5e1 !important; } html[data-theme='block-light'] .amti-pdv-summary-row { border-color: #94a3b8 !important; color: #0f172a !important; } html[data-theme='block-light'] #pdvCartTotal { color: #1e293b !important; text-shadow: none !important; } html[data-theme='block-light'] .pdv-empty-cart { color: rgba(15, 23, 42, 0.45) !important; } /* Buttons in block-light: dark background, white text, sharp corners */ html[data-theme='block-light'] .amti-btn, html[data-theme='block-light'] body.amti-performance-mode .amti-btn, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-btn { background: #1e293b !important; border: 1px solid #0f172a !important; border-bottom: 2px solid #020617 !important; color: #ffffff !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; } html[data-theme='block-light'] .amti-btn:hover { background: #334155 !important; border-color: #475569 !important; color: #ffffff !important; } html[data-theme='block-light'] .amti-btn-primary { background: #1e293b !important; border: 1px solid #0f172a !important; border-bottom: 2px solid #020617 !important; color: #ffffff !important; } html[data-theme='block-light'] .amti-btn-primary:hover { background: #334155 !important; } /* FAB button in block-light */ html[data-theme='block-light'] .amti-monitor-fab, html[data-theme='block-light'] .back-to-top-fab, html[data-theme='block-light'] #globalFabBtn { border-radius: 4px !important; background: #1e293b !important; border: 1px solid #0f172a !important; border-bottom: 2px solid #020617 !important; color: #fff !important; } html[data-theme='block-light'] .amti-monitor-fab:hover, html[data-theme='block-light'] .back-to-top-fab:hover, html[data-theme='block-light'] #globalFabBtn:hover { background: #334155 !important; } /* Feedback tab button in block-light */ html[data-theme='block-light'] #feedbackTabBtn, html[data-theme='block-light'] .amti-feedback-tab { background: #1e293b !important; color: #ffffff !important; border: 1px solid #0f172a !important; } /* Block Light startup loader styles are managed by #amti-startup-loader-critical-css in dashboard.html */ /* ── block-light: Modal sections, form fields, select options ───────────────── */ html[data-theme='block-light'] .os-modal-section, html[data-theme='block-light'] body.amti-performance-mode .os-modal-section, html[data-theme='block-light'] body.amti-ultra-performance-mode .os-modal-section { background: #ffffff !important; border: 1px solid #cbd5e1 !important; border-left: 3px solid #94a3b8 !important; box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important; } html[data-theme='block-light'] .os-modal-section-header, html[data-theme='block-light'] body.amti-performance-mode .os-modal-section-header, html[data-theme='block-light'] body.amti-ultra-performance-mode .os-modal-section-header { background: #f1f5f9 !important; border-bottom: 1px solid #e2e8f0 !important; color: #0f172a !important; font-weight: 700 !important; } html[data-theme='block-light'] .os-modal-section--accent { border-left-color: #1e293b !important; } html[data-theme='block-light'] .os-modal-section--accent-info { border-left-color: #0284c7 !important; } html[data-theme='block-light'] .os-modal-section--accent-warning { border-left-color: #d97706 !important; } html[data-theme='block-light'] .os-modal-section--accent-danger { border-left-color: #dc2626 !important; } html[data-theme='block-light'] .os-modal-section--accent-success { border-left-color: #16a34a !important; } html[data-theme='block-light'] .section-icon-badge.badge-primary { background: rgba(30,41,59,0.12) !important; color: #1e293b !important; } html[data-theme='block-light'] .section-icon-badge.badge-info { background: rgba(2,132,199,0.12) !important; color: #0284c7 !important; } html[data-theme='block-light'] .section-icon-badge.badge-purple { background: rgba(147,51,234,0.12) !important; color: #7c3aed !important; } html[data-theme='block-light'] .section-icon-badge.badge-danger { background: rgba(220,38,38,0.12) !important; color: #dc2626 !important; } html[data-theme='block-light'] .section-icon-badge.badge-success { background: rgba(22,163,74,0.12) !important; color: #16a34a !important; } html[data-theme='block-light'] .os-services-total-bar { background: #f1f5f9 !important; border-top: 2px solid #cbd5e1 !important; } html[data-theme='block-light'] .amti-form-control, html[data-theme='block-light'] input, html[data-theme='block-light'] textarea, html[data-theme='block-light'] select, html[data-theme='block-light'] select option, html[data-theme='block-light'] select optgroup, html[data-theme='block-light'] .amti-form-control option, html[data-theme='block-light'] .amti-form-control optgroup, html[data-theme='block-light'] input[readonly], html[data-theme='block-light'] select[readonly], html[data-theme='block-light'] body.amti-performance-mode input, html[data-theme='block-light'] body.amti-ultra-performance-mode input, html[data-theme='block-light'] body.amti-performance-mode textarea, html[data-theme='block-light'] body.amti-ultra-performance-mode textarea, html[data-theme='block-light'] body.amti-performance-mode select, html[data-theme='block-light'] body.amti-ultra-performance-mode select { background: #ffffff !important; background-color: #ffffff !important; border: 1px solid #94a3b8 !important; color: #0f172a !important; color-scheme: light !important; box-shadow: none !important; } html[data-theme='block-light'] .amti-form-control:focus, html[data-theme='block-light'] input:focus, html[data-theme='block-light'] textarea:focus, html[data-theme='block-light'] select:focus { background: #ffffff !important; background-color: #ffffff !important; border-color: #0284c7 !important; box-shadow: 0 0 0 2px rgba(2,132,199,0.2) !important; color: #0f172a !important; color-scheme: light !important; } html[data-theme='block-light'] select option:checked, html[data-theme='block-light'] .amti-form-control option:checked, html[data-theme='block-light'] .amti-form-control option:selected { background: rgba(30,41,59,0.08) !important; color: #0f172a !important; } html[data-theme='block-light'] select option:hover, html[data-theme='block-light'] .amti-form-control option:hover { background: rgba(30,41,59,0.05) !important; } /* Smart search & search filters in block-light */ html[data-theme='block-light'] .amti-search-filter-btn { background: #f1f5f9 !important; color: #334155 !important; border: 1px solid #cbd5e1 !important; } html[data-theme='block-light'] .amti-search-filter-btn.active { background: #0284c7 !important; color: #ffffff !important; border-color: #0284c7 !important; } html[data-theme='block-light'] .amti-smart-search-box button, html[data-theme='block-light'] .amti-search-btn-primary { background: #0284c7 !important; color: #ffffff !important; border: 1px solid #0369a1 !important; } /* Tables in block-light */ html[data-theme='block-light'] .amti-table th, html[data-theme='block-light'] body.amti-performance-mode .amti-table th, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-table th { background: #f1f5f9 !important; border-bottom: 2px solid #cbd5e1 !important; color: #0f172a !important; font-weight: 700 !important; } html[data-theme='block-light'] .amti-table td, html[data-theme='block-light'] body.amti-performance-mode .amti-table td, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-table td { border-bottom: 1px solid #e2e8f0 !important; color: #0f172a !important; } html[data-theme='block-light'] .amti-table tr:hover td { background: #f8fafc !important; } html[data-theme='block-light'] .amti-os-item-row[data-mode="display"] .amti-os-row { border-bottom-color: #e2e8f0 !important; } html[data-theme='block-light'] .amti-os-item-row[data-mode="display"]:hover .amti-os-row { background: rgba(15, 23, 42, 0.03) !important; } html[data-theme='block-light'] .amti-os-item-row[data-mode="edit"] .amti-os-row { background: rgba(99, 102, 241, 0.06) !important; } /* ── block-light: Fix ALL hardcoded white text/icons ─────────────────────── */ /* Modal close button — dark X on light background */ html[data-theme='block-light'] .amti-modal-close { background: rgba(15, 23, 42, 0.06) !important; border: 1px solid #cbd5e1 !important; color: #475569 !important; } html[data-theme='block-light'] .amti-modal-close:hover { background: rgba(239, 68, 68, 0.10) !important; border-color: rgba(239, 68, 68, 0.30) !important; color: #ef4444 !important; } /* AI alert modal close */ html[data-theme='block-light'] .ai-alert-modal-content .amti-modal-close { color: #475569 !important; } html[data-theme='block-light'] .ai-alert-modal-content .amti-modal-close:hover { color: #ef4444 !important; } /* PDV search input — dark text on light background */ html[data-theme='block-light'] .pdv-search-wrapper .amti-pdv-search-input { color: #0f172a !important; border-color: #94a3b8 !important; } html[data-theme='block-light'] .pdv-search-wrapper .amti-pdv-search-input::placeholder { color: var(--placeholder-color) !important; opacity: 1 !important; } /* Select option hover — dark text */ html[data-theme='block-light'] select option:hover, html[data-theme='block-light'] .amti-form-control option:hover { background: rgba(30, 41, 59, 0.08) !important; color: #0f172a !important; } /* Status badges — visible backgrounds on light cards */ html[data-theme='block-light'] .amti-badge-pendente { background-color: rgba(15, 23, 42, 0.08) !important; color: #475569 !important; } html[data-theme='block-light'] .amti-badge-em_andamento, html[data-theme='block-light'] .amti-badge-em_analise_orcamento { background-color: rgba(30, 41, 59, 0.08) !important; color: #475569 !important; } /* Tables — visible header and proper contrast */ html[data-theme='block-light'] .amti-table th { background-color: rgba(15, 23, 42, 0.04) !important; color: #334155 !important; border-bottom: 2px solid #cbd5e1 !important; } html[data-theme='block-light'] .amti-table td { color: #0f172a !important; border-bottom-color: #e2e8f0 !important; } html[data-theme='block-light'] .amti-table tr:hover td { background-color: rgba(15, 23, 42, 0.03) !important; } /* Step pills — proper contrast */ html[data-theme='block-light'] .amti-step-pill { color: #94a3b8 !important; border-bottom: 2px solid transparent !important; } html[data-theme='block-light'] .amti-step-pill.active { color: #1e293b !important; border-bottom-color: #1e293b !important; font-weight: 700 !important; } /* Form labels — ensure dark text */ html[data-theme='block-light'] .amti-form-group label { color: #334155 !important; } /* Buttons with colored backgrounds (keep white text where intentional with dark saturated backgrounds) */ html[data-theme='block-light'] .amti-btn-success, html[data-theme='light'] .amti-btn-success, html.theme-light .amti-btn-success { background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important; border-color: #047857 !important; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; font-weight: 700 !important; } html[data-theme='block-light'] .amti-btn-warning, html[data-theme='light'] .amti-btn-warning { color: #451a03 !important; font-weight: 700 !important; text-shadow: none !important; } html[data-theme='block-light'] .amti-btn-danger { background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%) !important; border-color: #991b1b !important; border-top-color: #dc2626 !important; border-bottom-color: #450a0a !important; color: #ffffff !important; } html[data-theme='block-light'] .amti-btn-danger:hover { background: linear-gradient(180deg, #991b1b 0%, #5c0a0a 100%) !important; } /* Section icon badges that might be invisible */ html[data-theme='block-light'] .section-icon-badge.badge-warning { background: rgba(217, 119, 6, 0.12) !important; color: #d97706 !important; } html[data-theme='block-light'] .section-icon-badge.badge-danger { background: rgba(220, 38, 38, 0.10) !important; color: #dc2626 !important; } html[data-theme='block-light'] .section-icon-badge.badge-success { background: rgba(22, 163, 74, 0.10) !important; color: #16a34a !important; } /* Card header action buttons — white text on dark */ html[data-theme='block-light'] .amti-card-header .amti-btn, html[data-theme='block-light'] .amti-card-header .amti-card-btn { color: #ffffff !important; border-color: #0f172a !important; } /* Navigation group labels (sidebar headings) */ html[data-theme='block-light'] .amti-nav-group-label { color: rgba(255, 255, 255, 0.45) !important; } /* Badge base — ensure visible */ html[data-theme='block-light'] .amti-badge { border: 1px solid rgba(15, 23, 42, 0.10) !important; } /* Alerts / warning boxes inside modals */ html[data-theme='block-light'] .amti-alert, html[data-theme='block-light'] .amti-flow-note { color: #475569 !important; } html[data-theme='block-light'] .amti-flow-summary-card { background-color: #ffffff !important; border-color: #e2e8f0 !important; } html[data-theme='block-light'] .amti-flow-summary-title { color: #0891b2 !important; border-bottom-color: #e2e8f0 !important; } html[data-theme='block-light'] .amti-flow-summary-item { background: #f8fafc !important; border-color: #e2e8f0 !important; } html[data-theme='block-light'] .amti-flow-summary-icon { color: #0891b2 !important; } html[data-theme='block-light'] .amti-flow-summary-label { color: #64748b !important; } html[data-theme='block-light'] .amti-flow-summary-value { color: #0f172a !important; } html[data-theme='block-light'] .amti-flow-summary-sub { color: #64748b !important; } /* Checkbox/radio label text */ html[data-theme='block-light'] label, html[data-theme='block-light'] .amti-form-group label { color: #334155 !important; } /* Combobox trigger and dropdown — light theme */ html[data-theme='block-light'] .amti-combobox-trigger { background: #ffffff !important; border-color: #94a3b8 !important; color: #0f172a !important; } html[data-theme='block-light'] .amti-combobox-dropdown { background: #ffffff !important; border-color: #94a3b8 !important; } html[data-theme='block-light'] .amti-combobox-option { color: #334155 !important; } html[data-theme='block-light'] .amti-combobox-option:hover { background: rgba(30, 41, 59, 0.06) !important; color: #0f172a !important; } html[data-theme='block-light'] .amti-combobox-arrow { color: #64748b !important; } /* Any remaining white text in headings inside modals */ html[data-theme='block-light'] .amti-modal-header h3, html[data-theme='block-light'] .amti-modal-header h4 { color: #ffffff !important; } html[data-theme='block-light'] .amti-modal-header i { color: #f8fafc !important; } /* Progress bars / status indicators */ html[data-theme='block-light'] .amti-progress-bar { background: #e2e8f0 !important; } html[data-theme='block-light'] .amti-progress-bar-fill { background: #1e293b !important; color: #ffffff !important; } /* Tooltips */ html[data-theme='block-light'] .amti-tooltip { background: #1e293b !important; color: #f8fafc !important; } /* Sort arrows */ html[data-theme='block-light'] .amti-table th[data-sort]::after { color: #94a3b8 !important; } html[data-theme='block-light'] .amti-table th.sort-asc::after, html[data-theme='block-light'] .amti-table th.sort-desc::after { color: #1e293b !important; } /* Sidebar submenu background */ html[data-theme='block-light'] .amti-submenu { background: rgba(0, 0, 0, 0.20) !important; } /* PDV inner elements text override */ html[data-theme='block-light'] .pdv-product-card { color: #0f172a !important; } html[data-theme='block-light'] .amti-pdv-catalog-card { color: #0f172a !important; } /* Settings card elements */ html[data-theme='block-light'] .amti-settings-card { color: #0f172a !important; } /* ── block-light: Context menu (dark bg, white text) ────────────────────── */ html[data-theme='block-light'] .amti-context-menu, html[data-theme='block-light'] .amti-context-submenu { color: #f8fafc !important; } html[data-theme='block-light'] .amti-context-menu .amti-context-item, html[data-theme='block-light'] .amti-context-submenu .amti-context-item { color: #f8fafc !important; } html[data-theme='block-light'] .amti-context-menu .amti-context-item:hover, html[data-theme='block-light'] .amti-context-submenu .amti-context-item:hover { background: rgba(255,255,255,0.08) !important; color: #ffffff !important; } html[data-theme='block-light'] .amti-context-menu .amti-context-item.active { background: rgba(99,102,241,0.20) !important; color: #a5b4fc !important; } html[data-theme='block-light'] .amti-context-menu .amti-context-item.active::before { color: #818cf8 !important; } html[data-theme='block-light'] .amti-text-danger { color: #f87171 !important; } html[data-theme='block-light'] .amti-text-danger:hover { background: rgba(248,113,113,0.12) !important; } html[data-theme='block-light'] .amti-context-label { color: rgba(148,163,184,0.55) !important; } html[data-theme='block-light'] .amti-context-separator { background: rgba(148,163,184,0.12) !important; } html[data-theme='block-light'] .amti-context-item-submenu-wrap > .amti-context-item .submenu-arrow { color: rgba(255,255,255,0.40) !important; } /* ── block-light: Catch ALL remaining inline white text on light backgrounds ── */ /* Any element with inline white color that isn't a button/colored-bg element */ html[data-theme='block-light'] [style*="color: #fff"]:not(button):not(.amti-btn):not(.amti-monitor-fab):not(.amti-badge):not(.amti-step-pill):not(.amti-progress-bar-fill):not([class*="badge-"]):not(.ai-alert-action-primary):not(.ai-alert-action-agenda):not(.amti-btn-success):not(.amti-btn-danger):not(.amti-btn-warning) { color: #0f172a !important; } html[data-theme='block-light'] [style*="color:#fff"]:not(button):not(.amti-btn):not(.amti-monitor-fab):not(.amti-badge):not(.amti-step-pill):not([class*="badge-"]):not(.ai-alert-action-primary):not(.ai-alert-action-agenda):not(.amti-btn-success):not(.amti-btn-danger):not(.amti-btn-warning) { color: #0f172a !important; } html[data-theme='block-light'] [style*="color:#ffffff"]:not(button):not(.amti-btn):not(.amti-monitor-fab) { color: #0f172a !important; } html[data-theme='block-light'] [style*="color: white"]:not(button):not(.amti-btn):not(.amti-monitor-fab):not(.amti-badge):not([class*="badge-"]):not(.amti-btn-success):not(.amti-btn-danger):not(.amti-btn-warning) { color: #0f172a !important; } /* Faded white text: rgba(255,255,255,0.X) → dark equivalent */ html[data-theme='block-light'] [style*="rgba(255,255,255,0.2)"] { color: rgba(15, 23, 42, 0.35) !important; } html[data-theme='block-light'] [style*="rgba(255, 255, 255, 0.2)"] { color: rgba(15, 23, 42, 0.35) !important; } html[data-theme='block-light'] [style*="rgba(255,255,255,0.3)"] { color: rgba(15, 23, 42, 0.4) !important; } html[data-theme='block-light'] [style*="rgba(255,255,255,0.4)"] { color: rgba(15, 23, 42, 0.5) !important; } html[data-theme='block-light'] [style*="rgba(255,255,255,0.5)"] { color: rgba(15, 23, 42, 0.55) !important; } html[data-theme='block-light'] [style*="rgba(255, 255, 255, 0.3)"] { color: rgba(15, 23, 42, 0.4) !important; } html[data-theme='block-light'] [style*="rgba(255, 255, 255, 0.4)"] { color: rgba(15, 23, 42, 0.5) !important; } html[data-theme='block-light'] [style*="rgba(255, 255, 255, 0.5)"] { color: rgba(15, 23, 42, 0.55) !important; } html[data-theme='block-light'] [style*="rgba(255, 255, 255, 0.7)"] { color: rgba(15, 23, 42, 0.7) !important; } /* Border fix: invisible white borders on light bg */ html[data-theme='block-light'] [style*="rgba(255,255,255,0.05)"], html[data-theme='block-light'] [style*="rgba(255, 255, 255, 0.05)"], html[data-theme='block-light'] [style*="rgba(255,255,255,0.04)"], html[data-theme='block-light'] [style*="rgba(255, 255, 255, 0.04)"] { border-color: #e2e8f0 !important; } /* Cart qty badge: invisible white bg on light */ html[data-theme='block-light'] [style*="rgba(255,255,255,0.1)"] { background: rgba(15, 23, 42, 0.08) !important; } html[data-theme='block-light'] [style*="rgba(255, 255, 255, 0.1)"] { background: rgba(15, 23, 42, 0.08) !important; } /* Modal confirm dialog: dark bg + white text pattern */ html[data-theme='block-light'] .amti-modal-body h3[style*="color: #ffffff"], html[data-theme='block-light'] .amti-modal-body h3[style*="color:#ffffff"], html[data-theme='block-light'] .amti-modal-body p[style*="rgba(255, 255, 255"], html[data-theme='block-light'] .amti-modal-body p[style*="rgba(255,255,255"] { color: var(--text-primary) !important; } /* AI stats and settings cards */ html[data-theme='block-light'] .zn-card [style*="color: #fff"] { color: #0f172a !important; } html[data-theme='block-light'] .zn-card [style*="color:#fff"] { color: #0f172a !important; } /* ========================================== */ /* THEME: DARK BLOCK */ /* ========================================== */ :root[data-theme='dark-block'] { color-scheme: dark; --bg-main: linear-gradient(180deg, #0a0a0b 0%, #121214 100%); --bg-card: linear-gradient(180deg, #16171a 0%, #0f1012 100%); --card-surface: linear-gradient(180deg, #16171a 0%, #0f1012 100%); --card-surface-hover: linear-gradient(180deg, #1d1e22 0%, #141517 100%); --button-surface: linear-gradient(180deg, #202124 0%, #121314 100%); --button-surface-hover: linear-gradient(180deg, #2a2c30 0%, #18191a 100%); --bg-card-soft: #141518; --bg-input: #09090a; --border-color: #27282b; --border-focus: #f3f4f6; /* Elegant white/platinum highlight */ --text-primary: #f3f4f6; --text-secondary: #9ca3af; --text-muted: #6b7280; --surface-strong-hover: #18191c; --card-glow-hover: none; --shadow-soft: 0 4px 12px rgba(0,0,0,0.6); --shadow-glow: none; --sort-arrow-color: #f3f4f6; --topbar-bg: linear-gradient(90deg, #000000 0%, #020203 30%, #060608 65%, #0d0d10 100%); --table-header-bg: #16171a; /* Primary Color Override for consistency */ --primary-color: #52525b; --primary-hover: #63636b; /* Reset radius */ --radius-xl: 0px !important; --radius-lg: 0px !important; --radius-md: 0px !important; --radius-sm: 0px !important; --nav-item-radius: 0px !important; --close-btn-radius: 0px !important; } /* Force sharp corners on dark-block */ html[data-theme='dark-block'] *, html[data-theme='dark-block'] button, html[data-theme='dark-block'] input, html[data-theme='dark-block'] select, html[data-theme='dark-block'] textarea, html[data-theme='dark-block'] div, html[data-theme='dark-block'] a, html[data-theme='dark-block'] span, html[data-theme='dark-block'] table, html[data-theme='dark-block'] th, html[data-theme='dark-block'] td, html[data-theme='dark-block'] tr { border-radius: 0px !important; } /* Cards in dark-block */ html[data-theme='dark-block'] .amti-card, html[data-theme='dark-block'] .amti-grid-card, html[data-theme='dark-block'] .amti-stat-card, html[data-theme='dark-block'] .amti-archive-card, html[data-theme='dark-block'] .pdv-product-card, html[data-theme='dark-block'] .amti-card-library-item, html[data-theme='dark-block'] .amti-modal-content, html[data-theme='dark-block'] .amti-settings-card, html[data-theme='dark-block'] .amti-grid-card.os-card, html[data-theme='dark-block'] .amti-pdv-cart, html[data-theme='dark-block'] .amti-pdv-catalog-card { background: linear-gradient(180deg, #161719 0%, #0d0e10 100%) !important; border: 1px solid #27282b !important; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; /* Soft white bevel reflection */ border-bottom: 2px solid #060607 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important; color: #f3f4f6 !important; } /* Buttons in dark-block: metallic ebony style */ html[data-theme='dark-block'] .amti-btn { background: linear-gradient(180deg, #222326 0%, #121314 100%) !important; border: 1px solid #2d2e32 !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; border-bottom: 2px solid #060607 !important; color: #f3f4f6 !important; text-shadow: 0 -1px 0 rgba(0,0,0,0.8); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 4px rgba(0,0,0,0.4) !important; } html[data-theme='dark-block'] .amti-btn:hover { background: linear-gradient(180deg, #2a2c30 0%, #161718 100%) !important; border-color: #38393e !important; } html[data-theme='dark-block'] .amti-btn-primary { background: linear-gradient(180deg, #52525b 0%, #3f3f46 100%) !important; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; border-color: #27272a !important; border-top-color: #71717a !important; border-bottom-color: #18181b !important; box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), 0 4px 12px rgba(0,0,0,0.4) !important; } html[data-theme='dark-block'] .amti-btn-primary:hover { background: linear-gradient(180deg, #63636b 0%, #4a4a52 100%) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 0 6px 16px rgba(0,0,0,0.5) !important; } html[data-theme='dark-block'] .amti-btn-danger { background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%) !important; border-color: #991b1b !important; border-top-color: #dc2626 !important; border-bottom-color: #450a0a !important; color: #fef2f2 !important; } html[data-theme='dark-block'] .amti-btn-danger:hover { background: linear-gradient(180deg, #991b1b 0%, #5c0a0a 100%) !important; } /* Perfil ultra leve, mantendo o estilo físico de bloco */ html[data-theme='dark-block'] body.amti-performance-mode .amti-btn-primary, html[data-theme='dark-block'] body.amti-ultra-performance-mode .amti-btn-primary { box-shadow: none !important; text-shadow: none !important; } /* FAB in dark-block */ html[data-theme='dark-block'] .amti-monitor-fab { border-radius: 0px !important; background: linear-gradient(180deg, #222326 0%, #121314 100%) !important; border: 1px solid #2d2e32 !important; border-top: 1px solid rgba(255, 255, 255, 0.15) !important; border-bottom: 2px solid #060607 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 16px rgba(0,0,0,0.6) !important; color: #ffffff !important; overflow: hidden; } html[data-theme='dark-block'] .amti-monitor-fab:not(.ai-alert-mode):not(.ai-alert-offline-pulse)::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); animation: blockSteelShine 4s infinite linear; pointer-events: none; } /* Alert mode in dark-block: elegant bright white-silver glow */ html[data-theme='dark-block'] .ai-alert-mode { --alert-color: #f3f4f6; --alert-color-rgb: 243, 244, 246; background: linear-gradient(180deg, #2a2b2f 0%, #161719 100%); color: #ffffff; border: 1px solid var(--alert-color); border-top: 1px solid rgba(var(--alert-color-rgb), 0.9); border-bottom: 2px solid rgba(var(--alert-color-rgb), 0.2); } /* Sidebar adjustments for dark-block */ html[data-theme='dark-block'] .amti-sidebar { background: #0d0d0e !important; color: #f3f4f6 !important; border-right: 1px solid #1a1a1c !important; } html[data-theme='dark-block'] .amti-sidebar .amti-brand-name { color: #ffffff !important; } html[data-theme='dark-block'] .amti-nav-item button { color: rgba(243, 244, 246, 0.7) !important; } html[data-theme='dark-block'] .amti-nav-item button i { color: rgba(243, 244, 246, 0.7) !important; } html[data-theme='dark-block'] .amti-nav-item button span { color: rgba(243, 244, 246, 0.7) !important; } html[data-theme='dark-block'] .amti-nav-item button:hover { background: rgba(255, 255, 255, 0.05) !important; color: #ffffff !important; } html[data-theme='dark-block'] .amti-nav-item button:hover i, html[data-theme='dark-block'] .amti-nav-item button:hover span { color: #ffffff !important; } html[data-theme='dark-block'] .amti-nav-item.active button { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; border-left: 3px solid #e5e7eb !important; } html[data-theme='dark-block'] .amti-nav-item.active button i, html[data-theme='dark-block'] .amti-nav-item.active button span { color: #ffffff !important; } html[data-theme='dark-block'] .amti-user-profile { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; background: transparent !important; } html[data-theme='dark-block'] .amti-user-name { color: #ffffff !important; } html[data-theme='dark-block'] .amti-user-role { color: rgba(243, 244, 246, 0.5) !important; } html[data-theme='dark-block'] #myAccountBtn { color: #ffffff !important; } html[data-theme='dark-block'] #myAccountBtn i { color: #ffffff !important; } /* Dark Block startup loader styles are managed by #amti-startup-loader-critical-css in dashboard.html */ /* Perfil ultra para o tema Dark Block */ body.amti-performance-mode html[data-theme='dark-block'] .amti-monitor-fab:not(.ai-alert-mode), body.amti-ultra-performance-mode html[data-theme='dark-block'] .amti-monitor-fab:not(.ai-alert-mode) { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; box-shadow: none !important; text-shadow: none !important; } /* ========================================================= PER-THEME FOCUS & HOVER SIGNATURES Each theme has its own identity on form field focus/hover ========================================================= */ /* ── Default / Dark Blue ───────────────────────────────── Signature: Electric Cyan Glow Ring Cyan-indigo gradient halo — deep space radar lock ─────────────────────────────────────────────────────── */ :root .amti-form-control:hover, html[data-theme='dark'] .amti-form-control:hover { border-color: rgba(34, 211, 238, 0.35) !important; } :root .amti-form-control:focus, html[data-theme='dark'] .amti-form-control:focus { border-color: #22d3ee !important; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14), 0 0 14px rgba(34, 211, 238, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; background-color: rgba(4, 10, 22, 0.98) !important; } /* ── Light Ice ──────────────────────────────────────────── Signature: Frost Underline Sweep No ring, just a cool underline accent + subtle card lift ─────────────────────────────────────────────────────── */ html[data-theme='light'] .amti-form-control:hover { border-color: rgba(15, 23, 42, 0.25) !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important; } html[data-theme='light'] .amti-form-control:focus { border-color: #0ea5e9 !important; box-shadow: 0 4px 14px rgba(14, 165, 233, 0.12), 0 1px 0 0 #0ea5e9 inset, 0 -2px 0 0 #0ea5e9 !important; background-color: #ffffff !important; outline: none !important; } /* ── Block Steel ───────────────────────────────────────── Signature: Hammered Metal Bevel Sharp 1px double-border, inner glow on left edge only ─────────────────────────────────────────────────────── */ html[data-theme='block-steel'] .amti-form-control:hover { border-color: #6e8295 !important; box-shadow: none !important; } html[data-theme='block-steel'] .amti-form-control:focus { border-color: #c0cdd8 !important; border-left-width: 3px !important; box-shadow: inset 3px 0 0 0 rgba(192, 205, 216, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; background-color: #0f151c !important; outline: none !important; } /* ── Block Blue ────────────────────────────────────────── Signature: Neon Cyan Electric Pulse Vibrant glowing outline — like circuitry coming alive ─────────────────────────────────────────────────────── */ html[data-theme='block-blue'] .amti-form-control:hover { border-color: rgba(0, 210, 255, 0.30) !important; box-shadow: 0 0 6px rgba(0, 210, 255, 0.08) !important; } html[data-theme='block-blue'] .amti-form-control:focus { border-color: #00d2ff !important; box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.18), 0 0 16px rgba(0, 210, 255, 0.18), inset 0 0 0 1px rgba(0, 210, 255, 0.08) !important; background-color: #060c18 !important; outline: none !important; } /* ── Block Light ───────────────────────────────────────── Signature: Ink Drop Shadow No glow — crisp dark border + soft depth shadow below ─────────────────────────────────────────────────────── */ html[data-theme='block-light'] .amti-form-control:hover { border-color: #475569 !important; box-shadow: none !important; } html[data-theme='block-light'] .amti-form-control:focus { border-color: #1e293b !important; border-left-width: 3px !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14), inset 0 -1px 0 rgba(15, 23, 42, 0.1) !important; background-color: #ffffff !important; color-scheme: light !important; outline: none !important; } /* ── Dark Block ────────────────────────────────────────── Signature: Platinum Shimmer Edge Minimal white-silver rim, whisper-quiet glow ─────────────────────────────────────────────────────── */ /* Resting state — kill ALL blue from hardcoded base rules */ html[data-theme='dark-block'] .amti-form-control, html[data-theme='dark-block'] input, html[data-theme='dark-block'] textarea, html[data-theme='dark-block'] select { background: #09090a !important; background-color: #09090a !important; border-color: #27282b !important; color: #f3f4f6 !important; } html[data-theme='dark-block'] .os-card-search-panel .amti-form-control, html[data-theme='dark-block'] .amti-search-panel .amti-form-control, html[data-theme='dark-block'] .amti-os-search-panel .amti-form-control { background: #09090a !important; background-color: #09090a !important; } html[data-theme='dark-block'] .amti-form-control:hover { border-color: rgba(255, 255, 255, 0.18) !important; box-shadow: none !important; } html[data-theme='dark-block'] .amti-form-control:focus { border-color: rgba(255, 255, 255, 0.65) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset -1px 0 0 rgba(255, 255, 255, 0.04) !important; background-color: #09090a !important; outline: none !important; } /* Also apply to native inputs/textareas that don't have .amti-form-control class */ html[data-theme='dark'] input:focus, html[data-theme='dark'] textarea:focus, html[data-theme='dark'] select:focus { border-color: #22d3ee !important; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14) !important; outline: none !important; } html[data-theme='light'] input:focus, html[data-theme='light'] textarea:focus, html[data-theme='light'] select:focus { border-color: #0ea5e9 !important; box-shadow: 0 4px 14px rgba(14, 165, 233, 0.12) !important; outline: none !important; } html[data-theme='block-steel'] input:focus, html[data-theme='block-steel'] textarea:focus, html[data-theme='block-steel'] select:focus { border-color: #c0cdd8 !important; border-left-width: 3px !important; box-shadow: inset 3px 0 0 0 rgba(192, 205, 216, 0.3) !important; outline: none !important; } html[data-theme='block-blue'] input:focus, html[data-theme='block-blue'] textarea:focus, html[data-theme='block-blue'] select:focus { border-color: #00d2ff !important; box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.18), 0 0 16px rgba(0, 210, 255, 0.18) !important; outline: none !important; } html[data-theme='block-light'] input:focus, html[data-theme='block-light'] textarea:focus, html[data-theme='block-light'] select:focus { border-color: #1e293b !important; border-left-width: 3px !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14) !important; outline: none !important; } html[data-theme='dark-block'] input:focus, html[data-theme='dark-block'] textarea:focus, html[data-theme='dark-block'] select:focus { border-color: rgba(255, 255, 255, 0.65) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10) !important; outline: none !important; } /* ── Suppress the global box-shadow: none override for focus in all themes ── The line at ~7180 in this file removes all box-shadows from focused inputs, undoing our per-theme focus rings. We override it here with higher specificity. ─────────────────────────────────────────────────────────────────────────── */ html[data-theme='dark'] .amti-form-control:focus, html[data-theme='block-blue'] .amti-form-control:focus, html[data-theme='block-steel'] .amti-form-control:focus, html[data-theme='block-light'] .amti-form-control:focus, html[data-theme='dark-block'] .amti-form-control:focus { box-shadow: var(--amti-theme-focus-shadow, inherit) !important; } /* Re-declare per-theme to win over the box-shadow: none line */ html[data-theme='dark'] .amti-form-control:focus { box-shadow: 0 0 0 3px rgba(34,211,238,0.14), 0 0 14px rgba(34,211,238,0.10) !important; } html[data-theme='block-blue'] .amti-form-control:focus { box-shadow: 0 0 0 2px rgba(0,210,255,0.18), 0 0 16px rgba(0,210,255,0.18) !important; } html[data-theme='block-steel'] .amti-form-control:focus { box-shadow: inset 3px 0 0 0 rgba(192,205,216,0.3), inset 0 1px 0 rgba(255,255,255,0.06) !important; } html[data-theme='block-light'] .amti-form-control:focus { box-shadow: 0 4px 12px rgba(15,23,42,0.14) !important; } html[data-theme='dark-block'] .amti-form-control:focus { box-shadow: 0 0 0 1px rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.06) !important; } html[data-theme='light'] .amti-form-control:focus { box-shadow: 0 4px 14px rgba(14,165,233,0.12) !important; } /* ══════════════════════════════════════════════════════════════════════════════ DARK-BLOCK: Comprehensive Blue/Glass/Blur Elimination ══════════════════════════════════════════════════════════════════════════════ */ /* ── 1. Kill backdrop-filter blur on non-modal elements ───────────────────── */ html[data-theme='dark-block'] .amti-grid-card, html[data-theme='dark-block'] .drag-ghost, html[data-theme='dark-block'] .amti-drag-ghost, html[data-theme='dark-block'] .amti-os-search-panel, html[data-theme='dark-block'] .pdv-search-wrapper .amti-pdv-search-input, html[data-theme='dark-block'] .pdv-cart, html[data-theme='dark-block'] .pdv-cart-summary, html[data-theme='dark-block'] .pdv-product-card, html[data-theme='dark-block'] .pdv-widget-results, html[data-theme='dark-block'] .theme-glass, html[data-theme='dark-block'] .design-glassmini, html[data-theme='dark-block'] .design-glassmini .amti-modern-calendar, html[data-theme='dark-block'] .wtheme-glass, html[data-theme='dark-block'] .amti-startup-loader, html[data-theme='dark-block'] .amti-sidebar, html[data-theme='dark-block'] .amti-topbar, html[data-theme='dark-block'] .amti-context-menu, html[data-theme='dark-block'] .amti-context-submenu { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Dark-block modal backdrops also remain solid and unfiltered. */ /* ── 2. Modals — glass with neutral tones ────────────────────────────────── */ /* ── 3. Cards — kill ALL blue glow shadows ────────────────────────────────── */ html[data-theme='dark-block'] .amti-grid-card, html[data-theme='dark-block'] .amti-stat-card, html[data-theme='dark-block'] .amti-archive-card, html[data-theme='dark-block'] .amti-card-library-item, html[data-theme='dark-block'] .amti-settings-card, html[data-theme='dark-block'] .amti-settings-hero-card, html[data-theme='dark-block'] .amti-settings-footer-card, html[data-theme='dark-block'] .amti-settings-accordion, html[data-theme='dark-block'] .amti-pdv-cart, html[data-theme='dark-block'] .amti-pdv-catalog-card, html[data-theme='dark-block'] .pdv-product-card, html[data-theme='dark-block'] .amti-card { box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important; border-color: #27282b !important; border-top-color: rgba(255,255,255,0.12) !important; } html[data-theme='dark-block'] .amti-grid-card::before, html[data-theme='dark-block'] .amti-grid-card::after { display: none !important; } html[data-theme='dark-block'] .amti-card::before { display: none !important; } /* Card hover — neutral */ html[data-theme='dark-block'] .amti-grid-card:hover, html[data-theme='dark-block'] .amti-card:hover, html[data-theme='dark-block'] .amti-stat-card:hover, html[data-theme='dark-block'] .amti-archive-card:hover, html[data-theme='dark-block'] .pdv-product-card:hover, html[data-theme='dark-block'] .amti-card-library-item:hover, html[data-theme='dark-block'] .amti-grid-card.os-card:hover, html[data-theme='dark-block'] .amti-grid-card.shortcut-card:hover, html[data-theme='dark-block'] .amti-grid-card.ai-tips-live-card:hover { border-color: #38393e !important; box-shadow: 0 6px 16px rgba(0,0,0,0.7) !important; } /* Card buttons */ html[data-theme='dark-block'] .amti-grid-card .amti-card-btn { background: linear-gradient(180deg, #222326 0%, #121314 100%) !important; border-color: #2d2e32 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important; color: #f3f4f6 !important; } html[data-theme='dark-block'] .amti-grid-card .amti-card-btn:hover { background: linear-gradient(180deg, #2a2c30 0%, #161718 100%) !important; border-color: #38393e !important; box-shadow: 0 3px 6px rgba(0,0,0,0.5) !important; } /* Placeholder card */ html[data-theme='dark-block'] .amti-grid-card.placeholder { border: 2px dashed #2d2e32 !important; box-shadow: none !important; } /* ── 4. Sidebar — kill blue decorative overlays ───────────────────────────── */ html[data-theme='dark-block'] .amti-sidebar::before { display: none !important; } html[data-theme='dark-block'] .amti-nav-group > .amti-submenu { background: #0d0d0e !important; box-shadow: none !important; } html[data-theme='dark-block'] .amti-nav-group.open { border-color: #27282b !important; } html[data-theme='dark-block'] .amti-nav-group.open > button { background: linear-gradient(180deg, #1d1e22 0%, #141517 100%) !important; border-color: #38393e !important; box-shadow: none !important; } html[data-theme='dark-block'] .amti-nav-item button:hover { background: rgba(255,255,255,0.04) !important; border-color: transparent !important; box-shadow: none !important; } html[data-theme='dark-block'] .amti-nav-item.active button { background: linear-gradient(180deg, #222326 0%, #18191a 100%) !important; border-color: #38393e !important; border-left: 3px solid rgba(255,255,255,0.5) !important; box-shadow: none !important; } html[data-theme='dark-block'] .amti-nav-item.active button i, html[data-theme='dark-block'] .amti-nav-item.active button span { color: #f3f4f6 !important; } html[data-theme='dark-block'] .amti-submenu-item button:hover { border-color: transparent !important; } html[data-theme='dark-block'] .amti-back-btn { background: linear-gradient(180deg, #222326 0%, #121314 100%) !important; border-color: #2d2e32 !important; color: #f3f4f6 !important; } html[data-theme='dark-block'] .amti-back-btn:hover { background: linear-gradient(180deg, #2a2c30 0%, #161718 100%) !important; } /* ── 5. Context menu / Submenu — kill blue shadow ─────────────────────────── */ html[data-theme='dark-block'] .amti-context-menu { background: linear-gradient(180deg, #16171a 0%, #0d0e10 100%) !important; border: 1px solid #27282b !important; box-shadow: 0 18px 36px rgba(0,0,0,0.7) !important; } html[data-theme='dark-block'] .amti-context-submenu { background: linear-gradient(180deg, #16171a 0%, #0d0e10 100%) !important; border: 1px solid #27282b !important; box-shadow: 0 18px 36px rgba(0,0,0,0.7) !important; } html[data-theme='dark-block'] .amti-context-menu .amti-context-item:hover { background: rgba(255,255,255,0.05) !important; } html[data-theme='dark-block'] .amti-context-menu .amti-context-item.active { background: rgba(255,255,255,0.08) !important; color: #f3f4f6 !important; } html[data-theme='dark-block'] .amti-context-menu .amti-context-item.active::before { background: rgba(255,255,255,0.5) !important; } /* ── 6. Search panels / buttons — kill blue gradients ─────────────────────── */ html[data-theme='dark-block'] .amti-os-search-btn-active, html[data-theme='dark-block'] .amti-search-btn-active { background: linear-gradient(180deg, #222326 0%, #18191a 100%) !important; border-color: #38393e !important; box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important; color: #f3f4f6 !important; } html[data-theme='dark-block'] .amti-os-search-panel, html[data-theme='dark-block'] .amti-search-panel { background: linear-gradient(180deg, #16171a 0%, #0d0e10 100%) !important; border-color: #27282b !important; box-shadow: 0 8px 20px rgba(0,0,0,0.6) !important; } html[data-theme='dark-block'] .amti-os-search-panel[data-visible="true"] { border-color: #38393e !important; box-shadow: 0 8px 20px rgba(0,0,0,0.6) !important; } html[data-theme='dark-block'] .os-card-search-panel .amti-form-control:focus, html[data-theme='dark-block'] .amti-search-panel .amti-form-control:focus { border-color: rgba(255,255,255,0.65) !important; } /* ── 7. Buttons — kill ALL blue shadows ───────────────────────────────────── */ html[data-theme='dark-block'] .amti-btn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.5) !important; } html[data-theme='dark-block'] .amti-btn-primary, html[data-theme='dark-block'] .amti-os-save-group .amti-btn-primary { background: linear-gradient(180deg, #374151 0%, #1f2937 100%) !important; border-color: #4b5563 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important; } html[data-theme='dark-block'] .amti-btn-primary:hover { background: linear-gradient(180deg, #4b5563 0%, #374151 100%) !important; box-shadow: 0 3px 6px rgba(0,0,0,0.5) !important; } html[data-theme='dark-block'] .amti-btn-cyan { background: linear-gradient(180deg, #222326 0%, #121314 100%) !important; border-color: #2d2e32 !important; color: #f3f4f6 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important; } /* ── 8. Drag ghost ────────────────────────────────────────────────────────── */ html[data-theme='dark-block'] .drag-ghost, html[data-theme='dark-block'] .amti-drag-ghost { border: 1px solid #38393e !important; background: rgba(22,23,26,0.9) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important; } /* ── 9. Chips ─────────────────────────────────────────────────────────────── */ html[data-theme='dark-block'] .amti-chip { background: rgba(255,255,255,0.05) !important; border-color: #2d2e32 !important; color: #f3f4f6 !important; } html[data-theme='dark-block'] .amti-chip-active { background: linear-gradient(180deg, #374151 0%, #1f2937 100%) !important; border-color: #4b5563 !important; color: #ffffff !important; } /* ── 10. PDV (Point of Sale) ──────────────────────────────────────────────── */ html[data-theme='dark-block'] .pdv-search-wrapper .amti-pdv-search-input { background: #09090a !important; border-color: #27282b !important; } html[data-theme='dark-block'] .pdv-search-wrapper .amti-pdv-search-input:focus { border-color: rgba(255,255,255,0.65) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.10) !important; } html[data-theme='dark-block'] .pdv-cart { background: linear-gradient(180deg, #16171a 0%, #0d0e10 100%) !important; border-color: #27282b !important; } html[data-theme='dark-block'] .pdv-cart-summary { background: rgba(9,9,10,0.8) !important; border-color: #27282b !important; } html[data-theme='dark-block'] .amti-pdv-cart-header i { filter: none !important; color: #9ca3af !important; } html[data-theme='dark-block'] .pdv-product-card { background: linear-gradient(180deg, #16171a 0%, #0d0e10 100%) !important; border-color: #27282b !important; } html[data-theme='dark-block'] .pdv-product-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.6) !important; border-color: #38393e !important; } html[data-theme='dark-block'] .pdv-product-card .product-price { background: rgba(255,255,255,0.06) !important; color: #f3f4f6 !important; } html[data-theme='dark-block'] .amti-pdv-checkout-btn { background: linear-gradient(180deg, #374151 0%, #1f2937 100%) !important; border-color: #4b5563 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important; } html[data-theme='dark-block'] .amti-pdv-checkout-btn:hover { background: linear-gradient(180deg, #4b5563 0%, #374151 100%) !important; box-shadow: 0 6px 14px rgba(0,0,0,0.6) !important; } html[data-theme='dark-block'] .amti-pdv-checkout-btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.4) !important; } html[data-theme='dark-block'] .amti-pdv-summary-row { text-shadow: none !important; border-color: rgba(255,255,255,0.06) !important; color: #f3f4f6 !important; } html[data-theme='dark-block'] #pdvCartTotal { color: #f3f4f6 !important; text-shadow: none !important; } html[data-theme='dark-block'] .pdv-empty-cart { color: rgba(255,255,255,0.25) !important; } /* ── 11. Settings ─────────────────────────────────────────────────────────── */ html[data-theme='dark-block'] .amti-settings-hero-card { background: linear-gradient(180deg, #16171a 0%, #0d0e10 100%) !important; border-color: #27282b !important; box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important; } html[data-theme='dark-block'] .amti-settings-hero-card:hover { border-color: #38393e !important; box-shadow: 0 6px 16px rgba(0,0,0,0.7) !important; } html[data-theme='dark-block'] .amti-settings-page-pill { background: rgba(255,255,255,0.05) !important; border-color: #2d2e32 !important; color: #9ca3af !important; } /* ── 12. Table rows / global hover ────────────────────────────────────────── */ html[data-theme='dark-block'] tr[data-id]:hover td, html[data-theme='dark-block'] .amti-table tr:hover td { background-color: rgba(255,255,255,0.03) !important; } /* ── 13. Section icon badges ──────────────────────────────────────────────── */ html[data-theme='dark-block'] .os-modal-section-header .section-icon-badge.badge-primary { background: rgba(255,255,255,0.08) !important; color: #d1d5db !important; } html[data-theme='dark-block'] .os-modal-section-header .section-icon-badge.badge-info { background: rgba(200,220,240,0.08) !important; color: #c8dcf0 !important; } html[data-theme='dark-block'] .os-modal-section-header .section-icon-badge.badge-danger { background: rgba(255,120,120,0.08) !important; color: #e8a0a0 !important; } html[data-theme='dark-block'] .os-modal-section-header .section-icon-badge.badge-success { background: rgba(120,220,160,0.08) !important; color: #a0d8b0 !important; } /* ── 14. OS section / accent borders ──────────────────────────────────────── */ html[data-theme='dark-block'] .os-modal-section { border-color: #27282b !important; border-left: 3px solid rgba(255,255,255,0.08) !important; background: linear-gradient(135deg, rgba(22,23,26,0.7), rgba(16,17,19,0.9)) !important; } html[data-theme='dark-block'] .os-modal-section-header { background: rgba(30,31,34,0.5) !important; border-bottom-color: rgba(255,255,255,0.04) !important; } html[data-theme='dark-block'] .os-modal-section--accent { border-left-color: rgba(255,255,255,0.22) !important; } html[data-theme='dark-block'] .os-modal-section--accent-info { border-left-color: rgba(200,220,240,0.25) !important; } html[data-theme='dark-block'] .os-modal-section--accent-danger { border-left-color: rgba(255,120,120,0.22) !important; } html[data-theme='dark-block'] .os-modal-section--accent-success { border-left-color: rgba(120,220,160,0.22) !important; } /* ── 15. Calendar / Clock widgets ─────────────────────────────────────────── */ html[data-theme='dark-block'] .amti-modern-calendar .cal-day.today { box-shadow: none !important; } html[data-theme='dark-block'] .amti-modern-calendar .cal-day.today::before { background: rgba(255,255,255,0.15) !important; } html[data-theme='dark-block'] .amti-modern-calendar .cal-day:hover:not(.pad-day):not(.today) { background: rgba(255,255,255,0.04) !important; } html[data-theme='dark-block'] .amti-analog-clock { background: rgba(22,23,26,0.9) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important; } html[data-theme='dark-block'] .amti-analog-clock::before { border-color: #27282b !important; } html[data-theme='dark-block'] .amti-analog-clock .clock-center { background: rgba(255,255,255,0.15) !important; box-shadow: 0 0 6px rgba(0,0,0,0.5) !important; } html[data-theme='dark-block'] .amti-clock-widget .clock-time { filter: none !important; color: #f3f4f6 !important; } html[data-theme='dark-block'] .design-glassmini .cal-day.today::before, html[data-theme='dark-block'] .design-compact-dots .cal-day.today::before { background: rgba(255,255,255,0.3) !important; } html[data-theme='dark-block'] .design-neon { border-color: #27282b !important; box-shadow: none !important; } html[data-theme='dark-block'] .design-neon .calendar-header { border-color: #27282b !important; } html[data-theme='dark-block'] .theme-ocean { border-color: #27282b !important; box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important; } /* ── 16. AI Advisor / Alert Modal ─────────────────────────────────────────── */ html[data-theme='dark-block'] .ai-msg.bot { background: rgba(255,255,255,0.04) !important; border-color: #27282b !important; } html[data-theme='dark-block'] .ai-sugg-item:hover { background: rgba(255,255,255,0.04) !important; } html[data-theme='dark-block'] .ai-alert-modal-content .ai-alert-option-shortcut:hover { background: rgba(255,255,255,0.04) !important; border-color: #38393e !important; } html[data-theme='dark-block'] .ai-alert-modal-content .ai-alert-action-primary:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important; } /* ── 17. Thumbnail buttons ────────────────────────────────────────────────── */ html[data-theme='dark-block'] .thumbnail-btn:hover { background: rgba(255,255,255,0.06) !important; border-color: #38393e !important; } html[data-theme='dark-block'] .thumb-box.filled { background: rgba(255,255,255,0.15) !important; } /* ── 18. Tech info highlight ──────────────────────────────────────────────── */ html[data-theme='dark-block'] .tech-info-highlight { border-color: #38393e !important; color: #d1d5db !important; } /* ── 19. OS services / commission ─────────────────────────────────────────── */ html[data-theme='dark-block'] .comissao-stat-icon.icon-primary { background: rgba(255,255,255,0.08) !important; color: #d1d5db !important; } html[data-theme='dark-block'] .comissao-stat-icon.icon-info { background: rgba(255,255,255,0.08) !important; color: #d1d5db !important; } /* ── 19b. Modal internals — kill remaining indigo/cyan ────────────────────── */ html[data-theme='dark-block'] .amti-step-pill.active { color: #d1d5db !important; border-bottom-color: #d1d5db !important; } html[data-theme='dark-block'] .view-os-total-value { color: #d1d5db !important; } html[data-theme='dark-block'] .os-services-total-bar .total-item.total-main .total-value { color: #d1d5db !important; } html[data-theme='dark-block'] .amti-os-item-row[data-mode="display"] .os-row-qtd { color: #d1d5db !important; } html[data-theme='dark-block'] .amti-os-item-row[data-mode="edit"] .amti-os-row { background: rgba(255,255,255,0.03) !important; border-color: #27282b !important; } html[data-theme='dark-block'] .os-services-total-bar { background: linear-gradient(180deg, #1d1e22 0%, #141517 100%) !important; border-top-color: #27282b !important; } html[data-theme='dark-block'] .amti-badge-aguardando_orcamento { background-color: rgba(255,255,255,0.06) !important; color: #9ca3af !important; } /* ── 20. Home card icons ──────────────────────────────────────────────────── */ html[data-theme='dark-block'] .amti-home-card-icon.cyan { background: rgba(255,255,255,0.06) !important; color: #9ca3af !important; } html[data-theme='dark-block'] .amti-home-action-btn:hover { border-color: #38393e !important; } /* ── 21. Loader (managed by #amti-startup-loader-critical-css in dashboard.html) ── */ /* ── 22. WhatsApp badge / other badges ────────────────────────────────────── */ html[data-theme='dark-block'] .amti-whatsapp-badge { background: rgba(255,255,255,0.08) !important; color: #f3f4f6 !important; } /* ── 23. Select options ───────────────────────────────────────────────────── */ html[data-theme='dark-block'] select option:checked, html[data-theme='dark-block'] .amti-form-control option:checked, html[data-theme='dark-block'] .amti-form-control option:selected { background: rgba(255,255,255,0.08) !important; color: #f3f4f6 !important; } html[data-theme='dark-block'] select option:hover, html[data-theme='dark-block'] .amti-form-control option:hover { background: rgba(255,255,255,0.05) !important; } /* ── 24. Topbar ───────────────────────────────────────────────────────────── */ html[data-theme='dark-block'] .amti-topbar { background: linear-gradient(90deg, #000000 0%, #030304 35%, #070709 70%, #0d0d10 100%) !important; border-bottom-color: #1a1a1c !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important; } /* ── 25. Submenu open arrow highlight ─────────────────────────────────────── */ html[data-theme='dark-block'] .amti-nav-group.open > button i.fa-chevron-down, html[data-theme='dark-block'] .amti-nav-group.open > button i { color: #f3f4f6 !important; } /* ── 26. Logout button ────────────────────────────────────────────────────── */ html[data-theme='dark-block'] .amti-logout-btn:hover { background: rgba(255,255,255,0.05) !important; box-shadow: none !important; } /* ── 27. Startup loader backdrop ──────────────────────────────────────────── */ html[data-theme='dark-block'] .amti-startup-loader { background: #0a0a0b !important; } /* ══════════════════════════════════════════════════════════════════════════════ POPUP FOCUS GLOW — subtle themed accent when any modal is open ══════════════════════════════════════════════════════════════════════════════ */ /* Default dark theme — cyan/indigo */ .amti-modal:not(.hidden) .amti-modal-content { animation: amti-modal-zoom-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), amti-popup-focus-glow-cyan 2.8s ease-in-out 0.3s 1; } @keyframes amti-popup-focus-glow-cyan { 0% { box-shadow: 0 35px 70px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(56,189,248,0.0); } 35% { box-shadow: 0 35px 70px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 28px 2px rgba(56,189,248,0.18), 0 0 0 1px rgba(56,189,248,0.25); } 70% { box-shadow: 0 35px 70px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 14px 1px rgba(56,189,248,0.08), 0 0 0 1px rgba(56,189,248,0.10); } 100% { box-shadow: 0 35px 70px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(56,189,248,0.06); } } /* Light theme — subtle dark ring */ html[data-theme='light'] .amti-modal:not(.hidden) .amti-modal-content { animation: amti-popup-focus-glow-light 2.8s ease-in-out 0.3s 1; } @keyframes amti-popup-focus-glow-light { 0% { box-shadow: 0 20px 50px rgba(15,23,42,0.12), 0 0 0 1px rgba(15,23,42,0.0); } 35% { box-shadow: 0 20px 50px rgba(15,23,42,0.12), 0 0 20px 2px rgba(100,116,139,0.10), 0 0 0 1px rgba(15,23,42,0.12); } 70% { box-shadow: 0 20px 50px rgba(15,23,42,0.12), 0 0 10px 1px rgba(100,116,139,0.05), 0 0 0 1px rgba(15,23,42,0.06); } 100% { box-shadow: 0 20px 50px rgba(15,23,42,0.10), 0 0 0 1px rgba(15,23,42,0.05); } } /* Block-steel — platinum/silver glow */ html[data-theme='block-steel'] .amti-modal:not(.hidden) .amti-modal-content { animation: amti-popup-focus-glow-steel 2.8s ease-in-out 0.3s 1; } @keyframes amti-popup-focus-glow-steel { 0% { box-shadow: 0 28px 54px rgba(0,0,0,0.7), 0 0 0 1px rgba(143,163,181,0.0); } 35% { box-shadow: 0 28px 54px rgba(0,0,0,0.7), 0 0 24px 2px rgba(143,163,181,0.16), 0 0 0 1px rgba(143,163,181,0.22); } 70% { box-shadow: 0 28px 54px rgba(0,0,0,0.7), 0 0 12px 1px rgba(143,163,181,0.07), 0 0 0 1px rgba(143,163,181,0.10); } 100% { box-shadow: 0 28px 54px rgba(0,0,0,0.7), 0 0 0 1px rgba(143,163,181,0.08); } } /* Block-blue — electric cyan glow */ html[data-theme='block-blue'] .amti-modal:not(.hidden) .amti-modal-content { animation: amti-popup-focus-glow-blockblue 2.8s ease-in-out 0.3s 1; } @keyframes amti-popup-focus-glow-blockblue { 0% { box-shadow: 0 28px 54px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,210,255,0.0); } 35% { box-shadow: 0 28px 54px rgba(0,0,0,0.7), 0 0 28px 2px rgba(0,210,255,0.18), 0 0 0 1px rgba(0,210,255,0.28); } 70% { box-shadow: 0 28px 54px rgba(0,0,0,0.7), 0 0 14px 1px rgba(0,210,255,0.08), 0 0 0 1px rgba(0,210,255,0.12); } 100% { box-shadow: 0 28px 54px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,210,255,0.06); } } /* Block-light — soft dark shadow pulse */ html[data-theme='block-light'] .amti-modal:not(.hidden) .amti-modal-content { animation: amti-popup-focus-glow-blocklight 2.8s ease-in-out 0.3s 1; } @keyframes amti-popup-focus-glow-blocklight { 0% { box-shadow: 0 20px 50px rgba(30,41,59,0.10), 0 0 0 1px rgba(30,41,59,0.0); } 35% { box-shadow: 0 20px 50px rgba(30,41,59,0.12), 0 0 18px 2px rgba(30,41,59,0.10), 0 0 0 1px rgba(30,41,59,0.14); } 70% { box-shadow: 0 20px 50px rgba(30,41,59,0.10), 0 0 8px 1px rgba(30,41,59,0.05), 0 0 0 1px rgba(30,41,59,0.07); } 100% { box-shadow: 0 20px 50px rgba(30,41,59,0.08), 0 0 0 1px rgba(30,41,59,0.05); } } /* Dark-block — silver/white subtle glow */ html[data-theme='dark-block'] .amti-modal:not(.hidden) .amti-modal-content { animation: amti-popup-focus-glow-darkblock 2.8s ease-in-out 0.3s 1; } @keyframes amti-popup-focus-glow-darkblock { 0% { box-shadow: 0 28px 54px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(255,255,255,0.0); } 35% { box-shadow: 0 28px 54px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 24px 2px rgba(255,255,255,0.08), 0 0 0 1px rgba(255,255,255,0.14); } 70% { box-shadow: 0 28px 54px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 12px 1px rgba(255,255,255,0.04), 0 0 0 1px rgba(255,255,255,0.06); } 100% { box-shadow: 0 28px 54px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(255,255,255,0.04); } } /* ================================================================ REQUIRED FIELD VALIDATION HIGHLIGHTS Simple red border — adapts to all 6 themes ================================================================ */ @keyframes amti-field-shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-3px); } 30% { transform: translateX(3px); } 45% { transform: translateX(-2px); } 60% { transform: translateX(2px); } 75% { transform: translateX(-1px); } 90% { transform: translateX(1px); } } @keyframes amti-invalid-label-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Wrapper */ .amti-field-invalid-wrapper { position: relative; overflow: visible !important; padding-bottom: 4px; } .amti-form-group:has(.amti-field-invalid) { overflow: visible !important; } /* Base invalid state — clean red border only */ .amti-field-invalid, .amti-field-invalid.amti-form-control, .amti-field-invalid.amti-combobox-trigger, .amti-field-invalid.amti-combobox, .amti-field-invalid textarea.amti-form-control, .amti-field-invalid select.amti-form-control { border: 2px solid var(--amti-invalid-color, #ef4444) !important; outline: none !important; box-shadow: none !important; background-color: transparent !important; animation: amti-field-shake 0.4s ease-in-out 1; position: relative; z-index: 2; } /* Label turns red */ .amti-form-group:has(.amti-field-invalid) > label { color: var(--amti-invalid-color, #ef4444) !important; font-weight: 600 !important; } /* Scroll target */ .amti-field-invalid.scroll-target { scroll-margin-top: 120px; } /* ── Dark theme (default) ── */ :root { --amti-invalid-color: #ef4444; } /* ── Light theme ── */ :root[data-theme='light'], html[data-theme='light'] { --amti-invalid-color: #dc2626; } /* ── Block Steel theme ── */ :root[data-theme='block-steel'], html[data-theme='block-steel'] { --amti-invalid-color: #f87171; } html[data-theme='block-steel'] .amti-field-invalid, html[data-theme='block-steel'] .amti-field-invalid.amti-form-control, html[data-theme='block-steel'] .amti-field-invalid.amti-combobox-trigger { border-radius: 0 !important; } /* ── Block Blue theme ── */ :root[data-theme='block-blue'], html[data-theme='block-blue'] { --amti-invalid-color: #ff4d6a; } html[data-theme='block-blue'] .amti-field-invalid, html[data-theme='block-blue'] .amti-field-invalid.amti-form-control, html[data-theme='block-blue'] .amti-field-invalid.amti-combobox-trigger { border-radius: 0 !important; } /* ── Block Light theme ── */ :root[data-theme='block-light'], html[data-theme='block-light'] { --amti-invalid-color: #dc2626; } html[data-theme='block-light'] .amti-field-invalid, html[data-theme='block-light'] .amti-field-invalid.amti-form-control, html[data-theme='block-light'] .amti-field-invalid.amti-combobox-trigger { border-radius: 0 !important; } /* ── Dark Block theme ── */ :root[data-theme='dark-block'] { color-scheme: dark; --bg-main: #000000; --bg-card: #0a0a0a; --card-surface: #0a0a0a; --card-surface-hover: #121212; --button-surface: #111111; --button-surface-hover: #1a1a1a; --bg-card-soft: #050505; --bg-input: #000000; --border-color: #222222; --border-focus: #555555; --text-primary: #ffffff; --text-secondary: #aaaaaa; --text-muted: #666666; --surface-strong-hover: #141414; --card-glow-hover: none; --shadow-soft: none; --shadow-glow: none; --sort-arrow-color: #ffffff; --topbar-bg: linear-gradient(90deg, #000000 0%, #020203 30%, #060608 65%, #0d0d10 100%); --table-header-bg: #0a0a0a; --placeholder-color: #a3a3a3; --primary: #cccccc; --color-cyan: #999999; --color-emerald: #bbbbbb; --color-rose: #aaaaaa; --color-amber: #cccccc; --color-indigo: #888888; --surface-strong: #080808; --accent-soft: #111111; --accent-gradient: linear-gradient(180deg, #222222 0%, #111111 100%); --radius-xl: 0px !important; --radius-lg: 0px !important; --radius-md: 0px !important; --radius-sm: 0px !important; } :root[data-theme='dark-block'], html[data-theme='dark-block'] { --amti-invalid-color: #f87171; } html[data-theme='dark-block'] .amti-field-invalid, html[data-theme='dark-block'] .amti-field-invalid.amti-form-control, html[data-theme='dark-block'] .amti-field-invalid.amti-combobox-trigger { border-radius: 0 !important; } /* ── Block theme button & modal backdrop overrides ── */ html[data-theme='dark-block'] .amti-btn-primary, html[data-theme='dark-block'] .amti-btn { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 4px rgba(0,0,0,0.4) !important; border-color: #2d2e32 !important; } html[data-theme='dark-block'] .amti-btn-primary:hover, html[data-theme='dark-block'] .amti-btn:hover, html[data-theme='dark-block'] .amti-btn-primary:focus, html[data-theme='dark-block'] .amti-btn:focus { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 3px 6px rgba(0,0,0,0.6) !important; border-color: #4b5563 !important; } html[data-theme='block-steel'] .amti-btn-primary, html[data-theme='block-steel'] .amti-btn { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.2) !important; border-color: #4f5f72 !important; } html[data-theme='block-steel'] .amti-btn-primary:hover, html[data-theme='block-steel'] .amti-btn:hover, html[data-theme='block-steel'] .amti-btn-primary:focus, html[data-theme='block-steel'] .amti-btn:focus { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 3px 6px rgba(0,0,0,0.3) !important; border-color: #5c78a6 !important; } html[data-theme='block-blue'] .amti-btn-primary, html[data-theme='block-blue'] .amti-btn { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.3) !important; border-color: #1a355e !important; } html[data-theme='block-blue'] .amti-btn-primary:hover, html[data-theme='block-blue'] .amti-btn:hover, html[data-theme='block-blue'] .amti-btn-primary:focus, html[data-theme='block-blue'] .amti-btn:focus { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 8px rgba(0,0,0,0.5) !important; border-color: #00d2ff !important; } :root[data-theme='dark-block'] { --modal-backdrop: rgba(0, 0, 0, 0.88); } :root[data-theme='block-steel'] { --modal-backdrop: rgba(8, 12, 18, 0.88); } :root[data-theme='block-blue'] { --modal-backdrop: rgba(2, 4, 10, 0.90); } /* Definições adicionais de fundo escuro para outros temas para melhorar o contraste */ :root[data-theme='light'] { --modal-backdrop: rgba(15, 23, 42, 0.80); } :root[data-theme='block-light'] { --modal-backdrop: rgba(15, 23, 42, 0.80); } :root[data-theme='dark'] { --modal-backdrop: rgba(4, 6, 12, 0.88); } /* ─── ULTRA PERFORMANCE MODE ──────────────────────────────────────── */ /* Reduces decorative rendering work on resource-limited devices. Keeps all functionality: clocks, charts, tables, real-time updates. Uses :is() consolidation and CSS custom properties. */ /* Set transition/animation override on specific interactive elements (NOT wildcard *) */ body.amti-ultra-performance-mode :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .amti-modal-content, .amti-sidebar, .amti-topbar, .amti-btn, .amti-form-control, .amti-table-container, .amti-clock-widget, .amti-digital-clock, .amti-modern-calendar, .ai-advisor-chat, .ai-advisor-suggestions, .amti-card-library-item, .amti-theme-preview-card, .amti-nav-item, .amti-brand-logo, .amti-brand-name, .amti-card-body, .amti-card-header, .amti-card-title, input, textarea, select, .amti-context-menu, .amti-context-submenu, .amti-modal, .amti-modal-backdrop, .amti-search-panel, .amti-os-search-panel, .os-card-search-panel, .pdv-cart, .pdv-cart-summary, .pdv-widget-results ) { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; } body.amti-ultra-performance-mode { -webkit-font-smoothing: auto !important; -moz-osx-font-smoothing: auto !important; } /* Remove ALL box-shadows, backdrop-filter, gradients from everything */ body.amti-ultra-performance-mode .amti-card, body.amti-ultra-performance-mode .amti-grid-card, body.amti-ultra-performance-mode .amti-stat-card, body.amti-ultra-performance-mode .amti-archive-card, body.amti-ultra-performance-mode .pdv-product-card, body.amti-ultra-performance-mode .amti-modal-content, body.amti-ultra-performance-mode .amti-sidebar, body.amti-ultra-performance-mode .amti-topbar, body.amti-ultra-performance-mode .amti-form-control, body.amti-ultra-performance-mode .amti-table-container, body.amti-ultra-performance-mode .amti-clock-widget, body.amti-ultra-performance-mode .amti-digital-clock, body.amti-ultra-performance-mode .amti-modern-calendar, body.amti-ultra-performance-mode .ai-advisor-chat, body.amti-ultra-performance-mode .ai-advisor-suggestions, body.amti-ultra-performance-mode .amti-card-library-item, body.amti-ultra-performance-mode .amti-theme-preview-card, body.amti-ultra-performance-mode #tab-home .amti-card, body.amti-ultra-performance-mode #tab-home .amti-grid-card, body.amti-ultra-performance-mode #tab-home .amti-stat-card, body.amti-ultra-performance-mode #tab-home .amti-archive-card, body.amti-ultra-performance-mode #tab-home .pdv-product-card, body.amti-ultra-performance-mode #tab-home .amti-grid-card.os-card, body.amti-ultra-performance-mode #tab-home .amti-card-library-item, body.amti-ultra-performance-mode #tab-home .amti-grid-card.shortcut-card, body.amti-ultra-performance-mode #tab-home .amti-grid-card.agenda-card, body.amti-ultra-performance-mode #tab-home .amti-grid-card.ai-tips-live-card, body.amti-ultra-performance-mode #tab-home .amti-grid-card.clock-widget-card, body.amti-ultra-performance-mode #tab-home .amti-grid-card.calendar-widget-card, body.amti-ultra-performance-mode #tab-home .amti-grid-card.pdv-widget-card { box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--bg-card) !important; background-image: none !important; border-radius: 4px !important; border: 1px solid var(--border-color) !important; transform: none !important; } /* ───────────────────────────────────────────────────────────────────────────── PERFORMANCE & ULTRA PERFORMANCE MODE: UNIFIED THEME-COHESIVE BUTTON PALETTE ───────────────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────────────── ULTRA PERFORMANCE MODE ONLY: FLAT LIGHTWEIGHT BUTTON PALETTE (Desempenho = Normal) ───────────────────────────────────────────────────────────────────────────── */ /* 1. Base Secondary / Generic Buttons (.amti-btn) */ body.amti-ultra-performance-mode .amti-btn, html[data-theme='dark'] body.amti-ultra-performance-mode .amti-btn, html[data-theme='dark-block'] body.amti-ultra-performance-mode .amti-btn { background-color: #151d2a !important; background-image: none !important; color: #cbd5e1 !important; border: 1px solid rgba(148, 163, 184, 0.16) !important; box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; transition: none !important; animation: none !important; font-weight: 500 !important; } body.amti-ultra-performance-mode .amti-btn:hover, html[data-theme='dark'] body.amti-ultra-performance-mode .amti-btn:hover, html[data-theme='dark-block'] body.amti-ultra-performance-mode .amti-btn:hover { background-color: #1e2a3c !important; color: #ffffff !important; border-color: rgba(148, 163, 184, 0.30) !important; } /* 2. Theme-Specific Primary Highlight Buttons (.amti-btn-primary) */ /* Default Dark & dark-block: Deep Oceanic Blue with Cyan Border Accent */ body.amti-ultra-performance-mode .amti-btn-primary, html[data-theme='dark'] body.amti-ultra-performance-mode .amti-btn-primary, html[data-theme='dark-block'] body.amti-ultra-performance-mode .amti-btn-primary { background-color: #0284c7 !important; background-image: none !important; color: #ffffff !important; border: 1px solid #38bdf8 !important; box-shadow: none !important; text-shadow: none !important; font-weight: 600 !important; } body.amti-ultra-performance-mode .amti-btn-primary:hover, html[data-theme='dark'] body.amti-ultra-performance-mode .amti-btn-primary:hover, html[data-theme='dark-block'] body.amti-ultra-performance-mode .amti-btn-primary:hover { background-color: #0369a1 !important; color: #ffffff !important; border-color: #7dd3fc !important; } /* block-blue: Dark Cobalt Navy with Vivid Blue Accent */ html[data-theme='block-blue'] body.amti-ultra-performance-mode .amti-btn-primary { background-color: #1d4ed8 !important; background-image: none !important; color: #ffffff !important; border: 1px solid #60a5fa !important; font-weight: 600 !important; } html[data-theme='block-blue'] body.amti-ultra-performance-mode .amti-btn-primary:hover { background-color: #1e40af !important; color: #ffffff !important; border-color: #93c5fd !important; } html[data-theme='block-blue'] body.amti-ultra-performance-mode .amti-btn { background-color: #0f172a !important; background-image: none !important; border: 1px solid #1e293b !important; color: #cbd5e1 !important; } html[data-theme='block-blue'] body.amti-ultra-performance-mode .amti-btn:hover { background-color: #1e293b !important; border-color: #334155 !important; color: #ffffff !important; } /* block-steel: Gunmetal Titanium Slate with Steel Accent */ html[data-theme='block-steel'] body.amti-ultra-performance-mode .amti-btn-primary { background-color: #334155 !important; background-image: none !important; color: #ffffff !important; border: 1px solid #94a3b8 !important; font-weight: 600 !important; } html[data-theme='block-steel'] body.amti-ultra-performance-mode .amti-btn-primary:hover { background-color: #1e293b !important; color: #ffffff !important; border-color: #cbd5e1 !important; } html[data-theme='block-steel'] body.amti-ultra-performance-mode .amti-btn { background-color: #1e293b !important; background-image: none !important; border: 1px solid #334155 !important; color: #cbd5e1 !important; } html[data-theme='block-steel'] body.amti-ultra-performance-mode .amti-btn:hover { background-color: #334155 !important; border-color: #475569 !important; color: #ffffff !important; } /* light & block-light: Deep Contrast Navy Primary */ html[data-theme='light'] body.amti-ultra-performance-mode .amti-btn-primary, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-btn-primary { background-color: #0284c7 !important; background-image: none !important; color: #ffffff !important; border: 1px solid #0369a1 !important; font-weight: 600 !important; } html[data-theme='light'] body.amti-ultra-performance-mode .amti-btn-primary:hover, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-btn-primary:hover { background-color: #0369a1 !important; color: #ffffff !important; border-color: #075985 !important; } html[data-theme='light'] body.amti-ultra-performance-mode .amti-btn, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-btn { background-color: #e2e8f0 !important; background-image: none !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; } html[data-theme='light'] body.amti-ultra-performance-mode .amti-btn:hover, html[data-theme='block-light'] body.amti-ultra-performance-mode .amti-btn:hover { background-color: #cbd5e1 !important; color: #020617 !important; border-color: #94a3b8 !important; } /* 3. Shared Highlight Action Buttons across all themes */ /* Concluir / Success Highlight */ body.amti-ultra-performance-mode .amti-btn-success, body.amti-ultra-performance-mode .amti-btn-concluir, html[data-theme] body.amti-ultra-performance-mode .amti-btn-concluir { background-color: #059669 !important; background-image: none !important; color: #ffffff !important; border: 1px solid #34d399 !important; font-weight: 600 !important; } body.amti-ultra-performance-mode .amti-btn-success:hover, body.amti-ultra-performance-mode .amti-btn-concluir:hover { background-color: #047857 !important; color: #ffffff !important; border-color: #6ee7b7 !important; } /* Warning Highlight */ body.amti-ultra-performance-mode .amti-btn-warning, html[data-theme] body.amti-ultra-performance-mode .amti-btn-warning { background-color: #d97706 !important; background-image: none !important; color: #ffffff !important; border: 1px solid #fbbf24 !important; font-weight: 600 !important; } body.amti-ultra-performance-mode .amti-btn-warning:hover { background-color: #b45309 !important; color: #ffffff !important; border-color: #fde047 !important; } /* Danger Highlight */ body.amti-ultra-performance-mode .amti-btn-danger, html[data-theme] body.amti-ultra-performance-mode .amti-btn-danger { background-color: #dc2626 !important; background-image: none !important; color: #ffffff !important; border: 1px solid #f87171 !important; font-weight: 600 !important; } body.amti-ultra-performance-mode .amti-btn-danger:hover { background-color: #b91c1c !important; color: #ffffff !important; border-color: #fca5a5 !important; } body.amti-ultra-performance-mode .amti-nav-item button { border: none !important; } /* Context menus use theme's flat bg color in ultra mode */ body.amti-ultra-performance-mode .amti-context-menu, body.amti-ultra-performance-mode .amti-context-submenu { background: var(--bg-card) !important; background-image: none !important; border: 1px solid var(--border-color) !important; } /* Remove all pseudo-element decorative effects */ body.amti-ultra-performance-mode .amti-card::before, body.amti-ultra-performance-mode .amti-card::after, body.amti-ultra-performance-mode .amti-grid-card::before, body.amti-ultra-performance-mode .amti-grid-card::after, body.amti-ultra-performance-mode .amti-sidebar::before, body.amti-ultra-performance-mode .amti-sidebar::after, body.amti-ultra-performance-mode .amti-topbar::before, body.amti-ultra-performance-mode .amti-topbar::after, body.amti-ultra-performance-mode .amti-modal-content::before, body.amti-ultra-performance-mode .amti-modal-content::after, body.amti-ultra-performance-mode .amti-brand-logo::before, body.amti-ultra-performance-mode .amti-brand-logo::after, body.amti-ultra-performance-mode .amti-nav-item::before, body.amti-ultra-performance-mode .amti-nav-item::after { display: none !important; content: none !important; } /* Remove hover effects — keep flat interaction */ body.amti-ultra-performance-mode .amti-card:hover, body.amti-ultra-performance-mode .amti-grid-card:hover, body.amti-ultra-performance-mode .amti-stat-card:hover, body.amti-ultra-performance-mode .amti-archive-card:hover, body.amti-ultra-performance-mode .pdv-product-card:hover, body.amti-ultra-performance-mode #tab-home .amti-card:hover, body.amti-ultra-performance-mode #tab-home .amti-grid-card:hover, body.amti-ultra-performance-mode #tab-home .amti-stat-card:hover, body.amti-ultra-performance-mode #tab-home .amti-archive-card:hover, body.amti-ultra-performance-mode #tab-home .pdv-product-card:hover, body.amti-ultra-performance-mode #tab-home .amti-grid-card.os-card:hover, body.amti-ultra-performance-mode #tab-home .amti-card-library-item:hover, body.amti-ultra-performance-mode #tab-home .amti-grid-card.shortcut-card:hover, body.amti-ultra-performance-mode #tab-home .amti-grid-card.agenda-card:hover, body.amti-ultra-performance-mode #tab-home .amti-grid-card.ai-tips-live-card:hover, body.amti-ultra-performance-mode #tab-home .amti-grid-card.clock-widget-card:hover, body.amti-ultra-performance-mode #tab-home .amti-grid-card.calendar-widget-card:hover, body.amti-ultra-performance-mode #tab-home .amti-grid-card.pdv-widget-card:hover { transform: none !important; box-shadow: none !important; background-image: none !important; } /* Remove all text-shadows and filters */ body.amti-ultra-performance-mode .amti-brand-name, body.amti-ultra-performance-mode .amti-brand-logo, body.amti-ultra-performance-mode .amti-card-title, body.amti-ultra-performance-mode .amti-stat-card h3 { text-shadow: none !important; filter: none !important; } /* Mantém o espaçamento das grades em todos os perfis */ /* Remove card internal padding so content fills available space. The card itself already has padding (e.g. .amti-grid-card has 16px), so adding padding on body/header only wastes space and makes tables cramped. */ body.amti-ultra-performance-mode .amti-card-body { padding: 0 !important; } body.amti-ultra-performance-mode .amti-card-header { padding: 0 !important; } /* Simplify scrollbar */ body.amti-ultra-performance-mode ::-webkit-scrollbar { width: 6px !important; height: 6px !important; } body.amti-ultra-performance-mode ::-webkit-scrollbar-thumb { background: var(--text-secondary) !important; border-radius: 3px !important; } /* Use system fonts for faster rendering */ body.amti-ultra-performance-mode, body.amti-ultra-performance-mode .amti-card, body.amti-ultra-performance-mode .amti-grid-card, body.amti-ultra-performance-mode .amti-table-container, body.amti-ultra-performance-mode .amti-sidebar, body.amti-ultra-performance-mode .amti-modal-content { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; } /* Canvas elements: keep visible but simplify rendering */ body.amti-ultra-performance-mode canvas { image-rendering: pixelated !important; } body.amti-ultra-performance-mode img { image-rendering: optimizeSpeed !important; } /* STRICT containment for dashboard cards (most aggressive — layout + style + paint + size) */ body.amti-ultra-performance-mode .amti-dashboard-grid > .amti-card, body.amti-ultra-performance-mode .amti-dashboard-grid > .amti-grid-card { contain: strict !important; contain-intrinsic-size: auto 250px; } body.amti-ultra-performance-mode .amti-table-container { contain: layout style paint !important; } /* Reinforce content-visibility for inactive tabs */ body.amti-ultra-performance-mode .amti-tab-content:not(.active) { content-visibility: hidden !important; contain-intrinsic-size: 0 500px; } /* Reduce modals to minimal chrome */ body.amti-ultra-performance-mode .amti-modal-backdrop { background: rgba(0, 0, 0, 0.8) !important; } body.amti-ultra-performance-mode .amti-modal-content { border-radius: 4px !important; } /* Buttons: flat, minimal */ body.amti-ultra-performance-mode .amti-btn { border-radius: 4px !important; padding: 6px 12px !important; font-weight: 500 !important; } /* Forms: minimal styling */ body.amti-ultra-performance-mode .amti-form-control { border-radius: 4px !important; padding: 6px 8px !important; } /* Tables: compact rows */ body.amti-ultra-performance-mode .amti-table td, body.amti-ultra-performance-mode .amti-table th { padding: 6px 8px !important; } /* Sidebar: minimal */ body.amti-ultra-performance-mode .amti-sidebar { border-right: 1px solid var(--border-color) !important; } /* Topbar: minimal */ body.amti-ultra-performance-mode .amti-topbar { border-bottom: 1px solid var(--border-color) !important; } /* Block external font loading in ultra mode */ body.amti-ultra-performance-mode { font-display: optional; } /* ─── TOAST NOTIFICATIONS ─────────────────────────────────────────────── */ #toastContainer { position: fixed; top: 24px; right: 24px; z-index: 999999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { position: relative; display: flex !important; align-items: flex-start !important; gap: 12px !important; min-width: 320px !important; max-width: 440px !important; padding: 14px 16px !important; border-radius: 12px; background: var(--card-surface, #1e293b); border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); color: var(--text-primary, #f1f5f9); font-size: 0.9rem; font-weight: 500; line-height: 1.4; pointer-events: all; animation: amti-modal-fade-in 0.25s ease-out; backdrop-filter: none; -webkit-backdrop-filter: none; box-sizing: border-box; overflow: hidden; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease; } .toast-content { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; } .toast-title { font-size: 0.88rem; font-weight: 750; line-height: 1.25; margin: 0; color: inherit; } .toast.success .toast-title { color: #10b981; } .toast.error .toast-title, .toast.danger .toast-title { color: #ef4444; } .toast.warning .toast-title { color: #f59e0b; } .toast.info .toast-title { color: #38bdf8; } .toast .toast-message, .toast-message { flex: 1; font-size: 0.82rem; line-height: 1.4; opacity: 0.88; margin: 0; word-break: break-word; } .toast-category-icon { flex-shrink: 0; font-size: 1.15rem; line-height: 1; margin-top: 2px; display: flex; align-items: center; justify-content: center; } .toast.success .toast-category-icon { color: #10b981; } .toast.error .toast-category-icon, .toast.danger .toast-category-icon { color: #ef4444; } .toast.warning .toast-category-icon { color: #f59e0b; } .toast.info .toast-category-icon { color: #38bdf8; } .toast-icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .toast.success .toast-icon { color: #10b981; } .toast.error .toast-icon { color: #ef4444; } .toast.warning .toast-icon { color: #f59e0b; } .toast.info .toast-icon { color: #38bdf8; } .toast-close-btn { flex-shrink: 0; background: transparent; border: none; color: var(--text-secondary, #94a3b8); font-size: 1.2rem; padding: 0; margin: 0; margin-left: 2px; line-height: 1; cursor: pointer; opacity: 0.7; pointer-events: all; transition: opacity 0.15s, color 0.15s; } .toast-close-btn:hover { opacity: 1; color: var(--text-primary, #f1f5f9); } .toast.is-closing { animation: amti-toast-slide-out 0.25s ease-in forwards; } @keyframes amti-toast-slide-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } } /* Perfil ultra: notificações simplificadas */ body.amti-performance-mode .toast { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 4px 12px rgba(0,0,0,0.25); } /* PREVENÇÃO DEFINITIVA DE CURSOR DE DIGITAÇÃO / CARET EM BOTÕES DE FECHAR */ button, .amti-modal-close, .os-modal-close, .zn-modal-close, .sa-modal-close, .toast-close-btn, .feedback-panel-close, .feedback-screenshot-remove, .feedback-success-close-btn, .amti-settings-search-clear, .sa-search-clear, .pdv-widget-search-clear, .close, .btn-close, [data-dismiss='modal'], [data-amti-close] { cursor: pointer !important; outline: none !important; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; caret-color: transparent !important; } button *, .amti-modal-close *, .os-modal-close *, .zn-modal-close *, .sa-modal-close *, .toast-close-btn *, .feedback-panel-close *, .feedback-screenshot-remove *, .feedback-success-close-btn *, .amti-settings-search-clear *, .sa-search-clear *, .pdv-widget-search-clear *, .close *, .btn-close *, [data-dismiss='modal'] *, [data-amti-close] * { pointer-events: none !important; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; cursor: pointer !important; caret-color: transparent !important; } button:focus, button:focus-visible, button:active, .amti-modal-close:focus, .amti-modal-close:focus-visible, .amti-modal-close:active { outline: none !important; caret-color: transparent !important; } /* ═════════════════════════════════════════════════════════════════════════ PADRONIZAÇÃO UNIVERSAL DOS BOTÕES "X" FECHAR (PADRÃO EDITAR ORDEM DE SERVIÇO) Todos os botões fechar são rigorosamente QUADRADOS (36x36px), nunca retângulos, com transição suave, rotação de ícone e adaptação fiel a TODOS os temas. ═════════════════════════════════════════════════════════════════════════ */ :is( .amti-sidebar-close, .amti-modal-close, .os-modal-close, .zn-modal-close, .sa-modal-close, .toast-close-btn, .feedback-panel-close, .feedback-screenshot-remove, .amti-contract-expiration-close, .amti-settings-search-clear, .sa-search-clear, .pdv-widget-search-clear, .close, .btn-close, [data-dismiss='modal'], [data-amti-close], [aria-label='Fechar'], [aria-label='Fechar menu'], [aria-label='Close'], [aria-label*='Fechar'], [aria-label*='fechar'], [title='Fechar menu'], [title='Fechar']:not(.view-agenda-footer *), [title*='Fechar']:not(.view-agenda-footer *), .amti-modal-header button:has(> i.fa-xmark), .amti-modal-header button:has(> i.fa-times), .modal-header button:has(> i.fa-xmark), .modal-header button:has(> i.fa-times) ) { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; flex: 0 0 36px !important; aspect-ratio: 1 / 1 !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; align-self: center !important; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.65); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); cursor: pointer !important; transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important; } :is( .amti-sidebar-close, .amti-modal-close, .os-modal-close, .zn-modal-close, .sa-modal-close, .toast-close-btn, .feedback-panel-close, .feedback-screenshot-remove, .amti-contract-expiration-close, .amti-settings-search-clear, .sa-search-clear, .pdv-widget-search-clear, .close, .btn-close, [data-dismiss='modal'], [data-amti-close], [aria-label='Fechar'], [aria-label='Fechar menu'], [aria-label='Close'], [aria-label*='Fechar'], [aria-label*='fechar'], [title='Fechar menu'], [title='Fechar']:not(.view-agenda-footer *), [title*='Fechar']:not(.view-agenda-footer *), .amti-modal-header button:has(> i.fa-xmark), .amti-modal-header button:has(> i.fa-times), .modal-header button:has(> i.fa-xmark), .modal-header button:has(> i.fa-times) ) i { font-size: 14px !important; line-height: 1 !important; display: inline-block !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important; } :is( .amti-sidebar-close, .amti-modal-close, .os-modal-close, .zn-modal-close, .sa-modal-close, .toast-close-btn, .feedback-panel-close, .feedback-screenshot-remove, .amti-contract-expiration-close, .amti-settings-search-clear, .sa-search-clear, .pdv-widget-search-clear, .close, .btn-close, [data-dismiss='modal'], [data-amti-close], [aria-label='Fechar'], [aria-label='Fechar menu'], [aria-label='Close'], [aria-label*='Fechar'], [aria-label*='fechar'], [title='Fechar menu'], [title='Fechar']:not(.view-agenda-footer *), [title*='Fechar']:not(.view-agenda-footer *), .amti-modal-header button:has(> i.fa-xmark), .amti-modal-header button:has(> i.fa-times), .modal-header button:has(> i.fa-xmark), .modal-header button:has(> i.fa-times) ):hover { background: rgba(239, 68, 68, 0.14) !important; border-color: rgba(239, 68, 68, 0.3) !important; color: #ef4444 !important; transform: scale(1.08) !important; box-shadow: 0 0 12px rgba(239, 68, 68, 0.22) !important; } :is( .amti-sidebar-close, .amti-modal-close, .os-modal-close, .zn-modal-close, .sa-modal-close, .toast-close-btn, .feedback-panel-close, .feedback-screenshot-remove, .amti-contract-expiration-close, .amti-settings-search-clear, .sa-search-clear, .pdv-widget-search-clear, .close, .btn-close, [data-dismiss='modal'], [data-amti-close], [aria-label='Fechar'], [aria-label='Fechar menu'], [aria-label='Close'], [aria-label*='Fechar'], [aria-label*='fechar'], [title='Fechar menu'], [title='Fechar']:not(.view-agenda-footer *), [title*='Fechar']:not(.view-agenda-footer *), .amti-modal-header button:has(> i.fa-xmark), .amti-modal-header button:has(> i.fa-times), .modal-header button:has(> i.fa-xmark), .modal-header button:has(> i.fa-times) ):hover i { transform: rotate(90deg) !important; } :is( .amti-sidebar-close, .amti-modal-close, .os-modal-close, .zn-modal-close, .sa-modal-close, .toast-close-btn, .feedback-panel-close, .feedback-screenshot-remove, .amti-contract-expiration-close, .amti-settings-search-clear, .sa-search-clear, .pdv-widget-search-clear, .close, .btn-close, [data-dismiss='modal'], [data-amti-close], [aria-label='Fechar'], [aria-label='Fechar menu'], [aria-label='Close'], [aria-label*='Fechar'], [aria-label*='fechar'], [title='Fechar menu'], [title='Fechar']:not(.view-agenda-footer *), [title*='Fechar']:not(.view-agenda-footer *), .amti-modal-header button:has(> i.fa-xmark), .amti-modal-header button:has(> i.fa-times), .modal-header button:has(> i.fa-xmark), .modal-header button:has(> i.fa-times) ):active { transform: scale(0.95) !important; background: rgba(239, 68, 68, 0.22) !important; } /* ═════════════════════════════════════════════════════════════════════════ TEMAS "BLOCK": BOTÃO FECHAR "X" RIGOROSAMENTE QUADRADO E COM CANTOS RETOS (0px) EM TODAS AS ÁREAS DOS TEMAS BLOCK (SIDEBAR, MODAIS, TOASTS, AVISOS, ETC.) ═════════════════════════════════════════════════════════════════════════ */ :is( html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='dark-block'], html[data-theme='block-light'], html[data-theme*='block'], html.theme-block-steel, html.theme-block-blue, html.theme-dark-block, html.theme-block-light, body.theme-block-steel, body.theme-block-blue, body.theme-dark-block, body.theme-block-light ) :is( .amti-sidebar-close, .amti-modal-close, .os-modal-close, .zn-modal-close, .sa-modal-close, .toast-close-btn, .feedback-panel-close, .feedback-screenshot-remove, .amti-contract-expiration-close, .amti-settings-search-clear, .sa-search-clear, .pdv-widget-search-clear, .close, .btn-close, [data-dismiss='modal'], [data-amti-close], [aria-label='Fechar'], [aria-label='Fechar menu'], [aria-label='Close'], [aria-label*='Fechar'], [aria-label*='fechar'], [title='Fechar menu'], [title='Fechar'], [title*='Fechar'], .amti-modal-header button:has(> i.fa-xmark), .amti-modal-header button:has(> i.fa-times), .modal-header button:has(> i.fa-xmark), .modal-header button:has(> i.fa-times) ) { border-radius: 0px !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; flex: 0 0 36px !important; aspect-ratio: 1 / 1 !important; padding: 0 !important; } /* ═════════════════════════════════════════════════════════════════════════ TEMAS CLAROS (LIGHT & BLOCK-LIGHT): CORES DE ALTO CONTRASTE PARA BOTÕES FECHAR "X" ═════════════════════════════════════════════════════════════════════════ */ :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) :is( .amti-sidebar-close, .amti-modal-close, .os-modal-close, .zn-modal-close, .sa-modal-close, .toast-close-btn, .feedback-panel-close, .feedback-screenshot-remove, .amti-contract-expiration-close, .amti-settings-search-clear, .sa-search-clear, .pdv-widget-search-clear, .close, .btn-close, [data-dismiss='modal'], [data-amti-close], [aria-label='Fechar'], [aria-label='Fechar menu'], [aria-label='Close'], [aria-label*='Fechar'], [aria-label*='fechar'], [title='Fechar menu'], [title='Fechar'], [title*='Fechar'], .amti-modal-header button:has(> i.fa-xmark), .amti-modal-header button:has(> i.fa-times), .modal-header button:has(> i.fa-xmark), .modal-header button:has(> i.fa-times) ) { background: rgba(15, 23, 42, 0.06) !important; border: 1px solid rgba(15, 23, 42, 0.14) !important; color: rgba(15, 23, 42, 0.65) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) :is( .amti-sidebar-close, .amti-modal-close, .os-modal-close, .zn-modal-close, .sa-modal-close, .toast-close-btn, .feedback-panel-close, .feedback-screenshot-remove, .amti-contract-expiration-close, .amti-settings-search-clear, .sa-search-clear, .pdv-widget-search-clear, .close, .btn-close, [data-dismiss='modal'], [data-amti-close], [aria-label='Fechar'], [aria-label='Fechar menu'], [aria-label='Close'], [aria-label*='Fechar'], [aria-label*='fechar'], [title='Fechar menu'], [title='Fechar'], [title*='Fechar'], .amti-modal-header button:has(> i.fa-xmark), .amti-modal-header button:has(> i.fa-times), .modal-header button:has(> i.fa-xmark), .modal-header button:has(> i.fa-times) ):hover { background: rgba(239, 68, 68, 0.12) !important; border-color: rgba(239, 68, 68, 0.32) !important; color: #dc2626 !important; transform: scale(1.08) !important; } /* ═══════════════════════════════════════════════════════════════ SISTEMA UNIVERSAL DE MODAIS E POPUPS — PADRÃO, DESEMPENHO E ULTRA DESEMPENHO Totalmente integrado ao tema ativo, controle de escala de blur e otimizações de GPU ═══════════════════════════════════════════════════════════════ */ /* ── Base: !important para padronizar todos os modais e popups do AMTI — Padrão Registrar Lançamento Financeiro ── */ :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ) { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9999; display: flex; align-items: center; justify-content: center; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: opacity 0.22s ease; transform: translateZ(0); contain: layout paint; } /* Fallback: caso o modal seja renderizado isoladamente sem body.amti-has-open-modal, segue exatamente o padrão do #financeModal */ body:not(.amti-has-open-modal) :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ) { background: var(--modal-backdrop, rgba(4, 6, 12, 0.82)) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ) :is(.amti-modal-content, .zn-modal-dialog, > div:first-child) { border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 calc(30px * var(--amti-glow-scale, 1)) rgba(99, 102, 241, 0.18); position: relative; overflow: hidden; transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } /* ═══════════════════════════════════════════════════════════════ TEMAS E DESEMPENHO — UNIFORMIZAÇÃO TOTAL DE POPUPS E MODAIS Todos os popups seguem o padrão sólido e escurecido do #financeModal: - Backdrop sem filtros, independentemente do modo de desempenho - Perfil ultra: fundo opaco de alto contraste sem filtros ═══════════════════════════════════════════════════════════════ */ /* Perfil ultra — sombras atenuadas no conteúdo do diálogo */ :is(body, html).amti-performance-mode:not(.amti-ultra-performance-mode) :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ) :is(.amti-modal-content, .zn-modal-dialog, > div:first-child) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important; } /* Fallback visual do perfil ultra caso o modal seja aberto sem body.amti-has-open-modal */ :is(body, html).amti-performance-mode body:not(.amti-has-open-modal) :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ), body.amti-performance-mode:not(.amti-has-open-modal) :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--modal-backdrop, rgba(4, 6, 12, 0.88)) !important; } /* Fallback Modo Ultra Desempenho caso o modal seja aberto sem body.amti-has-open-modal */ :is(body, html).amti-ultra-performance-mode body:not(.amti-has-open-modal) :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ), body.amti-ultra-performance-mode:not(.amti-has-open-modal) :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(2, 4, 10, 0.96) !important; } /* Desfoque / Blur desativado explicitamente */ :is(body, html).amti-hide-blur :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ), :is(body, html).amti-hide-blur :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ) :is(.amti-modal-content, .zn-modal-dialog, > div:first-child), :is(body, html).amti-hide-blur .amti-modal-header, :is(body, html).amti-hide-blur .os-modal-section, :is(body, html).amti-hide-blur .amti-modal-footer { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :is(body, html).amti-ultra-performance-mode :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(2, 4, 10, 0.96) !important; animation: none !important; transition: none !important; box-shadow: none !important; } html[data-theme='dark-block'].amti-ultra-performance-mode :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ), body.amti-ultra-performance-mode html[data-theme='dark-block'] :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ) { background: rgba(0, 0, 0, 0.96) !important; } :is(body, html).amti-ultra-performance-mode :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ) :is(.amti-modal-content, .zn-modal-dialog, > div:first-child) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; } :is(body, html).amti-ultra-performance-mode .amti-modal-top-accent { display: none !important; } /* Glow / Brilho desativado */ body.amti-hide-glow :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ) :is(.amti-modal-content, .zn-modal-dialog, > div:first-child) { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; } body.amti-hide-glow .amti-card, body.amti-hide-glow .amti-stat-card, body.amti-hide-glow .amti-grid-card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; text-shadow: none !important; } /* Animações e Movimento desativados */ :is(body, html).amti-hide-animations :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ), :is(body, html).amti-hide-animations :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ) :is(.amti-modal-content, .zn-modal-dialog, > div:first-child), :is(body, html).amti-reduced-motion :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ), :is(body, html).amti-reduced-motion :is( #dashboardUserModal, #amtiCustomBackupDirModal, #amtiRestoreProgressOverlay, #userLogDetailModal, #restoreProgressModal, #updateProgressModal, #feedbackOverlay, #osUnsavedPopup, #amtiValidationPopup, #amtiSuccessPopup, .zn-modal-overlay, .amti-modal-backdrop-blur ) :is(.amti-modal-content, .zn-modal-dialog, > div:first-child) { animation: none !important; transition: none !important; } body.amti-reduced-motion, body.amti-reduced-motion * { scroll-behavior: auto !important; } /* Ocultar Métricas Rápidas (utilizado no modo ultra desempenho) */ body.amti-hide-metrics .amti-stat-card, body.amti-hide-metrics .amti-metrics-row, body.amti-hide-metrics .amti-stat-card-row, body.amti-hide-metrics .amti-quick-metrics { display: none !important; } /* ========== Configurações da Empresa - sub-abas internas ========== */ .amti-company-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--border-color); margin-bottom: 18px; } .amti-comp-tab-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .amti-comp-tab-btn:hover { color: var(--text-primary); background: var(--bg-card-soft); } .amti-comp-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: var(--bg-card-soft); } .amti-comp-pane { display: none; } .amti-comp-pane.active { display: block; } /* Save bar - estado salvo / sujo */ .amti-company-savebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .amti-company-savebar-status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 500; color: var(--text-secondary); transition: color 0.2s ease; } .amti-company-savebar-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16); transition: background 0.2s ease, box-shadow 0.2s ease; } .amti-company-savebar-status.dirty { color: #fbbf24; } .amti-company-savebar-status.dirty .amti-company-savebar-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); } .amti-company-savebar .amti-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ===== Aba Empresa: header + sub-abas fixos; somente o conteúdo rola ===== */ /* O card não rola: o conteúdo rola dentro do wrapper .amti-comp-panes */ #tab-company .amti-settings-shell { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } #tab-company #companyForm { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* Header (com save bar) fixo no topo */ #tab-company .amti-settings-page-head { position: static; flex-shrink: 0; margin: 0; padding: 0 0 14px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--border-color); border-radius: 0; } /* Sub-abas fixas logo abaixo do header */ #tab-company .amti-company-tabs { flex-shrink: 0; margin: 14px 0 0; padding: 0; border-bottom: 1px solid var(--border-color); } /* Área rolável: apenas o conteúdo da sub-aba ativa */ #tab-company .amti-comp-panes { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 0 2px; scrollbar-width: thin; } @media (max-width: 768px) { #tab-company .amti-company-tabs { padding: 0; } .amti-company-savebar { width: 100%; } .amti-company-savebar-status { width: 100%; } } /* 🚫 BLOQUEIO DE BOTÕES FLUTUANTES ESPECÍFICOS DURANTE A TELA DE CARREGAMENTO INICIAL (#amti-startup-loader) */ body:has(#amti-startup-loader) #installAppButton, body:has(#amti-startup-loader) #installCertButton, body:has(#amti-startup-loader) #installAppSimpleButton, body:has(#amti-startup-loader) #monitoringFabBtn, body:has(#amti-startup-loader) #feedbackEarTab, body:has(#amti-startup-loader) .back-to-top-fab { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ── PWA Já Instalado ou em Standalone: Ocultar permanentemente botões de instalação ── */ html.amti-pwa-installed #installAppButton, html.amti-pwa-installed #installCertButton, html.amti-pwa-installed #installAppSimpleButton, html.amti-pwa-standalone #installAppButton, html.amti-pwa-standalone #installCertButton, html.amti-pwa-standalone #installAppSimpleButton, body.amti-pwa-installed #installAppButton, body.amti-pwa-installed #installCertButton, body.amti-pwa-installed #installAppSimpleButton, body.amti-pwa-standalone #installAppButton, body.amti-pwa-standalone #installCertButton, body.amti-pwa-standalone #installAppSimpleButton, body[data-pwa-installed="true"] #installAppButton, body[data-pwa-installed="true"] #installCertButton, body[data-pwa-installed="true"] #installAppSimpleButton { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ── Modo com certificado (toggle ativado): os controles guiados prevalecem mesmo com o PWA instalado ou em janela standalone, pois o certificado e as instruções servem aos demais computadores da rede. ── */ body.amti-cert-mode #installAppButton, body.amti-cert-mode #installCertButton { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } body.amti-cert-mode #installAppSimpleButton { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ── Modo simples (toggle desativado): garantia por CSS de que o header mostra SOMENTE o botão padrão de instalação, sem instruções e sem certificado. Não depende de inline styles do JS, prevalecendo mesmo em caches mistos. A regra de MOSTRAR é escopada com :not(...) para NÃO forçar o botão quando o app já está instalado/standalone — nesses casos o JS esconde tudo e o clique não teria efeito (equivalente à ocultação das regras abaixo). ── */ body.amti-simple-mode #installAppButton, body.amti-simple-mode #installCertButton { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } body.amti-simple-mode:not(.amti-pwa-installed):not(.amti-pwa-standalone):not([data-pwa-installed="true"]) #installAppSimpleButton { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* ── PWA já instalado (somente no NAVEGADOR): o botão é MANTIDO com o rótulo "App Instalado" e o clique orienta a abertura do aplicativo instalado. Dentro da janela do app (amti-pwa-standalone) o botão permanece oculto — seria um controle morto. Sobrescreve a ocultação permanente acima SEM afetar o fluxo de instalação (:not(.amti-pwa-standalone) blinda o app aberto). ── */ body.amti-simple-mode.amti-pwa-installed:not(.amti-pwa-standalone) #installAppSimpleButton, body.amti-simple-mode[data-pwa-installed="true"]:not(.amti-pwa-standalone) #installAppSimpleButton { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* ========================================================================== 🤖 AI ACTION CONFIRMATION CARD (DESIGN PREMIUM AMTI) ========================================================================== */ .ai-action-card { margin-top: 12px; background: linear-gradient(135deg, rgba(20, 24, 33, 0.95), rgba(13, 16, 23, 0.98)); border: 1px solid rgba(255, 255, 255, 0.12); border-left: 4px solid #3b82f6; border-radius: 12px; padding: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-family: inherit; } html[data-theme='light'] .ai-action-card { background: linear-gradient(135deg, #ffffff, #f8fafc); border-color: rgba(0, 0, 0, 0.1); border-left-color: #2563eb; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } .ai-action-card.executed { border-left-color: #10b981 !important; background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(13, 16, 23, 0.95)) !important; } .ai-action-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .ai-action-card-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(59, 130, 246, 0.15); color: #60a5fa; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } .ai-action-card.executed .ai-action-card-icon { background: rgba(16, 185, 129, 0.15) !important; color: #34d399 !important; } .ai-action-card-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.25); margin-bottom: 4px; } .ai-action-card.executed .ai-action-card-badge { background: rgba(16, 185, 129, 0.15) !important; color: #34d399 !important; border-color: rgba(16, 185, 129, 0.3) !important; } .ai-action-card-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #f3f4f6; } html[data-theme='light'] .ai-action-card-title { color: #0f172a; } .ai-action-card-summary { margin: 2px 0 0 0; font-size: 0.85rem; color: #9ca3af; } .ai-action-card-body { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 12px; margin-bottom: 12px; } html[data-theme='light'] .ai-action-card-body { background: #f1f5f9; border-color: rgba(0, 0, 0, 0.05); } .ai-action-param-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .ai-action-param-item { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; } .ai-action-param-label { color: #9ca3af; font-weight: 600; display: flex; align-items: center; gap: 6px; } .ai-action-param-value { color: #f9fafb; font-weight: 500; word-break: break-word; } html[data-theme='light'] .ai-action-param-value { color: #1e293b; } .ai-action-card-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; } .ai-action-card-success-banner { display: flex; align-items: center; gap: 8px; color: #34d399; font-weight: 700; font-size: 0.9rem; padding: 6px 12px; border-radius: 6px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); } /* ── Auditoria de Ações IA ─────────────────────────────── */ .ai-audit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); border-radius: 10px; } html[data-theme='light'] .ai-audit-row { background: #f8fafc; border-color: rgba(0, 0, 0, 0.08); } .ai-audit-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ai-audit-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ai-audit-summary { font-weight: 600; font-size: 0.86rem; color: #e5e7eb; } html[data-theme='light'] .ai-audit-summary { color: #1e293b; } .ai-audit-meta { display: flex; gap: 14px; font-size: 0.76rem; color: #9ca3af; } .ai-audit-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .ai-audit-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } .ai-audit-auto { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.25); } .ai-audit-approved { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.25); } .ai-audit-undone { background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.25); } .ai-audit-risk { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 10px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; } .ai-audit-risk-low { background: rgba(59, 130, 246, 0.12); color: #60a5fa; } .ai-audit-risk-medium { background: rgba(245, 158, 11, 0.12); color: #fbbf24; } .ai-audit-risk-high { background: rgba(249, 115, 22, 0.12); color: #fb923c; } .ai-audit-risk-critical { background: rgba(239, 68, 68, 0.14); color: #f87171; } /* ── Proibição Absoluta de Seleção de Texto em TODAS as Tabelas do Dashboard ── */ table, table *, .amti-table, .amti-table *, .os-table, .os-table *, .clients-table, .clients-table *, .equipments-table, .equipments-table *, .comissao-detail-table, .comissao-detail-table *, .view-os-items-table, .view-os-items-table *, .amti-table-container, .amti-table-container *, .os-table-wrap, .os-table-wrap * { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } /* Permitir seleção apenas em campos editáveis caso existam dentro de células */ table input, table textarea, table [contenteditable="true"], .amti-table input, .amti-table textarea, .amti-table [contenteditable="true"] { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; } /* ═══════════════════════════════════════════════════════════════════ BUSCA INTELIGENTE COM IA — DESIGN SYSTEM & ESTILIZAÇÃO MODERNA ═══════════════════════════════════════════════════════════════════ */ .amti-smart-search-card { display: flex; flex-direction: column; justify-content: flex-start !important; align-items: stretch !important; background: var(--bg-card, #111827); border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)); border-radius: var(--radius-lg, 12px); position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .amti-grid-card.amti-smart-search-card > .amti-smart-search-header { align-self: stretch !important; flex: 0 0 auto !important; margin-top: 0 !important; } .amti-grid-card.amti-smart-search-card > .amti-smart-search-body { align-self: stretch !important; display: flex !important; flex: 1 1 auto !important; min-height: 0 !important; margin-top: 0 !important; visibility: visible !important; opacity: 1 !important; } .amti-smart-search-card:hover { border-color: rgba(56, 189, 248, 0.28); } /* ── Header do Card de Busca Inteligente (Alinhamento Unificado à Esquerda) ── */ .amti-smart-search-header { display: flex !important; align-items: center !important; justify-content: space-between !important; text-align: left !important; padding: 0 0 12px 0 !important; background: transparent !important; border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important; margin-bottom: 14px !important; min-height: 44px !important; flex: 0 0 auto !important; position: relative !important; overflow: visible !important; flex-wrap: nowrap !important; gap: 12px !important; } .amti-grid-card.amti-smart-search-card .amti-smart-search-header.has-expanded-filters { flex-wrap: wrap !important; row-gap: 8px !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } .amti-grid-card.amti-smart-search-card .amti-smart-search-header.has-expanded-filters .amti-smart-search-title-wrap { flex: 0 0 100% !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin-right: 0 !important; } .amti-grid-card.amti-smart-search-card .amti-smart-search-header.has-expanded-filters .amti-smart-search-chips-container { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; min-width: 0 !important; overflow: visible !important; justify-content: flex-end !important; } .amti-grid-card.amti-smart-search-card .amti-smart-search-header.has-expanded-filters .amti-smart-search-chips-container.is-expanded .amti-smart-search-drawer { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; justify-content: flex-start !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; touch-action: pan-x pan-y !important; } .amti-smart-search-title-wrap { display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; margin: 0 !important; margin-right: auto !important; align-self: center !important; gap: 12px !important; flex: 1 1 auto !important; min-width: 0 !important; } .amti-smart-search-glow-icon { width: 36px !important; min-width: 36px !important; height: 36px !important; border-radius: 10px !important; background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(129, 140, 248, 0.2)) !important; border: 1px solid rgba(56, 189, 248, 0.35) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #38bdf8 !important; font-size: 1rem !important; box-shadow: 0 0 16px rgba(56, 189, 248, 0.2) !important; flex-shrink: 0 !important; margin: 0 !important; } .amti-smart-search-title-text { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; justify-content: center !important; gap: 2px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .amti-smart-search-title-text strong, .amti-smart-search-title-text .amti-card-header-title { display: block !important; font-size: 0.95rem !important; font-weight: 700 !important; color: var(--text-primary, #f8fafc) !important; letter-spacing: -0.01em !important; line-height: 1.25 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: left !important; margin: 0 !important; } .amti-smart-search-subtitle, .amti-smart-search-title-text .amti-card-header-subtitle { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 0.73rem !important; color: var(--text-secondary, #94a3b8) !important; font-weight: 500 !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: left !important; margin: 0 !important; justify-content: flex-start !important; } .amti-smart-search-subtitle i { color: #818cf8 !important; margin-right: 2px !important; } /* ── Container de Filtros Expansível (Hover com Auto-Retração após 3s) ── */ .amti-smart-search-chips-container { display: flex; align-items: center; justify-content: flex-end; position: relative; z-index: 10; max-width: 100%; } /* A gaveta com os outros filtros que se expandem para a esquerda */ .amti-smart-search-drawer { display: flex; align-items: center; flex-wrap: nowrap !important; gap: 5px; max-width: 0; opacity: 0; pointer-events: none; overflow: hidden; white-space: nowrap !important; transform: translateX(35px); transform-origin: right center; transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), margin-right 0.35s ease; margin-right: 0; position: relative; z-index: 4; } /* Estado Expandido ao Passar o Mouse */ .amti-smart-search-chips-container.is-expanded .amti-smart-search-drawer { max-width: calc(100% - 82px); width: calc(100% - 82px); flex: 1 1 auto; min-width: 0; justify-content: flex-end; opacity: 1; pointer-events: auto; transform: translateX(0); margin-right: 5px; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; touch-action: pan-x pan-y !important; } .amti-smart-search-chips-container:not(.is-expanded) .amti-smart-search-drawer { width: 0; height: 0; max-height: 0; flex: 0 0 0; min-width: 0; min-height: 0; } .amti-smart-search-chips-container.is-expanded .amti-smart-search-drawer { height: auto; max-height: none; } .amti-smart-search-chips-container.is-expanded .amti-smart-search-drawer::-webkit-scrollbar { height: 3px; } .amti-smart-search-chips-container.is-expanded .amti-smart-search-drawer::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.45); border-radius: 999px; } .amti-smart-search-chips-container.is-expanded .amti-smart-search-drawer { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.45) transparent; } /* Chips individuais dentro da gaveta com micro-transição fluida saindo de trás de Todos */ .amti-smart-search-drawer .amti-search-filter-chip { flex-shrink: 0; white-space: nowrap; opacity: 0; transform: translateX(20px); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s, color 0.2s, border-color 0.2s; } .amti-smart-search-chips-container.is-expanded .amti-smart-search-drawer .amti-search-filter-chip { opacity: 1; transform: translateX(0); } /* Transição escalonada suave de saída para a esquerda */ .amti-smart-search-chips-container.is-expanded .amti-smart-search-drawer .amti-search-filter-chip:nth-child(1) { transition-delay: 0.12s; } .amti-smart-search-chips-container.is-expanded .amti-smart-search-drawer .amti-search-filter-chip:nth-child(2) { transition-delay: 0.10s; } .amti-smart-search-chips-container.is-expanded .amti-smart-search-drawer .amti-search-filter-chip:nth-child(3) { transition-delay: 0.08s; } .amti-smart-search-chips-container.is-expanded .amti-smart-search-drawer .amti-search-filter-chip:nth-child(4) { transition-delay: 0.06s; } .amti-smart-search-chips-container.is-expanded .amti-smart-search-drawer .amti-search-filter-chip:nth-child(5) { transition-delay: 0.04s; } .amti-smart-search-chips-container.is-expanded .amti-smart-search-drawer .amti-search-filter-chip:nth-child(6) { transition-delay: 0.02s; } .amti-smart-search-chips-container.is-expanded .amti-smart-search-drawer .amti-search-filter-chip:nth-child(7) { transition-delay: 0.00s; } /* Botão principal "Todos" no canto direito que ancora e oculta os demais */ .amti-search-filter-all-btn { position: relative; z-index: 5; background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.14); color: #f1f5f9; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.25); display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; flex-shrink: 0 !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; padding: 0 8px !important; font-size: 0.72rem !important; line-height: 1 !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .amti-search-filter-all-btn:hover { background: #334155; border-color: rgba(56, 189, 248, 0.45); box-shadow: 0 0 14px rgba(56, 189, 248, 0.25), -3px 0 12px rgba(0, 0, 0, 0.3); } .amti-search-filter-all-btn.active { background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(99, 102, 241, 0.3)); color: #38bdf8; border-color: rgba(56, 189, 248, 0.55); box-shadow: 0 0 14px rgba(56, 189, 248, 0.25), -3px 0 10px rgba(0, 0, 0, 0.3); } .amti-search-filter-all-btn.has-subfilter { border-color: rgba(56, 189, 248, 0.5); background: rgba(30, 41, 59, 0.95); color: #38bdf8; } .amti-filter-arrow { font-size: 0.6rem !important; margin-left: 2px; opacity: 0.7; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; } .amti-smart-search-chips-container.is-expanded .amti-filter-arrow { transform: rotate(180deg); opacity: 1; } .amti-subfilter-dot { width: 5px; height: 5px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 6px #38bdf8; display: inline-block; margin-left: -2px; } /* Estilo base dos chips de filtro — Ultra compacto verticalmente */ .amti-search-filter-chip { height: 24px !important; min-height: 24px !important; max-height: 24px !important; padding: 0 8px !important; font-size: 0.72rem !important; line-height: 1 !important; font-weight: 600; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); color: var(--text-secondary, #94a3b8); cursor: pointer; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; transition: all 0.2s ease; user-select: none; box-sizing: border-box !important; } .amti-search-filter-chip i { font-size: 0.68rem !important; line-height: 1 !important; } .amti-search-filter-chip:hover { background: rgba(255, 255, 255, 0.09); color: #f8fafc; border-color: rgba(255, 255, 255, 0.16); } .amti-search-filter-chip.active { background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(99, 102, 241, 0.25)); color: #38bdf8; border-color: rgba(56, 189, 248, 0.45); box-shadow: 0 0 12px rgba(56, 189, 248, 0.2); } /* ── Corpo do Card ── */ .amti-smart-search-body { display: flex; flex-direction: column; padding: 0 !important; gap: 14px; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* ── Barra de Busca Estilosa com Brilho Suave ao Digitar ── */ .amti-smart-search-bar-wrap { width: 100%; flex: 0 0 auto; } .amti-smart-search-input-shell { position: relative; display: flex; align-items: center; width: 100%; border-radius: 14px !important; background: linear-gradient(135deg, rgba(30, 41, 59, 0.65) 0%, rgba(15, 23, 42, 0.8) 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1.5px solid rgba(56, 189, 248, 0.3) !important; padding: 6px 8px 6px 12px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 0 15px rgba(56, 189, 248, 0.08) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .amti-smart-search-input-shell:hover { border-color: rgba(56, 189, 248, 0.45) !important; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 0 20px rgba(56, 189, 248, 0.14) !important; } .amti-smart-search-sparkle-icon { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, rgba(56, 189, 248, 0.22) 0%, rgba(129, 140, 248, 0.18) 100%) !important; border: 1px solid rgba(56, 189, 248, 0.35) !important; display: flex; align-items: center; justify-content: center; color: #38bdf8 !important; font-size: 1.05rem; margin-right: 12px; flex-shrink: 0; box-shadow: 0 0 14px rgba(56, 189, 248, 0.25); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .amti-smart-search-input { flex: 1 1 auto; min-width: 0; background: transparent !important; border: none !important; outline: none !important; color: #ffffff !important; font-size: 1.02rem !important; font-weight: 500 !important; padding: 8px 6px !important; box-shadow: none !important; letter-spacing: -0.01em; } .amti-smart-search-input::placeholder { color: rgba(148, 163, 184, 0.75) !important; font-weight: 400 !important; font-size: 0.94rem !important; letter-spacing: normal; } /* ── ✨ Efeito de Brilho Suave e Vivo ao Digitar (Ambient AI Glow) ── */ @keyframes amtiAiGlowPulse { 0% { border-color: rgba(56, 189, 248, 0.6) !important; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25), 0 0 25px rgba(56, 189, 248, 0.3), 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important; background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%) !important; } 50% { border-color: rgba(129, 140, 248, 0.85) !important; box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.35), 0 0 35px rgba(129, 140, 248, 0.4), 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.25) !important; background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 1) 100%) !important; } 100% { border-color: rgba(56, 189, 248, 0.6) !important; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25), 0 0 25px rgba(56, 189, 248, 0.3), 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important; background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%) !important; } } .amti-smart-search-input-shell.amti-ai-glow-focus { border-color: rgba(56, 189, 248, 0.75) !important; background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%) !important; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25), 0 0 25px rgba(56, 189, 248, 0.25), 0 8px 28px rgba(0, 0, 0, 0.45) !important; } .amti-smart-search-input-shell.is-typing, .amti-smart-search-input-shell.amti-ai-glow-active { animation: amtiAiGlowPulse 2.2s infinite ease-in-out !important; } .amti-smart-search-input-shell.is-typing .amti-smart-search-sparkle-icon, .amti-smart-search-input-shell.amti-ai-glow-active .amti-smart-search-sparkle-icon { color: #38bdf8 !important; background: linear-gradient(135deg, rgba(56, 189, 248, 0.35) 0%, rgba(129, 140, 248, 0.3) 100%) !important; border-color: rgba(56, 189, 248, 0.6) !important; transform: scale(1.08) rotate(8deg); box-shadow: 0 0 18px rgba(56, 189, 248, 0.5) !important; } /* ── Card Expandido Dinamicamente na Busca ── */ .amti-grid-card.amti-smart-search-card { scroll-margin-top: 14px; transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1), min-height 0.35s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.3s ease !important; } @media (max-width: 1023px) { .amti-grid-card.amti-smart-search-card { scroll-margin-top: 76px; } } .amti-grid-card.amti-smart-search-card.amti-smart-search-expanded { grid-row-end: span 4 !important; min-height: 528px !important; max-height: 528px !important; height: 528px !important; overflow: visible !important; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), 0 0 25px rgba(56, 189, 248, 0.15) !important; } .amti-grid-card.amti-smart-search-card.height-xlarge.amti-smart-search-expanded { grid-row-end: span 5 !important; min-height: 664px !important; max-height: 664px !important; height: 664px !important; } .amti-grid-card.amti-smart-search-card.amti-smart-search-expanded .amti-smart-search-body { overflow: hidden !important; max-height: none !important; } .amti-grid-card.amti-smart-search-card.amti-smart-search-expanded .amti-smart-search-content-area { flex: 1 1 0; min-height: 0 !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; } /* ── Botões na Barra de Busca (Alturas Idênticas e Harmoniosas) ── */ .amti-smart-search-clear-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; height: 40px; min-height: 40px; box-sizing: border-box; border-radius: 10px; border: 1px solid rgba(239, 68, 68, 0.38); background: linear-gradient(135deg, rgba(239, 68, 68, 0.16) 0%, rgba(185, 28, 28, 0.16) 100%); color: #fca5a5; font-size: 0.92rem; font-weight: 600; cursor: pointer; margin-right: 8px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; user-select: none; } .amti-smart-search-clear-btn:hover { background: linear-gradient(135deg, rgba(239, 68, 68, 0.32) 0%, rgba(185, 28, 28, 0.32) 100%); border-color: rgba(239, 68, 68, 0.65); color: #ffffff; box-shadow: 0 0 16px rgba(239, 68, 68, 0.4); transform: translateY(-1px) scale(1.02); } .amti-smart-search-spinner { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #38bdf8; font-size: 1rem; margin-right: 8px; } .amti-smart-search-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 20px; height: 40px; min-height: 40px; box-sizing: border-box; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: linear-gradient(135deg, #0284c7 0%, #6366f1 100%); color: #ffffff; font-size: 0.92rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(2, 132, 199, 0.4), 0 0 12px rgba(99, 102, 241, 0.25); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; user-select: none; } .amti-smart-search-submit-btn:hover { background: linear-gradient(135deg, #0369a1 0%, #4f46e5 100%); box-shadow: 0 6px 22px rgba(2, 132, 199, 0.6), 0 0 16px rgba(99, 102, 241, 0.4); transform: translateY(-1px) scale(1.02); } /* ── Barra de Status e Feedback ── */ .amti-smart-search-status-bar { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--text-secondary, #94a3b8); padding: 0 4px; } .amti-smart-status-content { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .amti-status-dot { width: 9px !important; height: 9px !important; border-radius: 2px !important; display: inline-block !important; flex-shrink: 0 !important; transition: all 0.3s ease !important; } /* Quadrado brilhante Verde (IA Online / Disponível) */ .amti-status-dot.is-online, .amti-status-dot:not(.is-offline) { background: #10b981 !important; box-shadow: 0 0 8px rgba(16, 185, 129, 0.7) !important; animation: amtiStatusSquarePulseGreen 1.6s infinite ease-in-out !important; } @keyframes amtiStatusSquarePulseGreen { 0% { transform: scale(0.95); opacity: 0.7; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); } 50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 10px 2px rgba(16, 185, 129, 0.85); } 100% { transform: scale(0.95); opacity: 0.7; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); } } /* Quadrado brilhante Vermelho (IA Offline / Indisponível / Desconfigurada) */ .amti-status-dot.is-offline { background: #ef4444 !important; box-shadow: 0 0 8px rgba(239, 68, 68, 0.7) !important; animation: amtiStatusSquarePulseRed 1.4s infinite ease-in-out !important; } @keyframes amtiStatusSquarePulseRed { 0% { transform: scale(0.95); opacity: 0.7; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); } 50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 12px 3px rgba(239, 68, 68, 0.9); } 100% { transform: scale(0.95); opacity: 0.7; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); } } .amti-smart-search-ai-config-btn { margin-left: 6px !important; vertical-align: middle !important; } .amti-smart-search-stats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .amti-stat-pill { font-size: 0.72rem; padding: 2px 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: #94a3b8; display: inline-flex; align-items: center; gap: 4px; } .amti-stat-pill strong { color: #f8fafc; } /* ── Área de Conteúdo / Resultados ── */ .amti-smart-search-content-area { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; } /* ── ⭐ DESTAQUE IA (TOP MATCH SPOTLIGHT) ── */ .amti-smart-search-top-match { margin-bottom: 4px; } .amti-spotlight-card { border-radius: 12px; background: linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%); border: 1.5px solid rgba(56, 189, 248, 0.45); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(56, 189, 248, 0.15); padding: 14px 16px; position: relative; overflow: hidden; animation: amtiFadeInSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .amti-spotlight-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #38bdf8, #818cf8, #38bdf8); background-size: 200% 100%; animation: amtiSpotlightShimmer 3s infinite linear; } @keyframes amtiSpotlightShimmer { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } @keyframes amtiFadeInSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .amti-spotlight-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; } .amti-spotlight-badge { font-size: 0.74rem; font-weight: 800; color: #38bdf8; letter-spacing: 0.05em; display: flex; align-items: center; gap: 6px; } .amti-confidence-tag { background: rgba(56, 189, 248, 0.2); color: #7dd3fc; padding: 2px 7px; border-radius: 12px; font-size: 0.68rem; font-weight: 700; } .amti-spotlight-main { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; } .amti-spotlight-icon-box { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(99, 102, 241, 0.25)); border: 1px solid rgba(56, 189, 248, 0.4); display: flex; align-items: center; justify-content: center; color: #38bdf8; font-size: 1.2rem; flex-shrink: 0; } .amti-spotlight-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #f8fafc; line-height: 1.3; } .amti-spotlight-sub { font-size: 0.84rem; color: #cbd5e1; margin-top: 3px; } .amti-spotlight-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; } .amti-top-match-detail-item { display: flex; flex-direction: column; } .amti-top-match-detail-label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.03em; } .amti-top-match-detail-val { font-size: 0.86rem; font-weight: 600; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .amti-spotlight-ai-reason { font-size: 0.78rem; color: #93c5fd; background: rgba(30, 58, 138, 0.3); border-left: 3px solid #38bdf8; padding: 6px 10px; border-radius: 0 6px 6px 0; margin-bottom: 12px; line-height: 1.4; } .amti-spotlight-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .amti-spotlight-action-btn { font-size: 0.85rem; padding: 7px 16px; border-radius: 7px; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35); } .amti-spotlight-copy-btn { font-size: 0.85rem; padding: 7px 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #cbd5e1; display: inline-flex; align-items: center; gap: 6px; } .amti-spotlight-copy-btn:hover { background: rgba(255, 255, 255, 0.15); color: #ffffff; } /* ── Lista de Registros ── */ .amti-results-section-divider { font-size: 0.76rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 2px; display: flex; align-items: center; gap: 6px; } .amti-search-results-wrapper { display: flex; flex-direction: column; gap: 8px; } .amti-search-result-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .amti-search-result-row:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(56, 189, 248, 0.35); transform: translateX(3px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } .amti-result-icon-badge { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .amti-result-icon-badge.os { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); } .amti-result-icon-badge.cliente { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); } .amti-result-icon-badge.equipamento { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); } .amti-result-icon-badge.conta { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); } .amti-result-icon-badge.produto { background: rgba(236, 72, 153, 0.15); color: #f472b6; border: 1px solid rgba(236, 72, 153, 0.3); } .amti-result-icon-badge.servico { background: rgba(14, 165, 233, 0.15); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.3); } .amti-result-icon-badge.agenda { background: rgba(99, 102, 241, 0.15); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.3); } .amti-badge.badge-info-os { background: rgba(6, 182, 212, 0.18); color: #22d3ee; border: 1px solid rgba(6, 182, 212, 0.4); font-size: 0.68rem; padding: 2px 7px; border-radius: 4px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .amti-result-info-col { flex: 1 1 auto; min-width: 0; } .amti-result-row-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .amti-result-title { font-size: 0.92rem; font-weight: 600; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .amti-result-subtitle { font-size: 0.78rem; color: #94a3b8; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .amti-result-badges-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; } .amti-item-detail-badge { font-size: 0.7rem; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); color: #cbd5e1; } .amti-item-detail-badge .label { color: #94a3b8; } .amti-result-match-reason { font-size: 0.72rem; color: #38bdf8; margin-top: 3px; display: flex; align-items: center; gap: 4px; } .amti-result-action-col { flex-shrink: 0; } .amti-result-go-btn { width: 28px; height: 28px; border-radius: 6px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #94a3b8; transition: all 0.2s ease; } .amti-search-result-row:hover .amti-result-go-btn { background: #0284c7; color: #ffffff; border-color: #0284c7; } /* ── Destaque de Correspondência Inteligente (Busca com IA) ── */ .amti-highlight-match { background: rgba(245, 158, 11, 0.22); color: #fde047; font-weight: 700; padding: 1px 4px; border-radius: 4px; border: 1px solid rgba(245, 158, 11, 0.45); box-shadow: 0 0 8px rgba(245, 158, 11, 0.18); display: inline-block; line-height: 1.2; } .amti-spotlight-card .amti-highlight-match { background: rgba(56, 189, 248, 0.25); color: #7dd3fc; border-color: rgba(56, 189, 248, 0.5); box-shadow: 0 0 10px rgba(56, 189, 248, 0.28); } /* ── Badges Personalizados de Entidades ── */ .amti-entity-type-badge { font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; } .badge-client { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.4); } .badge-equipment { background: rgba(245, 158, 11, 0.2); color: #fde047; border: 1px solid rgba(245, 158, 11, 0.4); } .badge-income { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.4); } .badge-expense { background: rgba(244, 63, 94, 0.2); color: #fda4af; border: 1px solid rgba(244, 63, 94, 0.4); } .badge-stock-ok { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; } .badge-stock-low { background: rgba(239, 68, 68, 0.2); color: #fca5a5; } .badge-service { background: rgba(14, 165, 233, 0.2); color: #7dd3fc; border: 1px solid rgba(14, 165, 233, 0.4); } .badge-agenda { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.4); } .badge-status-completed { background: rgba(16, 185, 129, 0.2); color: #34d399; } .badge-status-progress { background: rgba(56, 189, 248, 0.2); color: #38bdf8; } .badge-status-pending { background: rgba(245, 158, 11, 0.2); color: #fbbf24; } .badge-status-canceled { background: rgba(239, 68, 68, 0.2); color: #f87171; } /* ── Estado Inicial / Sugestões (Empty State) ── */ .amti-smart-search-empty-state { text-align: center; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .amti-smart-search-empty-state .amti-empty-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(56, 189, 248, 0.12); color: #38bdf8; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 12px; box-shadow: 0 0 20px rgba(56, 189, 248, 0.15); } .amti-smart-search-empty-state h4 { margin: 0 0 6px; font-size: 0.98rem; font-weight: 700; color: #f1f5f9; } .amti-smart-search-empty-state p { margin: 0 0 16px; font-size: 0.82rem; color: #94a3b8; max-width: 480px; line-height: 1.4; } .amti-smart-search-prompts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 580px; } .amti-prompt-chip { padding: 6px 12px; font-size: 0.78rem; font-weight: 500; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); color: #cbd5e1; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s ease; } .amti-prompt-chip:hover { background: rgba(56, 189, 248, 0.15); border-color: rgba(56, 189, 248, 0.35); color: #38bdf8; transform: translateY(-1px); } /* ── Sem Resultados ── */ .amti-smart-search-no-results { text-align: center; padding: 32px 16px; } .amti-no-results-icon { font-size: 2rem; color: #64748b; margin-bottom: 10px; } .amti-smart-search-no-results h4 { margin: 0 0 6px; font-size: 0.98rem; font-weight: 600; color: #f8fafc; } .amti-smart-search-no-results p { margin: 0; font-size: 0.82rem; color: #94a3b8; } /* ── Responsividade ── */ @media (max-width: 768px) { .amti-smart-search-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; text-align: left !important; } .amti-smart-search-title-wrap { align-items: center !important; justify-content: flex-start !important; text-align: left !important; margin: 0 !important; margin-right: auto !important; align-self: center !important; } .amti-smart-search-chips-container { align-self: center !important; margin-left: auto !important; } .amti-smart-search-chips { width: 100%; overflow-x: auto; padding-bottom: 4px; } .amti-spotlight-main { flex-direction: column; } .amti-spotlight-details-grid { grid-template-columns: 1fr; } } /* ── Campo de Busca de Configurações ── */ .amti-settings-search-box { position: relative; display: flex; align-items: center; width: 100%; } .amti-settings-search-icon { position: absolute; left: 14px; color: #ffffff !important; font-size: 14px; pointer-events: none; z-index: 2; opacity: 0.95; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease; } .amti-settings-search-input { padding-left: 42px !important; padding-right: 38px !important; } .amti-settings-search-input:focus ~ .amti-settings-search-icon, .amti-settings-search-box:focus-within .amti-settings-search-icon { color: #ffffff !important; opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)); } /* 🌟 Animação Suave e Elegante nos links 'Obter chave' quando não há chaves configuradas */ @keyframes amtiGetKeyGlowPulse { 0%, 100% { color: var(--indigo-400, #818cf8); opacity: 0.9; border-color: rgba(129, 140, 248, 0.45); background-color: rgba(99, 102, 241, 0.12); box-shadow: inset 0 0 6px rgba(129, 140, 248, 0.3); } 50% { color: #ffffff; opacity: 1; border-color: rgba(168, 85, 247, 0.85); background-color: rgba(99, 102, 241, 0.28); box-shadow: inset 0 0 12px rgba(129, 140, 248, 0.7), inset 0 0 20px rgba(168, 85, 247, 0.4); } } .amti-ai-get-key-pulse { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 3px 10px !important; border-radius: 5px !important; border: 1px solid rgba(129, 140, 248, 0.45) !important; background: rgba(99, 102, 241, 0.12) !important; color: var(--indigo-400, #818cf8) !important; font-size: 0.75rem !important; font-weight: 600 !important; text-decoration: none !important; box-shadow: inset 0 0 6px rgba(129, 140, 248, 0.3) !important; animation: amtiGetKeyGlowPulse 2s infinite ease-in-out !important; transition: all 0.2s ease !important; } .amti-ai-get-key-pulse:hover { background: rgba(99, 102, 241, 0.38) !important; border-color: rgba(168, 85, 247, 1) !important; color: #ffffff !important; box-shadow: inset 0 0 16px rgba(129, 140, 248, 0.85) !important; text-decoration: none !important; } .amti-ai-provider-actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; } .amti-ai-square-button, .amti-ai-provider-status { width: 36px; height: 36px; min-width: 36px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; border: 1px solid var(--border, rgba(148, 163, 184, 0.28)); border-radius: 8px; line-height: 1; } .amti-ai-square-button { padding: 0; cursor: pointer; text-decoration: none; color: var(--indigo-300, #a5b4fc); background: rgba(99, 102, 241, 0.12); transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .amti-ai-square-button:hover, .amti-ai-square-button:focus-visible { color: #fff; border-color: var(--indigo-400, #818cf8); background: rgba(99, 102, 241, 0.28); } .amti-ai-square-button:focus-visible { outline: 2px solid var(--indigo-300, #a5b4fc); outline-offset: 2px; } .amti-ai-provider-status { font-size: 0.85rem; } .amti-ai-provider-status.is-online { color: #4ade80; border-color: rgba(74, 222, 128, 0.5); background: rgba(34, 197, 94, 0.14); } .amti-ai-provider-status.is-offline { color: #f87171; border-color: rgba(248, 113, 113, 0.5); background: rgba(239, 68, 68, 0.14); } .amti-ai-validate-key { font-size: 0.8rem; } .amti-ai-validate-key, .amti-ai-delete-key-button { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; flex: 0 0 36px !important; aspect-ratio: 1 / 1 !important; padding: 0 !important; box-sizing: border-box !important; } .amti-ai-primary-key-row { display: flex; align-items: center; gap: 0.5rem; } .amti-ai-primary-key-row input { flex: 1 1 auto; width: 100%; min-width: 0; height: 38px; box-sizing: border-box; } .amti-ai-primary-key-link { flex: 0 0 36px; } .amti-ai-delete-key-button { width: 36px; height: 36px; min-width: 36px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--danger-400); font-size: 1rem; line-height: 1; cursor: pointer; } .amti-ai-delete-key-button:hover, .amti-ai-delete-key-button:focus-visible { border-color: rgba(248, 113, 113, 0.5); background: rgba(239, 68, 68, 0.14); } .amti-ai-delete-key-button:focus-visible { outline: 2px solid var(--danger-400); outline-offset: 2px; } .amti-ai-recommended-model-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; height: 38px; min-height: 38px; box-sizing: border-box; padding: 0 0.65rem; margin-bottom: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; background: rgba(0, 0, 0, 0.3); } .amti-ai-recommended-model-text { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #38bdf8; font-family: monospace; font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; user-select: all; } .amti-ai-recommended-model-actions { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; } .amti-ai-recommended-model-button { display: inline-flex !important; align-items: center; justify-content: center; gap: 4px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; padding: 0 8px !important; box-sizing: border-box !important; font-size: 0.72rem !important; line-height: 1 !important; white-space: nowrap; cursor: pointer; } /* 🛡️ Proteção Universal contra overflow em Modais e Popups */ .zn-modal-dialog, .zn-modal-dialog *, .amti-modal, .amti-modal-content, .amti-modal-content *, .modal-dialog, .modal-content, .swal2-popup, .swal2-html-container { box-sizing: border-box !important; overflow-wrap: anywhere !important; word-break: break-word !important; } /* Contraste das mensagens permanece consistente também no tema dark-block. */ html[data-theme='dark-block'] .ai-msg.user { background: rgba(71, 85, 105, 0.42) !important; border-color: rgba(148, 163, 184, 0.34) !important; } html[data-theme='dark-block'] .ai-msg.bot { background: rgba(14, 74, 89, 0.38) !important; border-color: rgba(56, 189, 210, 0.24) !important; } /* Tipografia e espaçamento únicos para títulos de cards em todo o Dashboard. */ .amti-card-title, .os-card-title, .ai-chat-title, .ai-sugg-title, .amti-smart-search-title-text > strong, .amti-dashboard-grid .amti-grid-card .amti-card-header > strong, .amti-dashboard-grid .amti-grid-card .os-card-title > strong { font-family: var(--font-family) !important; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: 0 !important; color: var(--text-primary) !important; margin: 0 !important; padding: 0 !important; } .ai-advisor-chat-header { padding: 0 !important; margin: 0 0 12px !important; } .ai-sugg-title { margin-bottom: 12px !important; } /* O campo cresce até três linhas e pode ser ampliado manualmente depois disso. */ .ai-chat-input, textarea.ai-chat-input, #aiChatInput { min-height: 38px !important; height: auto; max-height: none; box-sizing: border-box !important; overflow-y: auto; resize: vertical !important; } .ai-advisor-input-area .amti-btn, .ai-advisor-input-area button { min-height: 38px !important; height: 38px !important; max-height: 38px !important; box-sizing: border-box !important; } /* Indicador clicavel para numero da OS nas tabelas */ .amti-table.os-table td.os-number-cell, .amti-table td.os-number-cell, .amti-table td.col-code { cursor: pointer !important; user-select: none; } .amti-table.os-table td.os-number-cell:hover strong, .amti-table td.os-number-cell:hover strong, .amti-table td.col-code:hover strong { color: var(--primary, #38bdf8) !important; text-decoration: underline; } /* Tokens e Termos da Empresa */ .amti-company-term-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; } .amti-badge-token { display: inline-flex; align-items: center; font-family: monospace; font-size: 0.78rem; padding: 2px 7px; border-radius: 4px; background: var(--bg-card-soft, rgba(255,255,255,0.06)); color: var(--primary, #38bdf8); border: 1px solid var(--border-color, rgba(255,255,255,0.12)); cursor: pointer; transition: all 0.15s ease; } .amti-badge-token:hover { background: var(--primary, #38bdf8); color: #fff; transform: translateY(-1px); } .amti-btn-xs { padding: 2px 8px !important; font-size: 0.78rem !important; height: auto !important; min-height: 24px !important; } /* Modal de Pré-visualização de Documentos da Empresa */ .amti-doc-preview-modal-body { display: flex; flex-direction: column; height: 75vh; gap: 12px; } .amti-doc-preview-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); } .amti-doc-preview-tabs { display: flex; gap: 4px; } .amti-doc-preview-iframe { width: 100%; flex: 1; border: 1px solid var(--border-color); border-radius: 6px; background: #fff; } /* ======================================================== OPENROUTER MODEL COMBOBOX DROPDOWN — SEM CORTE POR OVERFLOW ======================================================== */ .zn-card:has(#openrouterModelWrapper), .zn-card-openrouter-config, .zn-accordion:has(#openrouterModelWrapper), .zn-accordion.openrouter-expanded { overflow: visible !important; } #openrouterModelDropdown { z-index: 999999 !important; } #openrouterModelDropdown.amti-combobox-dropdown--fixed { box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(148, 163, 184, 0.25) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ============================================================ AI KEY POOL FORMS (PADRONIZAÇÃO DE LARGURA, ALTURA E ALINHAMENTO) - Campo "Chave API" aumentado (2fr / ~57% do grid) - Botão "Cadastrar Chave" reduzido pela metade (0.5fr / ~14% do grid) - Altura do botão perfeitamente alinhada à mesma altura dos inputs (40px) ============================================================ */ .amti-ai-pool-form { display: grid !important; grid-template-columns: minmax(260px, 2fr) minmax(140px, 1fr) minmax(145px, 0.5fr) !important; gap: 1rem !important; align-items: flex-end !important; } @media (max-width: 768px) { .amti-ai-pool-form { grid-template-columns: 1fr !important; } } .amti-ai-pool-form input.zn-input-modern { height: 40px !important; min-height: 40px !important; box-sizing: border-box !important; padding: 0.55rem 0.875rem !important; font-size: 0.875rem !important; } .amti-ai-pool-form .amti-pool-btn-wrapper { display: flex !important; height: 40px !important; min-height: 40px !important; align-items: flex-end !important; margin: 0 !important; padding: 0 !important; } .amti-ai-pool-form .amti-pool-btn-submit { width: 100% !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 0 1rem !important; font-size: 0.85rem !important; font-weight: 600 !important; white-space: nowrap !important; margin: 0 !important; } /* ========================================================================== AMTI DASHBOARD GLOBAL ENGINE: EFEITOS VISUAIS, TEMAS & PERFORMANCE Garante funcionamento universal e estrito em 100% do Dashboard ========================================================================== */ /* ── 1. EFEITOS DE ELEVAÇÃO DESATIVADOS ── Mantém cards e painéis estáveis em qualquer aba e tema. */ :is(html, body).amti-no-card-hover :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .pdv-widget-card, .os-card, .amti-card-library-item, .shortcut-card, .ai-tips-live-card, .clock-widget-card, .calendar-widget-card, .agenda-card, .amti-settings-hero-card, .amti-theme-preview-card, .comissao-stat-card, .comissao-rank-card, .zn-card, .zn-card-provider, .zn-card-stat, .greeting-type-card, .confidence-mode-card, .hardware-card-modern, .storage-card, .card, .status-card, .config-section, .settings-section, .integration-card, .stat-box, .analytics-quick-stats .stat-card, .pending-faq-item, .disabled-faq-item, .ai-welcome-feature-item, .ai-sugg-item, .amti-prompt-chip, .amti-badge-token, .amti-card-btn, .amti-home-action-btn, .amti-monitor-fab, .agenda-item, .amti-search-result-row, .amti-grid-container > *, .amti-tab-pane > *, .amti-tab-pane .amti-card, .amti-tab-pane .amti-grid-card, .btn-card-edit, .btn-optimize, .btn-control, .amti-back-btn, .back-to-top-fab, [class*="card"] ):hover, html[data-theme].amti-no-card-hover :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .pdv-widget-card, .os-card, .amti-card-library-item, .shortcut-card, .ai-tips-live-card, .clock-widget-card, .calendar-widget-card, .agenda-card, .amti-settings-hero-card, .amti-theme-preview-card, .comissao-stat-card, .comissao-rank-card, .zn-card, .zn-card-provider, .zn-card-stat, .greeting-type-card, .confidence-mode-card, .hardware-card-modern, .storage-card, .card, .status-card, .config-section, .settings-section, .integration-card, .stat-box, .analytics-quick-stats .stat-card, .pending-faq-item, .disabled-faq-item, .ai-welcome-feature-item, .ai-sugg-item, .amti-prompt-chip, .amti-badge-token, .amti-card-btn, .amti-home-action-btn, .amti-monitor-fab, .agenda-item, .amti-search-result-row, .amti-grid-container > *, .amti-tab-pane > *, .amti-tab-pane .amti-card, .amti-tab-pane .amti-grid-card, .btn-card-edit, .btn-optimize, .btn-control, .amti-back-btn, .back-to-top-fab, [class*="card"] ):hover, html[data-theme] :is(body, html).amti-no-card-hover :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .pdv-widget-card, .os-card, .amti-card-library-item, .shortcut-card, .ai-tips-live-card, .clock-widget-card, .calendar-widget-card, .agenda-card, .amti-settings-hero-card, .amti-theme-preview-card, .comissao-stat-card, .comissao-rank-card, .zn-card, .zn-card-provider, .zn-card-stat, .greeting-type-card, .confidence-mode-card, .hardware-card-modern, .storage-card, .card, .status-card, .config-section, .settings-section, .integration-card, .stat-box, .analytics-quick-stats .stat-card, .pending-faq-item, .disabled-faq-item, .ai-welcome-feature-item, .ai-sugg-item, .amti-prompt-chip, .amti-badge-token, .amti-card-btn, .amti-home-action-btn, .amti-monitor-fab, .agenda-item, .amti-search-result-row, .amti-grid-container > *, .amti-tab-pane > *, .amti-tab-pane .amti-card, .amti-tab-pane .amti-grid-card, .btn-card-edit, .btn-optimize, .btn-control, .amti-back-btn, .back-to-top-fab, [class*="card"] ):hover, :is(html, body):is(.amti-performance-mode, .amti-ultra-performance-mode) :is( .amti-card, .amti-grid-card, .amti-stat-card, .amti-archive-card, .pdv-product-card, .pdv-widget-card, .os-card, .amti-card-library-item, .shortcut-card, .ai-tips-live-card, .clock-widget-card, .calendar-widget-card, .agenda-card, .amti-settings-hero-card, .amti-theme-preview-card, .comissao-stat-card, .comissao-rank-card, .zn-card, .zn-card-provider, .zn-card-stat, .greeting-type-card, .confidence-mode-card, .hardware-card-modern, .storage-card, .card, .status-card, .config-section, .settings-section, .integration-card, .stat-box, .analytics-quick-stats .stat-card, .pending-faq-item, .disabled-faq-item, .ai-welcome-feature-item, .ai-sugg-item, .amti-prompt-chip, .amti-badge-token, .amti-card-btn, .amti-home-action-btn, .amti-monitor-fab, .agenda-item, .amti-search-result-row, .amti-grid-container > *, .amti-tab-pane > *, .amti-tab-pane .amti-card, .amti-tab-pane .amti-grid-card, .btn-card-edit, .btn-optimize, .btn-control, .amti-back-btn, .back-to-top-fab, [class*="card"] ):hover { transform: none !important; will-change: auto !important; } /* Desativa o reflexo/sheen nos cards quando suspensão estiver desligada */ :is(html, body).amti-no-card-hover :is(.amti-grid-card, .amti-card, .zn-card)::after, html[data-theme].amti-no-card-hover :is(.amti-grid-card, .amti-card, .zn-card)::after, :is(html, body):is(.amti-performance-mode, .amti-ultra-performance-mode) :is(.amti-grid-card, .amti-card, .zn-card)::after { display: none !important; opacity: 0 !important; transform: none !important; } /* ── 2. FUNDOS SEM FILTRO ── Evita filtros decorativos em modais, popups, headers, painéis e overlays. */ :is(html, body).amti-hide-blur *, :is(html, body).amti-hide-blur *::before, :is(html, body).amti-hide-blur *::after, :is(html, body):is(.amti-performance-mode, .amti-ultra-performance-mode) :is( .amti-modal-overlay, .zn-modal-overlay, .amti-modal-backdrop-blur, .amti-modal-content, .zn-modal-dialog, .amti-sidebar, .dashboard-header, .amti-topbar, .amti-grid-card, .amti-card, .zn-card, .amti-context-menu ), :is(html, body):is(.amti-performance-mode, .amti-ultra-performance-mode).amti-has-open-modal::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── 3. GLOW E ILUMINAÇÃO (glow: false ou modo ultra desempenho) ── Remove halos, neons e sombras excessivas de cards e botões ativos */ :is(html, body).amti-hide-glow :is( .amti-card, .amti-grid-card, .amti-stat-card, .zn-card, .zn-card-provider, .zn-card-stat, .amti-btn, .btn, .amti-badge, .zn-badge, .nav-tab.active, .amti-nav-item.active ) { box-shadow: none !important; text-shadow: none !important; } /* ── 4. ANIMAÇÕES DO SISTEMA (animations: false ou modo ultra desempenho) ── Pausa e zera durações de animações/transições para máxima fluidez e responsividade */ :is(html, body).amti-hide-animations :not(.fa-spin):not(.fa-spinner):not(.fa-circle-notch):not([class*="spinner"]), :is(html, body).amti-hide-animations :not(.fa-spin):not(.fa-spinner):not(.fa-circle-notch):not([class*="spinner"])::before, :is(html, body).amti-hide-animations :not(.fa-spin):not(.fa-spinner):not(.fa-circle-notch):not([class*="spinner"])::after, :is(html, body).amti-ultra-performance-mode :not(.fa-spin):not(.fa-spinner):not(.fa-circle-notch):not([class*="spinner"]), :is(html, body).amti-ultra-performance-mode :not(.fa-spin):not(.fa-spinner):not(.fa-circle-notch):not([class*="spinner"])::before, :is(html, body).amti-ultra-performance-mode :not(.fa-spin):not(.fa-spinner):not(.fa-circle-notch):not([class*="spinner"])::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: no-preference) { html.amti-ultra-performance-mode:not(.amti-hide-animations) #osBtnSave.amti-btn-primary--dirty, body.amti-ultra-performance-mode:not(.amti-hide-animations) #osBtnSave.amti-btn-primary--dirty { animation: amtiOsSaveLightPulse 2.4s ease-in-out infinite alternate !important; transition: box-shadow 0.2s ease !important; } html.amti-ultra-performance-mode:not(.amti-hide-animations) #osBtnSave.amti-btn-primary--dirty::before, body.amti-ultra-performance-mode:not(.amti-hide-animations) #osBtnSave.amti-btn-primary--dirty::before { background-size: 260% 260% !important; animation: amtiOsSaveColorFlow 3.5s ease infinite alternate !important; } html.amti-ultra-performance-mode:not(.amti-hide-animations) #osBtnSave.amti-btn-primary--dirty::after, body.amti-ultra-performance-mode:not(.amti-hide-animations) #osBtnSave.amti-btn-primary--dirty::after { display: block !important; animation: amtiOsSaveInnerShimmer 3s ease-in-out infinite !important; } html.amti-ultra-performance-mode:not(.amti-hide-animations) #flowEquipLabelScanButton.is-reading::before, body.amti-ultra-performance-mode:not(.amti-hide-animations) #flowEquipLabelScanButton.is-reading::before { animation: amtiAiLabelColorFlow 3.2s ease-in-out infinite alternate !important; } html.amti-ultra-performance-mode:not(.amti-hide-animations) #flowEquipLabelScanButton.is-reading::after, body.amti-ultra-performance-mode:not(.amti-hide-animations) #flowEquipLabelScanButton.is-reading::after { animation: amtiAiLabelLightSweep 2.8s ease-in-out infinite !important; } } /* ─── ÚLTIMO OVERRIDE MOBILE DOS POPUPS ─── */ @media (max-width: 600px) and (orientation: portrait) { :is(.amti-modal, .zn-modal-overlay, .modal, .modal-backdrop, .amti-modal-backdrop) { box-sizing: border-box; width: 100%; min-height: 100dvh; height: 100dvh; padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left)); align-items: center; overflow-y: auto; overscroll-behavior: contain; } :is(.amti-modal-content, .zn-modal-content, .modal-content) { box-sizing: border-box; width: 100% !important; max-width: none !important; max-height: calc(100dvh - 1rem) !important; margin: 0 !important; border-radius: 14px !important; } .amti-modal-content { padding: 0 !important; } .amti-modal-header, .amti-modal-footer { padding: 0.8rem 0.9rem !important; } .amti-modal-header { gap: 0.6rem; } .amti-modal-header h3 { font-size: 1rem; line-height: 1.25; } .amti-modal-body { padding: 0.9rem !important; } .amti-modal-footer { flex-wrap: wrap; gap: 0.5rem; } .amti-modal-footer > * { flex: 1 1 8rem; min-width: 0; } #amtiPaymentModalCard { width: 100% !important; max-width: none !important; max-height: calc(100dvh - 1rem) !important; border-radius: 14px !important; } #amtiPaymentModalCard > :first-child { padding: 0.9rem 1rem !important; } #amtiPaymentModalCard > :first-child h2 { max-width: calc(100% - 2rem); font-size: 1.05rem !important; line-height: 1.25 !important; } #amtiPaymentModalCard > :first-child p { font-size: 0.76rem !important; line-height: 1.35 !important; } #amtiPaymentModalCard > :nth-child(2) { padding: 0.9rem !important; gap: 0.75rem !important; } #amtiPaymentModalCard [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } #amtiPaymentModalCard button { min-height: 2.65rem; } } /* No retrato, a página deve rolar como uma página única. O modelo desktop usa um viewport travado com scroll interno, que impede o gesto natural no smartphone quando cards altos ocupam a tela. */ @media (max-width: 900px) { html { height: auto !important; min-height: 100% !important; max-height: none !important; overflow-x: clip !important; overflow-y: auto !important; overscroll-behavior-y: auto !important; -webkit-overflow-scrolling: touch !important; } body { height: auto !important; min-height: 100% !important; max-height: none !important; overflow-x: clip !important; overflow-y: visible !important; overscroll-behavior-y: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } .amti-shell { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 100dvh !important; max-height: none !important; overflow: visible !important; overflow-x: clip !important; } .amti-main { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; overflow-x: clip !important; touch-action: pan-y !important; } /* Header fixado no modo mobile, exatamente como no desktop */ .amti-topbar { position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 900 !important; background: var(--topbar-bg, var(--bg-main)) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important; } body.has-contract-expiration-banner { height: auto !important; min-height: 100% !important; max-height: none !important; overflow-y: auto !important; } body.has-contract-expiration-banner .amti-shell, body.has-contract-expiration-banner .amti-main { height: auto !important; max-height: none !important; } .amti-content-container { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; padding-bottom: 32px !important; overscroll-behavior-y: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } #tab-home { display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; touch-action: pan-y !important; } #tab-home .amti-dashboard-grid { height: auto !important; min-height: 0 !important; overflow: visible !important; touch-action: pan-y !important; } #tab-home .amti-dashboard-grid .amti-grid-card, #tab-home .amti-dashboard-grid .amti-card, #tab-home .amti-dashboard-grid .amti-card-header, #tab-home .amti-dashboard-grid .os-card-header, #tab-home .amti-dashboard-grid .agenda-card-header, #tab-home .amti-dashboard-grid .amti-smart-search-header, #tab-home .amti-dashboard-grid .amti-card-header-main, #tab-home .amti-dashboard-grid .amti-card-header-titles, #tab-home .amti-dashboard-grid .amti-card-header-title, #tab-home .amti-dashboard-grid .amti-card-header-subtitle, #tab-home .amti-dashboard-grid .amti-card-header-avatar, #tab-home .amti-dashboard-grid .amti-card-body { touch-action: pan-y !important; -webkit-user-drag: none !important; } } /* Final mobile drawer contract: keep the sidebar off-canvas until explicitly opened. */ @media (max-width: 1023px) { .amti-shell > .amti-sidebar { position: fixed !important; inset: 0 auto 0 0 !important; width: min(88vw, 320px) !important; min-width: min(88vw, 320px) !important; max-width: 320px !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; transform: translate3d(-110%, 0, 0) !important; visibility: hidden !important; pointer-events: none !important; z-index: 1001 !important; overflow: hidden !important; transition: transform 220ms ease, visibility 0s linear 220ms !important; } .amti-shell > .amti-sidebar > * { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } body.mobile-sidebar-open .amti-shell > .amti-sidebar { transform: translate3d(0, 0, 0) !important; visibility: visible !important; pointer-events: auto !important; transition: transform 220ms ease !important; } body.mobile-sidebar-open .amti-shell > .amti-sidebar > * { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } .amti-shell > .amti-sidebar .amti-brand { flex: 0 0 72px !important; } .amti-shell > .amti-sidebar .amti-nav-list { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; justify-content: space-evenly !important; align-items: stretch !important; gap: 2px !important; padding: 8px 10px !important; overflow-x: hidden !important; overflow-y: auto !important; min-height: 0 !important; } .amti-shell > .amti-sidebar .amti-nav-item, .amti-shell > .amti-sidebar .amti-nav-item button { width: 100% !important; flex: 0 0 auto !important; } .amti-shell > .amti-sidebar .amti-nav-item button { height: clamp(44px, 5.2vh, 52px) !important; min-height: 44px !important; grid-template-columns: 52px minmax(0, 1fr) !important; column-gap: 8px !important; padding: 0 14px 0 0 !important; border-radius: var(--nav-item-radius, 12px) !important; color: rgba(226, 232, 240, 0.92) !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } .amti-shell > .amti-sidebar .amti-nav-item button i { width: 52px !important; font-size: 1.35rem !important; display: flex !important; align-items: center !important; justify-content: center !important; color: rgba(148, 163, 184, 0.95) !important; transition: transform 0.2s ease, color 0.2s ease !important; } .amti-shell > .amti-sidebar .amti-nav-item:hover button i { color: #38bdf8 !important; transform: scale(1.08) !important; } .amti-shell > .amti-sidebar .amti-nav-item.active button i { color: #38bdf8 !important; transform: scale(1.05) !important; filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5)) !important; } .amti-shell > .amti-sidebar .amti-nav-item button span { display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; font-size: 1.06rem !important; font-weight: 600 !important; letter-spacing: 0.2px !important; color: inherit !important; line-height: 1.25 !important; } .amti-shell > .amti-sidebar .amti-nav-item.active button { background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(99, 102, 241, 0.16)) !important; color: #f8fafc !important; box-shadow: inset 3px 0 0 #38bdf8, 0 4px 14px rgba(2, 6, 23, 0.3) !important; } /* ─── TEMAS CLAROS NO MODO MOBILE (Light Ice e Block Light) ─── */ :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar { background: #f8fafc !important; border-right: 1px solid rgba(15, 23, 42, 0.15) !important; box-shadow: 4px 0 24px rgba(15, 23, 42, 0.12) !important; } html[data-theme='light'] .amti-shell > .amti-sidebar { background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%) !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-brand { border-bottom: 1px solid rgba(15, 23, 42, 0.12) !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar :is(.amti-brand-name, #sidebarBrandName) { background: none !important; background-image: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: #0f172a !important; color: #0f172a !important; font-weight: 800 !important; opacity: 1 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-sidebar-close { background: rgba(15, 23, 42, 0.06) !important; border: 1px solid rgba(15, 23, 42, 0.14) !important; color: #1e293b !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-sidebar-close:hover { background: rgba(15, 23, 42, 0.12) !important; color: #0f172a !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-nav-item button { color: #1e293b !important; background: transparent !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-nav-item button i { color: #3b82f6 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-nav-item button span { color: #1e293b !important; font-weight: 600 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-nav-item:hover button { background: rgba(37, 99, 235, 0.08) !important; color: #0f172a !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-nav-item:hover button i { color: #1d4ed8 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-nav-item.active button { background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(56, 189, 248, 0.14)) !important; border-left: 4px solid #2563eb !important; color: #1d4ed8 !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12) !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-nav-item.active button i { color: #2563eb !important; filter: none !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-nav-item.active button span { color: #0f172a !important; font-weight: 700 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-user-profile { border-top: 1px solid rgba(15, 23, 42, 0.12) !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-logout-btn i { color: #2563eb !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar :is(.amti-logout-btn span, .amti-logout-btn .amti-user-action-label, #myAccountGreetingLabel) { color: #0f172a !important; font-weight: 600 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-logout-btn:hover { background: rgba(37, 99, 235, 0.08) !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-logout-btn:hover i { color: #1d4ed8 !important; } /* Garantia estrita por tema para itens do menu e botão fechar na sidebar mobile */ :is( html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='dark-block'], html[data-theme='block-light'], html[data-theme*='block'], body.theme-block-steel, body.theme-block-blue, body.theme-dark-block, body.theme-block-light ) .amti-shell > .amti-sidebar :is( .amti-brand-logo, .amti-brand-logo img, .amti-nav-item, .amti-nav-item button, .amti-nav-item.active button, .amti-nav-item button:hover, .amti-nav-item:hover button, .amti-logout-btn, .amti-logout-btn:hover, .amti-logout-btn.active ) { border-radius: 0px !important; } :is( html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='dark-block'], html[data-theme='block-light'], html[data-theme*='block'], body.theme-block-steel, body.theme-block-blue, body.theme-dark-block, body.theme-block-light ) .amti-shell > .amti-sidebar .amti-sidebar-close { border-radius: 0px !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; flex: 0 0 36px !important; aspect-ratio: 1 / 1 !important; } :is( html[data-theme='dark'], html[data-theme='light'], body.theme-dark, body.theme-light ) .amti-shell > .amti-sidebar :is( .amti-nav-item button, .amti-nav-item.active button, .amti-nav-item button:hover, .amti-logout-btn, .amti-logout-btn:hover, .amti-logout-btn.active ) { border-radius: 12px !important; } .amti-shell > .amti-sidebar .amti-brand-name { display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; font-size: 1.15rem !important; font-weight: 700 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-shell > .amti-sidebar :is(.amti-brand-name, #sidebarBrandName) { background: none !important; background-image: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: #0f172a !important; color: #0f172a !important; font-weight: 800 !important; } .amti-shell > .amti-sidebar .amti-user-profile { height: 72px !important; padding: 0 10px !important; border-top: 1px solid rgba(255, 255, 255, 0.07) !important; } .amti-shell > .amti-sidebar .amti-logout-btn { width: 100% !important; height: 48px !important; min-height: 48px !important; grid-template-columns: 52px minmax(0, 1fr) !important; column-gap: 8px !important; padding: 0 14px 0 0 !important; border-radius: var(--nav-item-radius, 12px) !important; } .amti-shell > .amti-sidebar .amti-logout-btn i { width: 52px !important; font-size: 1.35rem !important; color: rgba(148, 163, 184, 0.95) !important; } .amti-shell > .amti-sidebar .amti-logout-btn:hover i { color: #38bdf8 !important; } .amti-shell > .amti-sidebar .amti-logout-btn span { font-size: 1.05rem !important; font-weight: 600 !important; color: rgba(226, 232, 240, 0.9) !important; } .amti-sidebar-overlay { z-index: 1000 !important; } } /* ─── Smartphone portrait: page layouts ─── */ @media (max-width: 767px) and (orientation: portrait) { .amti-tab-pane.active { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* Agenda: stack commitments, notes and date/time instead of preserving the desktop 70/30 split declared inline in the markup. */ #tab-agenda .agenda-tab-layout { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; height: auto !important; min-height: 0 !important; overflow: visible !important; } #tab-agenda .agenda-tab-layout > * { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: none !important; box-sizing: border-box !important; } #tab-agenda .agenda-tab-layout > :first-child { display: flex !important; gap: 12px !important; } #tab-agenda .agenda-tab-layout > :first-child > .amti-grid-card { flex: none !important; min-height: 0 !important; height: auto !important; } #tab-agenda .agenda-tab-layout > :first-child > .amti-grid-card:first-child { min-height: 240px !important; } #tab-agenda .agenda-tab-layout > :first-child > .amti-user-notes-card { min-height: 230px !important; } #tab-agenda .agenda-tab-layout > :last-child { min-height: auto !important; } #tab-agenda .amti-card-header, #tab-agenda .os-card-header { padding: 0 0 10px !important; margin-bottom: 10px !important; gap: 8px !important; } #tab-agenda .amti-card-header-title { font-size: 0.98rem !important; } #tab-agenda .amti-card-header-subtitle { font-size: 0.72rem !important; line-height: 1.25 !important; } #tab-agenda .agenda-list { overflow: visible !important; } #tab-agenda .amti-notes-wrapper { min-height: 190px !important; } /* AI advisor: use one continuous vertical flow, while keeping the chat readable and reserving scroll only for the message history. */ #tab-ai-advisor, #tab-ai-advisor .ai-advisor-layout, #tab-ai-advisor .ai-advisor-top-grid { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } #tab-ai-advisor .ai-advisor-layout, #tab-ai-advisor .ai-advisor-top-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; } #tab-ai-advisor .ai-advisor-chat, #tab-ai-advisor .ai-advisor-suggestions { width: 100% !important; min-width: 0 !important; flex: none !important; box-sizing: border-box !important; } #tab-ai-advisor .ai-advisor-chat { min-height: 500px !important; } #tab-ai-advisor .ai-advisor-messages { min-height: 250px !important; max-height: 430px !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 10px 12px !important; touch-action: pan-y !important; } #tab-ai-advisor .ai-advisor-chat-header { padding: 10px 12px !important; gap: 8px !important; } #tab-ai-advisor .ai-chat-title { min-width: 0 !important; font-size: 0.92rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #tab-ai-advisor .ai-chat-actions { flex-shrink: 0 !important; gap: 4px !important; } #tab-ai-advisor .ai-chat-action-btn { width: 32px !important; height: 32px !important; } #tab-ai-advisor .ai-advisor-input-area { padding: 8px 10px !important; gap: 8px !important; } #tab-ai-advisor .ai-chat-input { min-width: 0 !important; flex: 1 1 auto !important; } #tab-ai-advisor .ai-advisor-input-area button { flex: 0 0 auto !important; width: 82px !important; padding: 0 8px !important; } #tab-ai-advisor .ai-advisor-suggestions { min-height: 0 !important; overflow: visible !important; } #tab-ai-advisor .ai-sugg-item { min-height: 52px !important; padding: 12px !important; } /* PDV: keep the three sub-tabs usable and make catalog/cart a true vertical flow. Internal scrolling is limited to product/cart lists. */ #tab-sales, #tab-sales .pdv-panel, #tab-sales .pdv-layout { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } #tab-sales .pdv-inner-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; width: 100% !important; margin-bottom: 8px !important; } #tab-sales .pdv-inner-nav-btn { min-width: 0 !important; min-height: 38px !important; height: 38px !important; padding: 4px 6px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 0 !important; text-align: center !important; line-height: 1.15 !important; font-size: 0.76rem !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; border-radius: 8px !important; } #tab-sales .pdv-inner-nav-btn i { display: none !important; } #tab-sales .pdv-layout { display: flex !important; flex-direction: column !important; gap: 12px !important; } #tab-sales .pdv-catalog { width: 100% !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } #tab-sales .amti-pdv-catalog-card { margin-bottom: 10px !important; } #tab-sales .pdv-search-wrapper .amti-pdv-search-input { height: 46px !important; padding-left: 42px !important; } #tab-sales .pdv-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; max-height: 220px !important; overflow-y: auto !important; padding: 0 1px 2px !important; } #tab-sales .pdv-product-card { min-height: 104px !important; padding: 12px 8px !important; border-radius: 10px !important; } #tab-sales .pdv-product-card .product-name { font-size: 0.9rem !important; line-height: 1.25 !important; margin-bottom: 8px !important; } #tab-sales .pdv-product-card .product-price { font-size: 1rem !important; padding: 4px 8px !important; } #tab-sales .pdv-cart { width: 100% !important; min-width: 0 !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; margin-bottom: 12px !important; } #tab-sales .amti-pdv-cart-header { padding: 12px 14px !important; font-size: 1rem !important; } #tab-sales .pdv-cart-items { min-height: 150px !important; max-height: 220px !important; padding: 12px !important; overflow-y: auto !important; touch-action: pan-y !important; } #tab-sales .pdv-cart-summary { padding: 12px !important; } /* PDV: Histórico de Vendas no mobile */ #tab-sales #pdvPanelHistorico { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; padding-bottom: 96px !important; } #tab-sales #pdvPanelHistorico .amti-card { height: auto !important; max-height: none !important; overflow: visible !important; border-radius: 12px !important; } #tab-sales #pdvPanelHistorico .amti-card-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding: 14px !important; } #tab-sales #pdvPanelHistorico .amti-card-header .amti-card-title { font-size: 1rem !important; white-space: normal !important; line-height: 1.35 !important; } #tab-sales #pdvPanelHistorico .amti-card-header > div:last-child { width: 100% !important; display: flex !important; gap: 8px !important; } #tab-sales #pdvHistoricoSearch { flex: 1 1 auto !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 42px !important; } #tab-sales #pdvPanelHistorico .amti-card-body { width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-x pan-y !important; padding: 0 !important; } #pdvHistoricoTable { min-width: 660px !important; width: 100% !important; table-layout: auto !important; } #pdvHistoricoTable th, #pdvHistoricoTable td { white-space: nowrap !important; padding: 12px 14px !important; font-size: 0.88rem !important; vertical-align: middle !important; } /* PDV: Configurações no mobile */ #tab-sales #pdvPanelConfig { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; padding-bottom: 96px !important; } #tab-sales #pdvPanelConfig .pdv-config-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 14px 0 !important; } #tab-sales #pdvPanelConfig .pdv-config-info { flex: 1 1 auto !important; min-width: 0 !important; } #tab-sales #pdvPanelConfig .amti-toggle-switch { flex-shrink: 0 !important; } /* Agenda de Compromissos: Rolagem e visual fluido no mobile */ #tab-agenda { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; padding-bottom: 96px !important; } #tab-agenda .agenda-tab-layout { display: flex !important; flex-direction: column !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; gap: 16px !important; } #tab-agenda .agenda-tab-layout > div { width: 100% !important; max-width: 100% !important; flex: none !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; } #tab-agenda .agenda-tab-layout .amti-grid-card { height: auto !important; min-height: 0 !important; max-height: none !important; flex: none !important; } #tab-agenda #agendaItemsContainer { max-height: 320px !important; overflow-y: auto !important; touch-action: pan-y !important; -webkit-overflow-scrolling: touch !important; } #tab-agenda .amti-user-notes-card .amti-notes-wrapper { min-height: 180px !important; height: 180px !important; } /* Gerente Virtual de IA: Cards e botões otimizados para toque mobile */ #tab-ai-advisor { height: auto !important; max-height: none !important; overflow: visible !important; padding-bottom: 96px !important; } #tab-ai-advisor .amti-ai-collapsible-card { margin-bottom: 14px !important; border-radius: var(--radius-lg, 12px) !important; overflow: hidden !important; background: var(--bg-card) !important; border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important; } #tab-ai-advisor .amti-ai-collapsible-card .amti-card-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding: 16px !important; margin: 0 !important; cursor: pointer !important; background: rgba(255, 255, 255, 0.02) !important; } #tab-ai-advisor .amti-ai-collapsible-card .amti-card-header > div:first-child { width: 100% !important; } #tab-ai-advisor .amti-ai-collapsible-card .amti-card-title { font-size: 1.05rem !important; font-weight: 700 !important; margin-bottom: 6px !important; display: flex !important; align-items: center !important; gap: 8px !important; line-height: 1.3 !important; } #tab-ai-advisor .amti-ai-collapsible-card .amti-settings-help { font-size: 0.85rem !important; line-height: 1.45 !important; color: var(--text-secondary, #94a3b8) !important; margin: 0 !important; } #tab-ai-advisor .amti-ai-collapsible-card button[id^="toggleAIAdvisor"], #tab-ai-advisor .amti-ai-collapsible-card .amti-btn-primary { width: 100% !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-size: 0.94rem !important; font-weight: 600 !important; border-radius: var(--radius-md, 8px) !important; padding: 10px 16px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important; box-sizing: border-box !important; } #tab-ai-advisor .amti-ai-collapsible-card .amti-card-body { padding: 16px !important; } #tab-ai-advisor .amti-ai-collapsible-card .amti-inline-flex-wrap { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } #tab-ai-advisor .amti-ai-collapsible-card .amti-inline-flex-wrap > * { width: 100% !important; justify-content: center !important; } /* Preserve readable placeholders on touch screens; the global subtle placeholder rule is too faint for search fields in the screenshots. */ #tab-sales input::placeholder, #tab-finance input::placeholder { color: var(--text-muted, #94a3b8) !important; opacity: 1 !important; } /* Gerente Virtual: keep prompt text readable in every theme. */ #tab-ai-advisor input::placeholder, #tab-ai-advisor textarea::placeholder, #tab-ai-advisor #aiChatInput::placeholder, #tab-ai-advisor .ai-chat-input::placeholder, .ai-chat-input::placeholder, #aiChatInput::placeholder { color: var(--placeholder-color, rgba(148, 163, 184, 0.18)) !important; opacity: 1 !important; } #tab-ai-advisor textarea::-webkit-input-placeholder, #tab-ai-advisor #aiChatInput::-webkit-input-placeholder, #tab-ai-advisor .ai-chat-input::-webkit-input-placeholder, .ai-chat-input::-webkit-input-placeholder, #aiChatInput::-webkit-input-placeholder { color: var(--placeholder-color, rgba(148, 163, 184, 0.18)) !important; opacity: 1 !important; } #tab-ai-advisor textarea::-moz-placeholder, #tab-ai-advisor #aiChatInput::-moz-placeholder, #tab-ai-advisor .ai-chat-input::-moz-placeholder, .ai-chat-input::-moz-placeholder, #aiChatInput::-moz-placeholder { color: var(--placeholder-color, rgba(148, 163, 184, 0.18)) !important; opacity: 1 !important; } #tab-ai-advisor textarea:-ms-input-placeholder, #tab-ai-advisor #aiChatInput:-ms-input-placeholder, #tab-ai-advisor .ai-chat-input:-ms-input-placeholder, .ai-chat-input:-ms-input-placeholder, #aiChatInput:-ms-input-placeholder { color: var(--placeholder-color, rgba(148, 163, 184, 0.18)) !important; opacity: 1 !important; } /* ========================================================================== Controle Financeiro / Fluxo de Caixa no modo mobile ========================================================================== */ #tab-finance { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; touch-action: pan-y !important; -webkit-overflow-scrolling: touch !important; } /* Grid de cartões de resumo do fluxo de caixa (2 colunas perfeitamente equilibradas) */ #tab-finance .amti-summary-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 14px !important; } #tab-finance .amti-stat-card { padding: 10px !important; border-radius: var(--radius-md, 8px) !important; gap: 10px !important; min-height: 60px !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; } #tab-finance .amti-stat-icon { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; font-size: 1rem !important; flex-shrink: 0 !important; align-self: center !important; } #tab-finance .amti-stat-info { display: flex !important; flex-direction: column !important; justify-content: space-between !important; flex: 1 1 auto !important; min-width: 0 !important; min-height: 44px !important; } #tab-finance .amti-stat-label { font-size: 0.72rem !important; line-height: 1.25 !important; min-height: 2.5em !important; max-height: 2.5em !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-bottom: 2px !important; white-space: normal !important; } #tab-finance .amti-stat-value { font-size: 1.05rem !important; font-weight: 700 !important; margin-top: auto !important; } /* Cards do Financeiro */ #tab-finance .amti-card { padding: 10px !important; margin-bottom: 12px !important; border-radius: var(--radius-lg, 12px) !important; overflow: hidden !important; background: var(--bg-card) !important; border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important; box-sizing: border-box !important; } /* Cabeçalho dos cards com alinhamento flex e botão '+' no canto superior direito */ #tab-finance .amti-card-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 0 0 8px 0 !important; margin-bottom: 8px !important; cursor: pointer !important; } #tab-finance .amti-card-header > div:first-child { flex: 1 1 auto !important; min-width: 0 !important; } #tab-finance .amti-card-title { font-size: 1.02rem !important; font-weight: 700 !important; margin-bottom: 4px !important; display: flex !important; align-items: center !important; gap: 8px !important; line-height: 1.35 !important; white-space: normal !important; } #tab-finance .amti-settings-help { font-size: 0.84rem !important; line-height: 1.45 !important; color: var(--text-secondary, #94a3b8) !important; margin: 0 !important; } /* Card 1: Lançamento de Contas (título e ações centralizadas horizontalmente) */ #tab-finance .amti-card:has(#financeTableContainer) > .amti-card-header, #tab-finance .amti-card > .amti-card-header:has(#financeSearchContainer) { align-items: center !important; } #tab-finance .amti-card-header > span.amti-card-title { flex: 1 1 auto !important; min-width: 0 !important; margin-bottom: 0 !important; } #tab-finance .amti-card-header > div:last-child:has(.amti-finance-new-btn) { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; } /* Botão '+' e pesquisar – quadrados na parte superior do lado direito em todos os cards no mobile */ #tab-finance .amti-finance-new-btn, #tab-finance .amti-card-header button.amti-btn-primary, #tab-finance .amti-search-btn, #tab-finance #financeSearchContainer .amti-search-btn { width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: var(--radius-md, 8px) !important; flex: 0 0 38px !important; flex-shrink: 0 !important; margin: 0 !important; box-sizing: border-box !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important; transition: transform 0.15s ease, background 0.15s ease !important; } #tab-finance .amti-finance-new-btn:active, #tab-finance .amti-card-header button.amti-btn-primary:active { transform: scale(0.94) !important; } #tab-finance .amti-finance-new-btn i, #tab-finance .amti-card-header button.amti-btn-primary i { margin: 0 !important; font-size: 1.15rem !important; line-height: 1 !important; } #tab-finance .amti-finance-btn-label { display: none !important; } /* Correção da tabela em "Lançamento de Contas" (rolagem horizontal suave e sem quebra vertical de letras) */ #tab-finance #financeTableContainer, #tab-finance .amti-table-container.amti-finance-list { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-x pan-y !important; padding: 0 !important; margin: 0 !important; border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px) !important; } #tab-finance #financeTableContainer table, #tab-finance .amti-finance-list table { min-width: 720px !important; width: 100% !important; table-layout: auto !important; margin: 0 !important; } #tab-finance #financeTableContainer th, #tab-finance #financeTableContainer td, #tab-finance .amti-finance-list th, #tab-finance .amti-finance-list td { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; padding: 8px 10px !important; font-size: 0.85rem !important; vertical-align: middle !important; } #tab-finance #financeTableContainer th:first-child, #tab-finance #financeTableContainer td:first-child, #tab-finance .amti-finance-list th:first-child, #tab-finance .amti-finance-list td:first-child { padding-left: 2px !important; } #tab-finance #financeTableContainer th:last-child, #tab-finance #financeTableContainer td:last-child, #tab-finance .amti-finance-list th:last-child, #tab-finance .amti-finance-list td:last-child { padding-right: 2px !important; } /* Gráficos expandidos dos cards de caixa */ #tab-finance .amti-finance-card-body { padding: 14px !important; } #tab-finance .amti-finance-chart-toolbar { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } #tab-finance .amti-chip-group { flex-wrap: wrap !important; gap: 6px !important; } #tab-finance .amti-chip { padding: 6px 12px !important; font-size: 0.8rem !important; } #tab-finance .amti-finance-chart-frame { height: 220px !important; max-height: 220px !important; } } /* ========================================================================== RESPONSIVE SYSTEM V2 — smartphone and tablet final layout contract ========================================================================== This block intentionally comes last: several legacy components use inline desktop dimensions, so mobile must win without changing their markup. */ :root { --amti-mobile-gutter: clamp(10px, 3.5vw, 18px); --amti-touch-size: 44px; } @media (max-width: 1023px) { .amti-content-container { padding: 16px var(--amti-mobile-gutter) calc(24px + env(safe-area-inset-bottom)) !important; } .amti-topbar { padding-inline: var(--amti-mobile-gutter) !important; padding-top: max(8px, env(safe-area-inset-top)) !important; } .amti-dashboard-grid { width: 100% !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: minmax(0, auto) !important; gap: clamp(10px, 2vw, 16px) !important; } .amti-dashboard-grid > .amti-grid-card, .amti-dashboard-grid > .amti-card { min-width: 0 !important; max-width: 100% !important; } .amti-card, .amti-grid-card { min-width: 0 !important; } .amti-card-header, .os-card-header, .agenda-card-header { min-width: 0; gap: 10px !important; } .amti-card-header-main, .amti-card-header-titles { min-width: 0 !important; } .amti-card-header-title, .amti-card-title, .os-card-title { overflow-wrap: anywhere; } .amti-btn, .btn, button, input, select, textarea { touch-action: manipulation; } .amti-btn, .btn { min-height: var(--amti-touch-size); } .amti-table-container, .table-responsive, .table-wrapper, .os-table-wrapper { max-width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; } .amti-table, .amti-table-container table, .table-responsive table, .table-wrapper table, .os-table-wrapper table { min-width: 620px; } .amti-modal-body:has(.view-os-items-table) { overflow-x: auto !important; } .amti-modal-body .view-os-items-table { min-width: 620px; } .amti-modal-overlay, .amti-modal, .zn-modal-overlay, .modal-backdrop, .modal { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important; } .amti-modal-content, .zn-modal-content, .modal-content { width: min(100%, 720px) !important; max-width: 100% !important; max-height: calc(100dvh - 20px) !important; margin: 0 !important; } .amti-modal-body, .zn-modal-body, .modal-body { min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .amti-modal-footer, .zn-modal-footer, .modal-footer { flex-wrap: wrap; } .amti-modal-footer > *, .zn-modal-footer > *, .modal-footer > * { min-height: var(--amti-touch-size); } } @media (max-width: 767px) { .amti-content-container { padding-top: 12px !important; } .amti-dashboard-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; } #tab-home .amti-dashboard-grid > .amti-grid-card, #tab-home .amti-dashboard-grid > .amti-card { grid-column: 1 / -1 !important; width: 100% !important; } /* Cards no mobile seguem o border-radius nativo do tema selecionado */ .amti-grid-card, .amti-card { border-radius: var(--radius-lg, 12px); } .amti-card-header, .os-card-header, .agenda-card-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 0 6px 0 !important; gap: 8px !important; } .amti-card-body { padding: 0 !important; } .amti-card-header-main { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; flex: 1 1 auto !important; } .amti-card-header-titles { display: flex !important; flex-direction: column !important; min-width: 0 !important; flex: 1 1 auto !important; } .amti-card-header-avatar { width: 34px !important; height: 34px !important; min-width: 34px !important; flex: 0 0 34px !important; } .amti-card-header-title, .amti-card-title { font-size: .95rem !important; line-height: 1.25 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; } .amti-card-header-subtitle { font-size: .7rem !important; line-height: 1.3 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; } .os-card-actions, .agenda-card-actions { width: auto !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 6px !important; flex: 0 0 auto !important; } .os-card-actions > .amti-btn, .agenda-card-actions > .amti-btn { flex: 0 0 auto !important; min-width: auto !important; width: auto !important; } #tab-agenda .agenda-filter-toggle > span, #tab-agenda .agenda-header-actions > .amti-btn-primary > span { display: none !important; } #tab-agenda .agenda-header-actions { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; flex-wrap: nowrap !important; justify-content: flex-end !important; gap: 6px !important; } #tab-agenda .os-card-header { flex-wrap: nowrap !important; } #tab-agenda .agenda-card-header-main { flex: 1 1 auto !important; min-width: 0 !important; } #tab-agenda .os-card-header:has(.agenda-search-input:not([hidden])) { flex-wrap: wrap !important; } #tab-agenda .os-card-header:has(.agenda-search-input:not([hidden])) .agenda-card-header-main, #tab-agenda .os-card-header:has(.agenda-search-input:not([hidden])) .agenda-header-actions { flex: 1 1 100% !important; width: 100% !important; } #tab-agenda .agenda-search-control { flex: 0 0 38px !important; width: 38px !important; min-width: 0 !important; gap: 6px !important; } #tab-agenda .agenda-search-control:has(.agenda-search-input:not([hidden])) { flex: 1 1 0 !important; width: auto !important; } #tab-agenda .agenda-search-input:not([hidden]) { flex: 1 1 0 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; box-sizing: border-box !important; } #tab-agenda .agenda-header-actions .agenda-search-toggle, #tab-agenda .agenda-filter-toggle, #tab-agenda .agenda-header-actions > .amti-btn-primary { flex: 0 0 38px !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0 !important; aspect-ratio: 1 / 1 !important; box-sizing: border-box !important; } .amti-inline-actions, .section-actions { width: 100% !important; flex-wrap: wrap !important; gap: 8px !important; } .section-actions > .amti-btn { flex: 1 1 140px; min-width: 0; } .amti-topbar-actions { flex: 0 0 auto !important; gap: 6px !important; } .amti-topbar-actions .amti-btn { min-width: 40px !important; padding-inline: 10px !important; } .amti-topbar-actions .amti-btn-text-full { display: none !important; } .amti-topbar-actions .amti-btn-text-short { display: inline !important; } .section-header-premium, .section-header-main { align-items: stretch !important; gap: 12px !important; margin-bottom: 12px !important; } .section-header-premium { padding: 12px 14px !important; flex-direction: column !important; } .section-header-main h2 { font-size: 1.2rem !important; } .section-header-main .section-actions, .section-header-premium .section-actions { justify-content: stretch !important; } .section-header-main .section-actions > *, .section-header-premium .section-actions > * { flex: 1 1 140px; } .amti-form-grid, .config-grid, .zn-grid, .groq-layout-columns, .qrcode-container { grid-template-columns: minmax(0, 1fr) !important; } .amti-form-control, .amti-input, .amti-select, .amti-textarea, input, select, textarea { min-height: 44px; font-size: 16px !important; } .amti-tab-pane.active.amti-flex-tab { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; } .amti-tab-pane.active.amti-flex-tab > * { min-height: 0 !important; } .amti-table-container, .table-responsive, .table-wrapper, .os-table-wrapper { border-radius: 10px; } .amti-modal-content, .zn-modal-content, .modal-content { border-radius: 16px !important; } .amti-modal-header, .zn-modal-header, .modal-header { padding: 12px 14px !important; } .amti-modal-body, .zn-modal-body, .modal-body { padding: 14px !important; } .amti-modal-footer, .zn-modal-footer, .modal-footer { padding: 10px 14px !important; gap: 8px !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; } .amti-modal-footer:not(.ai-alert-modal-footer) > *, .zn-modal-footer > *, .modal-footer > * { flex: 1 1 0 !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; } #tab-settings .amti-settings-page-head, #tab-settings .amti-settings-page-title { min-width: 0 !important; } #tab-settings .amti-theme-preview-card { min-height: 86px; } } @media (max-width: 767px) and (orientation: landscape) { .amti-topbar { min-height: 52px !important; padding-block: 5px !important; } .amti-content-container { padding-top: 10px !important; } .amti-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .amti-tab-pane.active.amti-flex-tab { height: calc(100dvh - 62px) !important; max-height: calc(100dvh - 62px) !important; overflow-y: auto !important; } .amti-modal-content, .zn-modal-content, .modal-content { max-height: calc(100dvh - 12px) !important; } .amti-modal-header, .amti-modal-body, .amti-modal-footer { padding-block: 9px !important; } } @media (min-width: 768px) and (max-width: 1023px) { .amti-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .amti-tab-pane.active.amti-flex-tab { height: calc(100dvh - 92px) !important; max-height: calc(100dvh - 92px) !important; } } /* Garantia: oculto por padrão (display inline/sem classes não sobrepõe os display !important acima) e só exibido quando a classe .os-warranty-visible for aplicada pela lógica de elegibilidade (OS finalizada). */ #viewOsModalFooter #viewOsWarrantyBtn, #viewOsWarrantyBtn { display: none !important; } #viewOsModalFooter #viewOsWarrantyBtn.os-warranty-visible, #viewOsWarrantyBtn.os-warranty-visible { display: inline-flex !important; } #osModal .amti-os-print-group #osBtnGarantia, #osBtnGarantia { display: none !important; } #osModal .amti-os-print-group #osBtnGarantia.os-warranty-visible, #osBtnGarantia.os-warranty-visible { display: inline-flex !important; } /* Sinal: oculto para OS finalizadas (mesmo tratamento: classes !important dos botões-doc sobrepõem display inline, então usamos class para governar). */ #viewOsModalFooter #viewOsSignalBtn.os-signal-hidden, #viewOsSignalBtn.os-signal-hidden { display: none !important; } @media (prefers-reduced-motion: reduce) { .amti-dashboard-grid > *, .amti-modal, .amti-modal-content, .amti-sidebar { animation: none !important; transition-duration: .01ms !important; } } /* ========================================================================== MASTER THEME BORDER CONTRACT - ZERO RADIUS FOR BLOCK THEMES ========================================================================== */ :is( html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='block-light'], html[data-theme='dark-block'], html[data-theme*='block'], body.theme-block-steel, body.theme-block-blue, body.theme-dark-block, body.theme-block-light ) :is( .amti-card, .amti-grid-card, .amti-hero-card, .amti-stat-card, .amti-modal-content, .amti-btn, .amti-input, .amti-select, .amti-table-container, .amti-user-notes, .amti-notes-wrapper, .amti-notes-textarea, .sync-user-notes, #agendaUserNotes, .finance-card, .finance-kpi-card, .ai-advisor-card, .amti-search-bar button, .amti-search-bar input, .comissao-card, .comissao-config-panel, .amti-settings-card-soft, .pdv-product-card ) { border-radius: 0px !important; } /* ───────────────────────────────────────────────────────────── Skeleton do modal "Visualizar OS" (1ª pintura instantânea). Os blocos reproduzem a silhueta do conteúdo; shimmer suave indica carregamento sem bloquear a interação (UI-02). ──────────────────────────────────────────────────────────── */ .os-modal-skeleton { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 16px; min-height: 240px; text-align: center; } .os-modal-skeleton-spinner { font-size: 2rem; color: var(--primary-color, #6366f1); } .os-modal-skeleton-msg { color: var(--text-secondary, #64748b); font-size: 0.92rem; } .os-modal-skeleton-blocks { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .os-modal-skeleton-block { height: 14px; border-radius: 6px; background: linear-gradient(100deg, rgba(120, 130, 160, 0.12) 30%, rgba(120, 130, 160, 0.24) 50%, rgba(120, 130, 160, 0.12) 70%); background-size: 200% 100%; animation: amti-skeleton-shimmer 1.4s infinite linear; } @keyframes amti-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Estado de erro RECUPERÁVEL quando a revalidação do detalhe falha por timeout/queda de rede (LIFE-04): mensagem clara + "Tentar novamente". */ .os-modal-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px 24px; min-height: 240px; text-align: center; } .os-modal-error-icon { font-size: 2.2rem; color: var(--warning, #f59e0b); } .os-modal-error-title { font-weight: 700; font-size: 1rem; } .os-modal-error-msg { color: var(--text-secondary, #64748b); font-size: 0.9rem; } .os-modal-error-retry { margin-top: 6px; } /* Shared layout contract for the OS view and edit modals. */ #viewOsModal .amti-modal-body, #osModal .amti-modal-body { padding: 24px; } .amti-modal-footer.amti-os-footer-actions { margin-top: 0; padding: 16px 24px; background: var(--surface-strong); border-top: 1px solid var(--border-color); } /* Padrão idêntico ao Visualizar OS (#viewOsModalFooter) para o Fluxo Contínuo (#newOSFlowModal) */ #newOSFlowModal .amti-modal-footer, #osFlowFooter { flex: 0 0 auto !important; flex-shrink: 0 !important; margin: 0 !important; margin-top: 0 !important; padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px)) 24px !important; min-height: 0 !important; height: auto !important; max-height: none !important; background: var(--surface-strong, var(--bg-surface, #1e293b)) !important; border-top: 1px solid var(--border-color, rgba(148, 163, 184, 0.14)) !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; width: 100% !important; } #osFlowFooter > div[style*="display:none"], #osFlowFooter > div[style*="display: none"], #osFlowFooter > .amti-inline-actions[style*="display:none"], #osFlowFooter > .amti-inline-actions[style*="display: none"] { display: none !important; } #osFlowFooter .amti-inline-actions { flex: 1 1 100% !important; width: 100% !important; margin: 0 !important; margin-top: 0 !important; padding: 0 !important; gap: 12px !important; min-height: 0 !important; height: auto !important; align-items: center !important; box-sizing: border-box !important; } #osFlowFooter .amti-inline-actions-end { justify-content: flex-end !important; } #osFlowFooter .amti-inline-actions-between { justify-content: space-between !important; } #osFlowFooter .amti-inline-actions-center { justify-content: center !important; } #osFlowFooter .amti-btn, #osFlowFooter button { height: 40px !important; min-height: 40px !important; max-height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 18px !important; font-size: 0.88rem !important; font-weight: 600 !important; box-sizing: border-box !important; line-height: 1 !important; margin: 0 !important; flex: 0 0 auto !important; white-space: nowrap !important; } .view-os-hero { padding: 14px 16px; background: var(--bg-card-soft); border-left: 3px solid var(--primary); border-radius: var(--radius-md); } .view-os-hero-info h3 { margin: 0 0 2px; } .view-os-status { margin-top: 4px; } .view-os-problem-grid { display: grid; gap: 16px; } .view-os-items-table th.t-qty { width: 8%; } .view-os-items-table th.t-unit, .view-os-items-table th.t-sub { width: 16%; } #viewOsContent .view-os-grid-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } #viewOsContent .view-os-client-equip-grid .os-modal-section-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-content: start; gap: 12px; } #viewOsContent .view-os-client-equip-grid .view-os-observations-row { grid-column: 1 / -1; } #viewOsContent .view-os-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0; border: 0; font-size: 0.9rem; } #viewOsContent .view-os-row + .view-os-row { border-top: 0; } #viewOsContent .view-os-label { flex: 0 0 auto; padding: 0; color: var(--text-secondary); font-size: 0.82rem; font-weight: 500; letter-spacing: normal; text-transform: none; } #viewOsContent .view-os-row > span:last-child { display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text-primary); font-size: 0.9rem; line-height: 1.4; overflow-wrap: anywhere; } #viewOsContent .view-os-address-row { grid-column: 1 / -1; } #viewOsContent .os-modal-section-body > .text-secondary { display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text-primary); font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } .amti-view-os-footer .view-os-footer-docs, .amti-view-os-footer .view-os-footer-main { margin: 0; } @media (max-width: 767px) { #viewOsModal .amti-modal-body, #osModal .amti-modal-body { padding: 12px 14px; } } /* ─── Sistema de Notificação de Conexão do Servidor via Botão Flutuante ─── */ #monitoringFabBtn { position: fixed !important; z-index: 9999 !important; } .amti-vps-status-dot { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Pill Flutuante de Alerta do Botão FAB */ .amti-vps-pill-alert { position: fixed; right: 88px; bottom: 25px; z-index: 9998; display: flex; align-items: center; gap: 9px; background: rgba(15, 23, 42, 0.94); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(245, 158, 11, 0.45); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 14px rgba(245, 158, 11, 0.25); color: #fef3c7; padding: 8px 16px; border-radius: 9999px; font-size: 0.83rem; font-weight: 600; cursor: pointer; pointer-events: auto; user-select: none; -webkit-user-select: none; animation: amtiVpsPillSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; transition: all 0.25s ease; white-space: nowrap; } .amti-vps-pill-alert:hover { background: rgba(26, 36, 56, 0.98); border-color: rgba(245, 158, 11, 0.7); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 18px rgba(245, 158, 11, 0.4); } .amti-vps-pill-dot { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 10px #f59e0b; animation: amtiVpsDotPulse 1.8s infinite ease-in-out; flex-shrink: 0; } .amti-vps-pill-text { letter-spacing: 0.01em; color: #f8fafc; } .amti-vps-pill-badge { background: rgba(245, 158, 11, 0.2); border: 1px solid rgba(245, 158, 11, 0.4); border-radius: 6px; padding: 2px 7px; font-size: 0.73rem; font-weight: 700; color: #fbbf24; } /* Popover Flutuante de Diagnóstico do Servidor */ .amti-vps-popover { position: fixed; right: 24px; bottom: 92px; z-index: 100000; background: rgba(15, 23, 42, 0.96); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 16px; padding: 16px 20px; color: #f8fafc; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 24px rgba(245, 158, 11, 0.15); min-width: 280px; max-width: 340px; font-size: 0.86rem; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: auto; animation: amtiVpsPopoverFadeIn 0.25s ease-out; } .amti-vps-popover.hidden { display: none !important; } .amti-vps-popover-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.09); } .amti-vps-popover-header strong { font-size: 0.92rem; color: #fbbf24; display: flex; align-items: center; gap: 7px; font-weight: 700; } .amti-vps-popover-close { background: transparent; border: none; color: #94a3b8; cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; font-size: 0.9rem; } .amti-vps-popover-close:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); } .amti-vps-popover-item { display: flex; justify-content: space-between; align-items: center; margin: 7px 0; color: #cbd5e1; font-size: 0.84rem; } .amti-vps-popover-item span { color: #94a3b8; font-size: 0.8rem; } .amti-vps-popover-item strong { font-weight: 600; color: #f1f5f9; } .amti-vps-popover-badge-offline { color: #f59e0b !important; background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); padding: 2px 7px; border-radius: 6px; font-size: 0.74rem; } .amti-vps-popover-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .amti-vps-popover-btn-primary { width: 100%; padding: 8px 14px; background: #f59e0b; color: #0f172a; border: none; border-radius: 8px; font-weight: 700; font-size: 0.84rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s ease; box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35); } .amti-vps-popover-btn-primary:hover { background: #fbbf24; transform: translateY(-1px); } .amti-vps-popover-btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .amti-vps-popover-btn-secondary { width: 100%; padding: 6px 12px; background: rgba(255, 255, 255, 0.06); color: #cbd5e1; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; font-weight: 500; font-size: 0.78rem; cursor: pointer; transition: all 0.2s ease; text-align: center; } .amti-vps-popover-btn-secondary:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; } @keyframes amtiVpsPillSlideIn { from { opacity: 0; transform: translateX(20px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes amtiVpsPopoverFadeIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes amtiVpsDotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } } @media (max-width: 640px) { .amti-vps-pill-alert { right: 20px; bottom: calc(env(safe-area-inset-bottom, 16px) + 84px); max-width: calc(100vw - 40px); } .amti-vps-popover { right: 16px; bottom: calc(env(safe-area-inset-bottom, 16px) + 88px); width: calc(100vw - 32px); max-width: 360px; } } /* ─── Popup/Barra Inferior de Notificação de Nova Versão ─── */ .amti-version-bottom-bar, .amti-version-modal, #amti-sw-update-notice { position: fixed !important; bottom: 24px !important; left: 50% !important; transform: translateX(-50%) !important; width: calc(100% - 32px) !important; max-width: 860px !important; z-index: 99999 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: block !important; padding: 0 !important; margin: 0 !important; pointer-events: auto !important; animation: amtiVersionSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; box-sizing: border-box !important; } #amti-sw-update-notice { max-width: 680px !important; } .amti-version-bottom-bar.hidden, .amti-version-modal.hidden { display: none !important; } @keyframes amtiVersionSlideUp { from { opacity: 0; transform: translateX(-50%) translateY(45px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .amti-version-bar-content, .amti-version-modal-content { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 12px 20px !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important; } #amti-sw-update-notice { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 12px 20px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important; } .amti-version-bar-main { display: flex !important; align-items: center !important; gap: 14px !important; flex: 1 !important; min-width: 0 !important; } .amti-version-bar-icon { width: 42px !important; height: 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; font-size: 1.15rem !important; transition: all 0.25s ease !important; } .amti-version-bar-icon i { animation: amtiRocketWiggle 2.5s infinite ease-in-out; } @keyframes amtiRocketWiggle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(4deg); } } .amti-version-bar-text { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; } .amti-version-bar-title { font-size: 0.96rem !important; font-weight: 700 !important; letter-spacing: -0.2px !important; line-height: 1.25 !important; } .amti-version-bar-desc, #amti-sw-update-notice p { font-size: 0.84rem !important; line-height: 1.35 !important; } .amti-version-bar-desc { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .amti-version-bar-actions, .amti-version-footer { display: flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; } .amti-version-btn-dismiss, #amti-sw-update-notice button:not(.amti-sw-update-reload) { padding: 8px 16px !important; font-size: 0.84rem !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s ease !important; white-space: nowrap !important; box-sizing: border-box !important; } .amti-version-reload-btn, #amti-sw-update-notice .amti-sw-update-reload { padding: 8px 18px !important; font-size: 0.85rem !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.2s ease !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; box-sizing: border-box !important; } .amti-version-reload-btn:hover, #amti-sw-update-notice .amti-sw-update-reload:hover { transform: translateY(-1px) !important; } /* ───────────────────────────────────────────────────────────── TEMAS DO DASHBOARD: AVISO DE ATUALIZAÇÃO INFERIOR ───────────────────────────────────────────────────────────── */ /* ── 1. TEMA PADRÃO / DARK BLUE (html[data-theme='dark'] / .theme-dark) ── */ .amti-version-bar-content, .amti-version-modal-content, #amti-sw-update-notice, html[data-theme='dark'] .amti-version-bar-content, html[data-theme='dark'] .amti-version-modal-content, html[data-theme='dark'] #amti-sw-update-notice, body.theme-dark .amti-version-bar-content, body.theme-dark .amti-version-modal-content, body.theme-dark #amti-sw-update-notice { background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(8, 15, 28, 0.98)) !important; border: 1px solid rgba(56, 189, 248, 0.28) !important; border-radius: 14px !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 25px rgba(56, 189, 248, 0.16) !important; color: #eff6ff !important; } .amti-version-bar-icon, html[data-theme='dark'] .amti-version-bar-icon, body.theme-dark .amti-version-bar-icon { background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(99, 102, 241, 0.2)) !important; border: 1px solid rgba(56, 189, 248, 0.35) !important; border-radius: 10px !important; color: #38bdf8 !important; } .amti-version-bar-title, html[data-theme='dark'] .amti-version-bar-title, body.theme-dark .amti-version-bar-title { color: #f8fafc !important; } .amti-version-bar-desc, #amti-sw-update-notice p, html[data-theme='dark'] .amti-version-bar-desc, html[data-theme='dark'] #amti-sw-update-notice p, body.theme-dark .amti-version-bar-desc, body.theme-dark #amti-sw-update-notice p { color: #94a3b8 !important; } .amti-version-reload-btn, #amti-sw-update-notice .amti-sw-update-reload, html[data-theme='dark'] .amti-version-reload-btn, html[data-theme='dark'] #amti-sw-update-notice .amti-sw-update-reload, body.theme-dark .amti-version-reload-btn, body.theme-dark #amti-sw-update-notice .amti-sw-update-reload { background: linear-gradient(135deg, #0284c7, #2563eb) !important; border: 1px solid #38bdf8 !important; border-radius: 8px !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important; } .amti-version-reload-btn:hover, #amti-sw-update-notice .amti-sw-update-reload:hover, html[data-theme='dark'] .amti-version-reload-btn:hover, html[data-theme='dark'] #amti-sw-update-notice .amti-sw-update-reload:hover, body.theme-dark .amti-version-reload-btn:hover, body.theme-dark #amti-sw-update-notice .amti-sw-update-reload:hover { box-shadow: 0 6px 18px rgba(2, 132, 199, 0.5) !important; } .amti-version-btn-dismiss, #amti-sw-update-notice button:not(.amti-sw-update-reload), html[data-theme='dark'] .amti-version-btn-dismiss, html[data-theme='dark'] #amti-sw-update-notice button:not(.amti-sw-update-reload), body.theme-dark .amti-version-btn-dismiss, body.theme-dark #amti-sw-update-notice button:not(.amti-sw-update-reload) { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 8px !important; color: #cbd5e1 !important; } .amti-version-btn-dismiss:hover, #amti-sw-update-notice button:not(.amti-sw-update-reload):hover, html[data-theme='dark'] .amti-version-btn-dismiss:hover, html[data-theme='dark'] #amti-sw-update-notice button:not(.amti-sw-update-reload):hover, body.theme-dark .amti-version-btn-dismiss:hover, body.theme-dark #amti-sw-update-notice button:not(.amti-sw-update-reload):hover { background: rgba(255, 255, 255, 0.14) !important; color: #ffffff !important; } /* ── 2. TEMA BLOCK STEEL (html[data-theme='block-steel'] / .theme-block-steel) ── */ html[data-theme='block-steel'] .amti-version-bottom-bar, html[data-theme='block-steel'] .amti-version-modal, html[data-theme='block-steel'] #amti-sw-update-notice, html[data-theme='block-steel'] .amti-version-bar-content, html[data-theme='block-steel'] .amti-version-modal-content, html[data-theme='block-steel'] .amti-version-bar-icon, html[data-theme='block-steel'] .amti-version-reload-btn, html[data-theme='block-steel'] .amti-version-btn-dismiss, html[data-theme='block-steel'] #amti-sw-update-notice button, body.theme-block-steel .amti-version-bottom-bar, body.theme-block-steel .amti-version-modal, body.theme-block-steel #amti-sw-update-notice, body.theme-block-steel .amti-version-bar-content, body.theme-block-steel .amti-version-modal-content, body.theme-block-steel .amti-version-bar-icon, body.theme-block-steel .amti-version-reload-btn, body.theme-block-steel .amti-version-btn-dismiss, body.theme-block-steel #amti-sw-update-notice button { border-radius: 0px !important; } html[data-theme='block-steel'] .amti-version-bar-content, html[data-theme='block-steel'] .amti-version-modal-content, html[data-theme='block-steel'] #amti-sw-update-notice, body.theme-block-steel .amti-version-bar-content, body.theme-block-steel .amti-version-modal-content, body.theme-block-steel #amti-sw-update-notice { background: linear-gradient(180deg, #283341 0%, #1a222a 100%) !important; border: 1px solid #4a5768 !important; border-top: 1px solid #627286 !important; border-bottom: 2px solid #0f141a !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; color: #f1f5f9 !important; } html[data-theme='block-steel'] .amti-version-bar-icon, body.theme-block-steel .amti-version-bar-icon { background: linear-gradient(180deg, #374352 0%, #202832 100%) !important; border: 1px solid #4f5f72 !important; border-top: 1px solid #6b7d93 !important; border-bottom: 2px solid #141b21 !important; color: #8fa3b5 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } html[data-theme='block-steel'] .amti-version-bar-title, body.theme-block-steel .amti-version-bar-title { color: #f1f5f9 !important; } html[data-theme='block-steel'] .amti-version-bar-desc, html[data-theme='block-steel'] #amti-sw-update-notice p, body.theme-block-steel .amti-version-bar-desc, body.theme-block-steel #amti-sw-update-notice p { color: #cbd5e1 !important; } html[data-theme='block-steel'] .amti-version-reload-btn, html[data-theme='block-steel'] #amti-sw-update-notice .amti-sw-update-reload, body.theme-block-steel .amti-version-reload-btn, body.theme-block-steel #amti-sw-update-notice .amti-sw-update-reload { background: linear-gradient(180deg, #4a638c 0%, #293853 100%) !important; border: 1px solid #5c78a6 !important; border-top-color: #7894c2 !important; border-bottom-color: #172132 !important; color: #eff6ff !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.3) !important; } html[data-theme='block-steel'] .amti-version-reload-btn:hover, html[data-theme='block-steel'] #amti-sw-update-notice .amti-sw-update-reload:hover, body.theme-block-steel .amti-version-reload-btn:hover, body.theme-block-steel #amti-sw-update-notice .amti-sw-update-reload:hover { background: linear-gradient(180deg, #5672a0 0%, #304160 100%) !important; } html[data-theme='block-steel'] .amti-version-btn-dismiss, html[data-theme='block-steel'] #amti-sw-update-notice button:not(.amti-sw-update-reload), body.theme-block-steel .amti-version-btn-dismiss, body.theme-block-steel #amti-sw-update-notice button:not(.amti-sw-update-reload) { background: linear-gradient(180deg, #3c4b5c 0%, #222c36 100%) !important; border: 1px solid #4f5f72 !important; border-top: 1px solid #6b7d93 !important; border-bottom: 2px solid #141b21 !important; color: #cbd5e1 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } html[data-theme='block-steel'] .amti-version-btn-dismiss:hover, html[data-theme='block-steel'] #amti-sw-update-notice button:not(.amti-sw-update-reload):hover, body.theme-block-steel .amti-version-btn-dismiss:hover, body.theme-block-steel #amti-sw-update-notice button:not(.amti-sw-update-reload):hover { background: linear-gradient(180deg, #47586c 0%, #27323f 100%) !important; color: #ffffff !important; } /* ── 3. TEMA LIGHT ICE (html[data-theme='light'] / .theme-light) ── */ html[data-theme='light'] .amti-version-bar-content, html[data-theme='light'] .amti-version-modal-content, html[data-theme='light'] #amti-sw-update-notice, body.theme-light .amti-version-bar-content, body.theme-light .amti-version-modal-content, body.theme-light #amti-sw-update-notice { background: linear-gradient(145deg, #ffffff, #f8fafc) !important; border: 1px solid rgba(15, 23, 42, 0.14) !important; border-radius: 14px !important; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.06) !important; color: #0f172a !important; } html[data-theme='light'] .amti-version-bar-icon, body.theme-light .amti-version-bar-icon { background: rgba(2, 132, 199, 0.10) !important; border: 1px solid rgba(2, 132, 199, 0.25) !important; border-radius: 10px !important; color: #0284c7 !important; } html[data-theme='light'] .amti-version-bar-title, body.theme-light .amti-version-bar-title { color: #0f172a !important; } html[data-theme='light'] .amti-version-bar-desc, html[data-theme='light'] #amti-sw-update-notice p, body.theme-light .amti-version-bar-desc, body.theme-light #amti-sw-update-notice p { color: #475569 !important; } html[data-theme='light'] .amti-version-reload-btn, html[data-theme='light'] #amti-sw-update-notice .amti-sw-update-reload, body.theme-light .amti-version-reload-btn, body.theme-light #amti-sw-update-notice .amti-sw-update-reload { background: linear-gradient(135deg, #0284c7, #0369a1) !important; border: 1px solid #0284c7 !important; border-radius: 8px !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important; } html[data-theme='light'] .amti-version-reload-btn:hover, html[data-theme='light'] #amti-sw-update-notice .amti-sw-update-reload:hover, body.theme-light .amti-version-reload-btn:hover, body.theme-light #amti-sw-update-notice .amti-sw-update-reload:hover { background: linear-gradient(135deg, #0369a1, #075985) !important; box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35) !important; } html[data-theme='light'] .amti-version-btn-dismiss, html[data-theme='light'] #amti-sw-update-notice button:not(.amti-sw-update-reload), body.theme-light .amti-version-btn-dismiss, body.theme-light #amti-sw-update-notice button:not(.amti-sw-update-reload) { background: #e2e8f0 !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; color: #334155 !important; } html[data-theme='light'] .amti-version-btn-dismiss:hover, html[data-theme='light'] #amti-sw-update-notice button:not(.amti-sw-update-reload):hover, body.theme-light .amti-version-btn-dismiss:hover, body.theme-light #amti-sw-update-notice button:not(.amti-sw-update-reload):hover { background: #cbd5e1 !important; color: #0f172a !important; } /* ── 4. TEMA BLOCK BLUE (html[data-theme='block-blue'] / .theme-block-blue) ── */ html[data-theme='block-blue'] .amti-version-bottom-bar, html[data-theme='block-blue'] .amti-version-modal, html[data-theme='block-blue'] #amti-sw-update-notice, html[data-theme='block-blue'] .amti-version-bar-content, html[data-theme='block-blue'] .amti-version-modal-content, html[data-theme='block-blue'] .amti-version-bar-icon, html[data-theme='block-blue'] .amti-version-reload-btn, html[data-theme='block-blue'] .amti-version-btn-dismiss, html[data-theme='block-blue'] #amti-sw-update-notice button, body.theme-block-blue .amti-version-bottom-bar, body.theme-block-blue .amti-version-modal, body.theme-block-blue #amti-sw-update-notice, body.theme-block-blue .amti-version-bar-content, body.theme-block-blue .amti-version-modal-content, body.theme-block-blue .amti-version-bar-icon, body.theme-block-blue .amti-version-reload-btn, body.theme-block-blue .amti-version-btn-dismiss, body.theme-block-blue #amti-sw-update-notice button { border-radius: 0px !important; } html[data-theme='block-blue'] .amti-version-bar-content, html[data-theme='block-blue'] .amti-version-modal-content, html[data-theme='block-blue'] #amti-sw-update-notice, body.theme-block-blue .amti-version-bar-content, body.theme-block-blue .amti-version-modal-content, body.theme-block-blue #amti-sw-update-notice { background: linear-gradient(180deg, #10274e 0%, #0b1a33 100%) !important; border: 1px solid #1a355e !important; border-top: 1px solid #2b579a !important; border-bottom: 2px solid #050c18 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; color: #f0f5ff !important; } html[data-theme='block-blue'] .amti-version-bar-icon, body.theme-block-blue .amti-version-bar-icon { background: #081427 !important; border: 1px solid #1a355e !important; color: #00d2ff !important; } html[data-theme='block-blue'] .amti-version-bar-title, body.theme-block-blue .amti-version-bar-title { color: #f0f5ff !important; } html[data-theme='block-blue'] .amti-version-bar-desc, html[data-theme='block-blue'] #amti-sw-update-notice p, body.theme-block-blue .amti-version-bar-desc, body.theme-block-blue #amti-sw-update-notice p { color: #829abf !important; } html[data-theme='block-blue'] .amti-version-reload-btn, html[data-theme='block-blue'] #amti-sw-update-notice .amti-sw-update-reload, body.theme-block-blue .amti-version-reload-btn, body.theme-block-blue #amti-sw-update-notice .amti-sw-update-reload { background: linear-gradient(180deg, #1a4f9c 0%, #0d2a59 100%) !important; border: 1px solid #2a6bcc !important; border-top-color: #4b8df2 !important; border-bottom-color: #06152b !important; color: #ffffff !important; } html[data-theme='block-blue'] .amti-version-btn-dismiss, html[data-theme='block-blue'] #amti-sw-update-notice button:not(.amti-sw-update-reload), body.theme-block-blue .amti-version-btn-dismiss, body.theme-block-blue #amti-sw-update-notice button:not(.amti-sw-update-reload) { background: linear-gradient(180deg, #10274e 0%, #081427 100%) !important; border: 1px solid #1a355e !important; color: #c2d1e8 !important; } /* ── 5. TEMA BLOCK LIGHT (html[data-theme='block-light'] / .theme-block-light) ── */ html[data-theme='block-light'] .amti-version-bottom-bar, html[data-theme='block-light'] .amti-version-modal, html[data-theme='block-light'] #amti-sw-update-notice, html[data-theme='block-light'] .amti-version-bar-content, html[data-theme='block-light'] .amti-version-modal-content, html[data-theme='block-light'] .amti-version-bar-icon, html[data-theme='block-light'] .amti-version-reload-btn, html[data-theme='block-light'] .amti-version-btn-dismiss, html[data-theme='block-light'] #amti-sw-update-notice button, body.theme-block-light .amti-version-bottom-bar, body.theme-block-light .amti-version-modal, body.theme-block-light #amti-sw-update-notice, body.theme-block-light .amti-version-bar-content, body.theme-block-light .amti-version-modal-content, body.theme-block-light .amti-version-bar-icon, body.theme-block-light .amti-version-reload-btn, body.theme-block-light .amti-version-btn-dismiss, body.theme-block-light #amti-sw-update-notice button { border-radius: 0px !important; } html[data-theme='block-light'] .amti-version-bar-content, html[data-theme='block-light'] .amti-version-modal-content, html[data-theme='block-light'] #amti-sw-update-notice, body.theme-block-light .amti-version-bar-content, body.theme-block-light .amti-version-modal-content, body.theme-block-light #amti-sw-update-notice { background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important; border: 1px solid #94a3b8 !important; border-top: 1px solid #cbd5e1 !important; border-bottom: 2px solid #64748b !important; box-shadow: 0 6px 20px rgba(30, 41, 59, 0.15) !important; color: #0f172a !important; } html[data-theme='block-light'] .amti-version-bar-icon, body.theme-block-light .amti-version-bar-icon { background: #e2e8f0 !important; border: 1px solid #94a3b8 !important; color: #1e293b !important; } html[data-theme='block-light'] .amti-version-bar-title, body.theme-block-light .amti-version-bar-title { color: #0f172a !important; } html[data-theme='block-light'] .amti-version-bar-desc, html[data-theme='block-light'] #amti-sw-update-notice p, body.theme-block-light .amti-version-bar-desc, body.theme-block-light #amti-sw-update-notice p { color: #475569 !important; } html[data-theme='block-light'] .amti-version-reload-btn, html[data-theme='block-light'] #amti-sw-update-notice .amti-sw-update-reload, body.theme-block-light .amti-version-reload-btn, body.theme-block-light #amti-sw-update-notice .amti-sw-update-reload { background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important; border: 1px solid #0f172a !important; border-top-color: #475569 !important; border-bottom-color: #020617 !important; color: #ffffff !important; } html[data-theme='block-light'] .amti-version-btn-dismiss, html[data-theme='block-light'] #amti-sw-update-notice button:not(.amti-sw-update-reload), body.theme-block-light .amti-version-btn-dismiss, body.theme-block-light #amti-sw-update-notice button:not(.amti-sw-update-reload) { background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } /* ── 6. TEMA DARK BLOCK (html[data-theme='dark-block'] / .theme-dark-block) ── */ html[data-theme='dark-block'] .amti-version-bottom-bar, html[data-theme='dark-block'] .amti-version-modal, html[data-theme='dark-block'] #amti-sw-update-notice, html[data-theme='dark-block'] .amti-version-bar-content, html[data-theme='dark-block'] .amti-version-modal-content, html[data-theme='dark-block'] .amti-version-bar-icon, html[data-theme='dark-block'] .amti-version-reload-btn, html[data-theme='dark-block'] .amti-version-btn-dismiss, html[data-theme='dark-block'] #amti-sw-update-notice button, body.theme-dark-block .amti-version-bottom-bar, body.theme-dark-block .amti-version-modal, body.theme-dark-block #amti-sw-update-notice, body.theme-dark-block .amti-version-bar-content, body.theme-dark-block .amti-version-modal-content, body.theme-dark-block .amti-version-bar-icon, body.theme-dark-block .amti-version-reload-btn, body.theme-dark-block .amti-version-btn-dismiss, body.theme-dark-block #amti-sw-update-notice button { border-radius: 0px !important; } html[data-theme='dark-block'] .amti-version-bar-content, html[data-theme='dark-block'] .amti-version-modal-content, html[data-theme='dark-block'] #amti-sw-update-notice, body.theme-dark-block .amti-version-bar-content, body.theme-dark-block .amti-version-modal-content, body.theme-dark-block #amti-sw-update-notice { background: linear-gradient(180deg, #141414 0%, #0a0a0a 100%) !important; border: 1px solid #222222 !important; border-top: 1px solid #333333 !important; border-bottom: 2px solid #000000 !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; color: #ffffff !important; } html[data-theme='dark-block'] .amti-version-bar-icon, body.theme-dark-block .amti-version-bar-icon { background: #111111 !important; border: 1px solid #2a2a2a !important; color: #ffffff !important; } html[data-theme='dark-block'] .amti-version-bar-title, body.theme-dark-block .amti-version-bar-title { color: #ffffff !important; } html[data-theme='dark-block'] .amti-version-bar-desc, html[data-theme='dark-block'] #amti-sw-update-notice p, body.theme-dark-block .amti-version-bar-desc, body.theme-dark-block #amti-sw-update-notice p { color: #888888 !important; } html[data-theme='dark-block'] .amti-version-reload-btn, html[data-theme='dark-block'] #amti-sw-update-notice .amti-sw-update-reload, body.theme-dark-block .amti-version-reload-btn, body.theme-dark-block #amti-sw-update-notice .amti-sw-update-reload { background: linear-gradient(180deg, #2a2a2a 0%, #181818 100%) !important; border: 1px solid #444444 !important; border-top-color: #555555 !important; border-bottom-color: #0a0a0a !important; color: #ffffff !important; } html[data-theme='dark-block'] .amti-version-btn-dismiss, html[data-theme='dark-block'] #amti-sw-update-notice button:not(.amti-sw-update-reload), body.theme-dark-block .amti-version-btn-dismiss, body.theme-dark-block #amti-sw-update-notice button:not(.amti-sw-update-reload) { background: linear-gradient(180deg, #181818 0%, #0f0f0f 100%) !important; border: 1px solid #262626 !important; color: #aaaaaa !important; } /* ───────────────────────────────────────────────────────────── AJUSTE TOTAL E ORGANIZADO NO MODO MOBILE (≤ 640px) ───────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .amti-version-bottom-bar, .amti-version-modal, #amti-sw-update-notice { bottom: max(12px, env(safe-area-inset-bottom)) !important; width: calc(100% - 20px) !important; left: 50% !important; transform: translateX(-50%) !important; max-width: 100% !important; } .amti-version-bar-content, .amti-version-modal-content { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding: 12px 14px !important; } .amti-version-bar-main { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; } .amti-version-bar-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; flex-shrink: 0 !important; font-size: 1.1rem !important; } .amti-version-bar-text { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .amti-version-bar-title { font-size: 0.94rem !important; font-weight: 700 !important; line-height: 1.25 !important; margin: 0 !important; } .amti-version-bar-desc { font-size: 0.81rem !important; line-height: 1.35 !important; white-space: normal !important; word-break: break-word !important; margin: 0 !important; } .amti-version-bar-actions, .amti-version-footer { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: stretch !important; gap: 8px !important; width: 100% !important; margin-top: 2px !important; } .amti-version-btn-dismiss { flex: 1 1 45% !important; min-height: 42px !important; padding: 8px 10px !important; font-size: 0.82rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; } .amti-version-reload-btn { flex: 1 1 55% !important; min-height: 42px !important; padding: 8px 12px !important; font-size: 0.84rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; } /* Ajustes Mobile do Popup do Service Worker */ #amti-sw-update-notice { display: flex !important; flex-wrap: wrap !important; flex-direction: row !important; align-items: stretch !important; gap: 10px !important; padding: 12px 14px !important; } #amti-sw-update-notice p { flex: 1 1 100% !important; width: 100% !important; font-size: 0.82rem !important; line-height: 1.35 !important; margin: 0 0 2px 0 !important; white-space: normal !important; } #amti-sw-update-notice button { min-height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; font-size: 0.83rem !important; box-sizing: border-box !important; } #amti-sw-update-notice button:not(.amti-sw-update-reload) { flex: 1 1 45% !important; } #amti-sw-update-notice .amti-sw-update-reload { flex: 1 1 50% !important; } } @media (max-width: 360px) { .amti-version-bar-actions, .amti-version-footer, #amti-sw-update-notice { flex-direction: column-reverse !important; } .amti-version-btn-dismiss, .amti-version-reload-btn, #amti-sw-update-notice button { width: 100% !important; flex: 1 1 100% !important; } } /* ── Modal Mudar Atuação ────────────────────────────────────────── */ .amti-industry-card-opt { display: block; border: 1px solid var(--border-color, rgba(255,255,255,0.12)); background: var(--bg-card-soft, rgba(255,255,255,0.03)); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: all 0.2s ease; position: relative; } .amti-industry-card-opt[hidden] { display: none !important; } .amti-industry-card-opt:hover { border-color: var(--primary, #38bdf8); background: rgba(56, 189, 248, 0.05); } .amti-industry-card-opt:has(input:checked) { border-color: var(--primary, #38bdf8); background: rgba(56, 189, 248, 0.12); box-shadow: 0 0 0 1px var(--primary, #38bdf8); } .amti-industry-card-opt input { position: absolute; top: 12px; right: 12px; accent-color: var(--primary, #38bdf8); } .amti-industry-card-opt .opt-body { display: flex; align-items: flex-start; gap: 10px; padding-right: 22px; } .amti-industry-card-opt .opt-icon { font-size: 1.25rem; color: var(--primary, #38bdf8); margin-top: 2px; } .amti-industry-card-opt strong { display: block; font-size: 0.88rem; color: var(--text-primary, #f8fafc); margin-bottom: 2px; } } .amti-industry-card-opt small { display: block; font-size: 0.76rem; color: var(--text-secondary, #94a3b8); line-height: 1.35; } /* ── In-App Camera Viewfinder for Companion Mobile (Zero-Reload / No App-Switching) ── */ .amti-companion-camera-viewport { position: relative !important; width: 100% !important; border-radius: 18px !important; overflow: hidden !important; background: #000000 !important; aspect-ratio: 3/4; min-height: 280px !important; max-height: min(74vh, 620px) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-end !important; margin-bottom: 12px !important; } .amti-companion-camera-video { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; background: #000000 !important; z-index: 1 !important; } .amti-camera-overlay-btn { position: absolute !important; z-index: 10 !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background: rgba(15, 23, 42, 0.65) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.15rem !important; cursor: pointer !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important; transition: transform 0.15s ease, background 0.2s ease !important; } .amti-camera-overlay-btn:active { transform: scale(0.9) !important; } .amti-camera-overlay-btn.top-left { top: 12px !important; left: 12px !important; } .amti-camera-overlay-btn.top-right { top: 12px !important; right: 12px !important; } .amti-camera-overlay-btn.active { background: rgba(234, 179, 8, 0.85) !important; color: #000000 !important; border-color: #facc15 !important; } .amti-camera-recording-badge { position: absolute !important; top: 14px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 10 !important; display: none !important; align-items: center !important; gap: 8px !important; padding: 6px 14px !important; background: rgba(220, 38, 38, 0.85) !important; backdrop-filter: none !important; border-radius: 20px !important; color: #ffffff !important; font-weight: 700 !important; font-size: 0.88rem !important; box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4) !important; } .amti-camera-recording-badge.is-recording { display: flex !important; } .amti-recording-dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #ffffff !important; animation: amtiRecordPulse 1s infinite alternate !important; } @keyframes amtiRecordPulse { 0% { opacity: 0.3; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.1); } } .amti-camera-shutter-bar { position: relative !important; z-index: 10 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 12px 0 16px !important; background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0) 100%) !important; pointer-events: none !important; } .amti-camera-shutter-btn { pointer-events: auto !important; width: 66px !important; height: 66px !important; border-radius: 50% !important; background: transparent !important; border: 4px solid #ffffff !important; padding: 4px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important; transition: transform 0.12s ease !important; } .amti-camera-shutter-btn:active { transform: scale(0.92) !important; } .amti-shutter-inner { width: 100% !important; height: 100% !important; border-radius: 50% !important; background: #ffffff !important; transition: all 0.2s ease !important; } .amti-camera-shutter-btn.video-mode .amti-shutter-inner { background: #ef4444 !important; } .amti-camera-shutter-btn.recording .amti-shutter-inner { border-radius: 8px !important; transform: scale(0.65) !important; background: #ef4444 !important; } .amti-camera-flash-effect { position: absolute !important; inset: 0 !important; background: #ffffff !important; z-index: 20 !important; opacity: 0; pointer-events: none; transition: opacity 0.08s ease-out; } .amti-camera-flash-effect.flash-active { opacity: 0.9 !important; } /* ─── Companion Camera: Ações de Cabeçalho e Seletor de Usuário ─── */ .amti-companion-header-actions { display: flex !important; align-items: center !important; gap: 10px !important; } .amti-companion-user-picker-wrap { position: relative !important; } .amti-companion-user-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border-radius: 8px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #94a3b8 !important; cursor: pointer !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; padding: 0 !important; } .amti-companion-user-btn:hover { background: rgba(56, 189, 248, 0.12) !important; border-color: rgba(56, 189, 248, 0.4) !important; color: #38bdf8 !important; transform: translateY(-1px) !important; } .amti-companion-user-btn.has-selection { background: rgba(16, 185, 129, 0.15) !important; border-color: #10b981 !important; color: #34d399 !important; } .amti-companion-user-badge { display: none !important; position: absolute !important; top: -3px !important; right: -3px !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #10b981 !important; box-shadow: 0 0 6px #10b981 !important; border: 2px solid #0f172a !important; } .amti-companion-user-btn.has-selection .amti-companion-user-badge { display: block !important; } .amti-companion-user-dropdown { position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; width: 280px !important; max-height: 320px !important; background: rgba(15, 23, 42, 0.98) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 12px !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(56, 189, 248, 0.1) !important; z-index: 100010 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; animation: amtiUserDropdownIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important; } .amti-companion-user-dropdown.hidden { display: none !important; } @keyframes amtiUserDropdownIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .amti-companion-user-dropdown-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 14px !important; background: rgba(255, 255, 255, 0.03) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; font-size: 11.5px !important; font-weight: 600 !important; color: #94a3b8 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .amti-companion-user-clear-btn { background: transparent !important; border: none !important; color: #38bdf8 !important; font-size: 11px !important; font-weight: 500 !important; cursor: pointer !important; padding: 2px 6px !important; border-radius: 4px !important; transition: all 0.15s ease !important; } .amti-companion-user-clear-btn:hover { background: rgba(56, 189, 248, 0.15) !important; color: #7dd3fc !important; } .amti-companion-user-list { padding: 6px !important; overflow-y: auto !important; max-height: 260px !important; } .amti-companion-user-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 10px !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.15s ease !important; color: #e2e8f0 !important; font-size: 13px !important; user-select: none !important; } .amti-companion-user-item:hover { background: rgba(255, 255, 255, 0.07) !important; } .amti-companion-user-item.is-selected { background: rgba(16, 185, 129, 0.15) !important; color: #34d399 !important; font-weight: 600 !important; } .amti-companion-user-avatar { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: rgba(56, 189, 248, 0.18) !important; color: #38bdf8 !important; font-size: 11px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .amti-companion-user-item.is-selected .amti-companion-user-avatar { background: #10b981 !important; color: #ffffff !important; } .amti-companion-user-info { display: flex !important; flex-direction: column !important; flex: 1 !important; min-width: 0 !important; } .amti-companion-user-name { font-size: 12.5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .amti-companion-user-login { font-size: 11px !important; color: #64748b !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .amti-companion-user-item.is-selected .amti-companion-user-login { color: #a7f3d0 !important; } .amti-companion-user-check { margin-left: auto !important; color: #10b981 !important; font-size: 12px !important; } /* ─── Botão Discreto e Visor de Webcam no Computador ─── */ .amti-btn-subtle { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 13px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 7px !important; color: #cbd5e1 !important; font-size: 12.5px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; text-decoration: none !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; } .amti-btn-subtle:hover { background: rgba(56, 189, 248, 0.12) !important; border-color: rgba(56, 189, 248, 0.45) !important; color: #38bdf8 !important; box-shadow: 0 2px 8px rgba(56, 189, 248, 0.2) !important; transform: translateY(-1px) !important; } .amti-btn-subtle:active { transform: translateY(0) !important; } .amti-companion-pc-webcam-action { margin-top: 10px !important; display: flex !important; align-items: center !important; gap: 8px !important; } .amti-companion-pc-webcam-container { display: none !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; margin-bottom: 16px !important; } .amti-companion-pc-webcam-container.is-active { display: flex !important; } .amti-companion-pc-webcam-viewport { position: relative !important; width: 100% !important; max-height: 280px !important; background: #000000 !important; border-radius: 10px !important; overflow: hidden !important; border: 1px solid rgba(56, 189, 248, 0.3) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .amti-companion-pc-webcam-viewport video { width: 100% !important; height: 100% !important; max-height: 280px !important; object-fit: contain !important; display: block !important; } .amti-companion-pc-webcam-controls { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; } /* ── Botão e Dropdown de Seleção de Usuários da Instância ── */ .amti-companion-header-actions { display: flex !important; align-items: center !important; gap: 8px !important; } .amti-companion-user-picker-wrap { position: relative !important; display: inline-flex !important; align-items: center !important; } .amti-companion-user-btn { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: var(--text-secondary, #94a3b8) !important; cursor: pointer !important; position: relative !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; font-size: 0.95rem !important; } .amti-companion-user-btn:hover { background: rgba(56, 189, 248, 0.14) !important; border-color: rgba(56, 189, 248, 0.45) !important; color: #38bdf8 !important; transform: scale(1.05) !important; } .amti-companion-user-btn.has-selection { background: rgba(16, 185, 129, 0.18) !important; border-color: #10b981 !important; color: #34d399 !important; } .amti-companion-user-badge { display: none !important; } .amti-companion-user-btn.has-selection .amti-companion-user-badge { display: block !important; position: absolute !important; top: 1px !important; right: 1px !important; width: 8px !important; height: 8px !important; background: #10b981 !important; border-radius: 50% !important; border: 1.5px solid #0f172a !important; } .amti-companion-user-dropdown { position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; width: 260px !important; max-width: 90vw !important; background: #0f172a !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 12px !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05) !important; z-index: 99999999 !important; overflow: hidden !important; backdrop-filter: none !important; animation: amtiUserDropdownPop 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } @keyframes amtiUserDropdownPop { 0% { opacity: 0; transform: translateY(-6px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .amti-companion-user-dropdown-header { padding: 10px 14px !important; background: rgba(255, 255, 255, 0.03) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 0.8rem !important; font-weight: 600 !important; color: #94a3b8 !important; } .amti-companion-user-clear-btn { background: none !important; border: none !important; color: #38bdf8 !important; font-size: 0.78rem !important; cursor: pointer !important; font-weight: 600 !important; padding: 2px 6px !important; border-radius: 4px !important; } .amti-companion-user-clear-btn:hover { text-decoration: underline !important; } .amti-companion-user-list { max-height: 220px !important; overflow-y: auto !important; padding: 6px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .amti-companion-user-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 10px !important; border-radius: 8px !important; cursor: pointer !important; transition: background 0.15s ease !important; color: #f1f5f9 !important; } .amti-companion-user-item:hover { background: rgba(255, 255, 255, 0.08) !important; } .amti-companion-user-item.is-selected { background: rgba(16, 185, 129, 0.16) !important; border: 1px solid rgba(16, 185, 129, 0.35) !important; } .amti-companion-user-avatar { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: linear-gradient(135deg, #0284c7, #0369a1) !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.8rem !important; font-weight: 700 !important; } .amti-companion-user-info { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; min-width: 0 !important; } .amti-companion-user-name { font-size: 0.85rem !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .amti-companion-user-login { font-size: 0.72rem !important; color: #64748b !important; } .amti-companion-user-check { color: #10b981 !important; font-size: 0.85rem !important; } /* Otimização Mobile para o Card PDV (Balcão de Produtos & Serviços em Altura Máxima) */ @media (max-width: 859px) { #tab-home .amti-dashboard-grid .pdv-widget-card .pdv-widget-header, .pdv-widget-card .pdv-widget-header { padding-left: 0 !important; padding-right: 0 !important; } #tab-home .amti-dashboard-grid .pdv-widget-card .pdv-widget-body, .pdv-widget-card .pdv-widget-body { padding-left: 0 !important; padding-right: 0 !important; } .pdv-widget-card.height-xlarge .pdv-widget-body { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 8px 0 0 0 !important; height: calc(100% - 50px) !important; overflow-y: auto !important; } .pdv-widget-card.height-xlarge .pdv-widget-cart-section { flex: 1 1 0px !important; min-height: 80px !important; overflow: hidden !important; } .pdv-widget-card.height-xlarge .pdv-empty-cart { min-height: 80px !important; padding: 8px 6px !important; } .pdv-widget-card.height-xlarge .pdv-empty-icon-bubble { width: 36px !important; height: 36px !important; font-size: 0.95rem !important; margin-bottom: 4px !important; } .pdv-widget-card.height-xlarge .pdv-empty-title { font-size: 0.80rem !important; margin-bottom: 2px !important; } .pdv-widget-card.height-xlarge .pdv-empty-subtitle { font-size: 0.68rem !important; line-height: 1.25 !important; } .pdv-widget-card.height-xlarge .pdv-empty-scan-cta { margin-top: 8px !important; padding: 5px 12px !important; font-size: 0.72rem !important; } .pdv-widget-card.height-xlarge .pdv-widget-footer-section { margin-top: auto !important; gap: 6px !important; padding-top: 6px !important; flex-shrink: 0 !important; } .pdv-widget-card.height-xlarge .pdv-widget-client-box, .pdv-widget-card.height-xlarge .pdv-widget-payment-box { gap: 3px !important; } .pdv-widget-card.height-xlarge .pdv-payment-pills { gap: 4px !important; } .pdv-widget-card.height-xlarge .pdv-pay-pill { padding: 4px 8px !important; font-size: 0.72rem !important; } .pdv-widget-card.height-xlarge .pdv-widget-summary-card { padding: 6px 10px !important; } .pdv-widget-card.height-xlarge .pdv-widget-checkout-btn { height: 38px !important; font-size: 0.84rem !important; } } /* ======================================================== MODERN PDV FULL PAGE LAYOUT (Alinhado com Balcão de Produtos) ======================================================== */ .pdv-page-search-bar { width: 100%; } #tab-sales .pdv-catalog .amti-pdv-catalog-card { padding: 0; background: transparent; border: none; box-shadow: none; margin-bottom: 14px; } #tab-sales .pdv-cart { border-radius: var(--radius-lg, 14px); background: var(--bg-card, #131a25); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: thin; } #tab-sales .pdv-cart::-webkit-scrollbar { width: 6px; } #tab-sales .pdv-cart::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 999px; } #tab-sales .pdv-cart::-webkit-scrollbar-thumb:hover { background: rgba(52, 211, 153, 0.4); } #tab-sales .amti-pdv-cart-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(19, 26, 37, 0.96) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: var(--text-main, #f8fafc); font-size: 0.95rem; font-weight: 700; gap: 10px; position: sticky !important; top: 0 !important; z-index: 20 !important; flex-shrink: 0 !important; } #tab-sales .amti-pdv-cart-header i { color: #34d399; } #tab-sales .pdv-cart-items { background: rgba(0, 0, 0, 0.18); border-radius: 10px; margin: 10px 14px 0; border: 1px solid rgba(255, 255, 255, 0.05); min-height: 80px; flex-shrink: 0 !important; } #tab-sales .pdv-cart-summary { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: transparent; flex-shrink: 0 !important; } #tab-sales .pdv-cart-summary .amti-form-group { margin-bottom: 0; } #tab-sales .pdv-cart-summary label { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary, #94a3b8); display: flex; align-items: center; gap: 5px; margin-bottom: 4px; } #tab-sales .pdv-payment-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 6px; } #tab-sales .pdv-product-card { background: rgba(19, 26, 37, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 14px 12px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } #tab-sales .pdv-product-card:hover { transform: translateY(-2px); border-color: rgba(16, 185, 129, 0.4); box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15); background: rgba(19, 26, 37, 0.95); } #tab-sales .amti-pdv-checkout-btn { width: 100%; height: 44px; font-size: 0.92rem; font-weight: 700; color: #ffffff; border-radius: 9px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border: 1px solid rgba(16, 185, 129, 0.4); box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35); transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; letter-spacing: 0.02em; text-transform: none; } #tab-sales .amti-pdv-checkout-btn:hover { background: linear-gradient(135deg, #059669 0%, #047857 100%); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5); transform: translateY(-1px); } #tab-sales .amti-pdv-checkout-btn.is-empty { opacity: 0.5; cursor: not-allowed; } /* Modo Mobile para página completa de Vendas e Frente de Caixa */ @media (max-width: 859px) { #tab-sales .pdv-inner-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px !important; margin-bottom: 8px !important; } #tab-sales .pdv-inner-nav-btn { min-width: 0 !important; min-height: 38px !important; height: 38px !important; padding: 4px 6px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 0 !important; text-align: center !important; font-size: 0.76rem !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; border-radius: 8px !important; } #tab-sales .pdv-inner-nav-btn i { display: none !important; } #tab-sales { height: auto !important; max-height: none !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 84px !important; } #tab-sales .pdv-layout { display: flex !important; flex-direction: column !important; gap: 14px !important; height: auto !important; overflow: visible !important; } #tab-sales .pdv-catalog { width: 100% !important; } #tab-sales .pdv-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-height: 240px !important; overflow-y: auto !important; gap: 8px !important; } #tab-sales .pdv-cart { width: 100% !important; margin-bottom: 16px !important; } #tab-sales .pdv-cart-items { min-height: 120px !important; max-height: 200px !important; } #tab-sales .pdv-payment-pills { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* ======================================================== DIVISOR REDIMENSIONÁVEL DO CARRINHO PDV (DESKTOP) ======================================================== */ .pdv-cart-resizer { display: none; } @media (min-width: 860px) { .pdv-cart-resizer { display: flex; align-items: center; justify-content: center; height: 12px; margin: -6px 0; cursor: row-resize; cursor: ns-resize; position: relative; z-index: 25; flex-shrink: 0; user-select: none; -webkit-user-select: none; background: transparent; } .pdv-cart-resizer::before { content: ''; position: absolute; left: 14px; right: 14px; height: 1px; background: rgba(255, 255, 255, 0.08); transition: background 0.2s, height 0.2s; } .pdv-cart-resizer-grip { width: 38px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); z-index: 2; transition: all 0.2s ease; } .pdv-cart-resizer:hover::before, .pdv-cart-resizer.is-resizing::before { background: rgba(16, 185, 129, 0.6); height: 2px; } .pdv-cart-resizer:hover .pdv-cart-resizer-grip, .pdv-cart-resizer.is-resizing .pdv-cart-resizer-grip { background: #34d399; box-shadow: 0 0 10px rgba(16, 185, 129, 0.6); width: 52px; } body.pdv-cart-is-resizing { cursor: row-resize !important; cursor: ns-resize !important; user-select: none !important; -webkit-user-select: none !important; } } /* ======================================================== LUPA E ESPAÇO DE BUSCA PDV (DESKTOP COM LUPA / MOBILE SEM LUPA E SEM ESPAÇO) ======================================================== */ @media (min-width: 860px) { .pdv-widget-search-icon { display: inline-flex !important; align-items: center; justify-content: center; } .pdv-widget-search-bar { padding: 0 6px 0 12px !important; gap: 8px !important; } } @media (max-width: 859px) { .pdv-widget-search-icon { display: none !important; } .pdv-widget-search-bar { padding-left: 0 !important; } .pdv-widget-search-input { margin-left: 0 !important; border-left: none !important; border-top-left-radius: inherit !important; border-bottom-left-radius: inherit !important; padding-left: 10px !important; } } /* ======================================================== DEFINITIVE CROSS-THEME CONTRAST & VISIBILITY ENGINE Garante legibilidade cristalina em TODOS OS 6 TEMAS: Light Ice, Block Light, Block Steel, Dark Blue, Block Blue, Dark Block ======================================================== */ /* 1. SIDEBAR BRAND NAME (DESKTOP & MOBILE DRAWER) */ :is( html[data-theme='light'], html.theme-light, body.theme-light ) :is(.amti-sidebar, aside#dashboardSidebar) :is(.amti-brand-name, #sidebarBrandName) { background: none !important; background-image: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: #0f172a !important; color: #0f172a !important; font-weight: 800 !important; opacity: 1 !important; visibility: visible !important; } :is( html[data-theme='light'], html.theme-light, body.theme-light ) .amti-sidebar-close { background: rgba(15, 23, 42, 0.08) !important; border: 1px solid rgba(15, 23, 42, 0.18) !important; color: #0f172a !important; } :is( html[data-theme='dark'], html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='dark-block'], body.theme-dark, body.theme-block-steel, body.theme-block-blue, body.theme-dark-block ) :is(.amti-sidebar, aside#dashboardSidebar) :is(.amti-brand-name, #sidebarBrandName) { -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; font-weight: 800 !important; opacity: 1 !important; visibility: visible !important; } /* 2. CARD TITLES & SUBTITLES IN LIGHT THEMES (Light Ice & Block Light) */ :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) :is( .amti-card-header-title, .amti-card-title, .os-card-title, .pdv-widget-header-title, .amti-smart-search-title-text strong, #tiOsCashCardTitle ) { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; font-weight: 750 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) :is( .amti-card-header-subtitle, .pdv-widget-header-subtitle, .amti-smart-search-subtitle ) { color: #334155 !important; -webkit-text-fill-color: #334155 !important; font-weight: 600 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) :is( .amti-card-header-subtitle i, .pdv-widget-header-subtitle i, .amti-smart-search-subtitle i ) { color: #1d4ed8 !important; -webkit-text-fill-color: #1d4ed8 !important; } /* 3. CARD TITLES & SUBTITLES IN DARK THEMES (Dark, Block Steel, Block Blue, Dark Block) */ :is( html[data-theme='dark'], html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='dark-block'], body.theme-dark, body.theme-block-steel, body.theme-block-blue, body.theme-dark-block ) :is( .amti-card-header-title, .amti-card-title, .os-card-title, .pdv-widget-header-title, .amti-smart-search-title-text strong, #tiOsCashCardTitle ) { color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; font-weight: 700 !important; } :is( html[data-theme='dark'], html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='dark-block'], body.theme-dark, body.theme-block-steel, body.theme-block-blue, body.theme-dark-block ) :is( .amti-card-header-subtitle, .pdv-widget-header-subtitle, .amti-smart-search-subtitle ) { color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; font-weight: 500 !important; } :is( html[data-theme='dark'], html[data-theme='block-steel'], html[data-theme='block-blue'], html[data-theme='dark-block'], body.theme-dark, body.theme-block-steel, body.theme-block-blue, body.theme-dark-block ) :is( .amti-card-header-subtitle i, .pdv-widget-header-subtitle i, .amti-smart-search-subtitle i ) { color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; } /* 4. FINANCIAL STATS CONTRAST (Light vs Dark) */ :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-finance .amti-stat-label { color: #475569 !important; font-weight: 600 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-finance .amti-stat-value { color: #0f172a !important; font-weight: 800 !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) #tab-finance .finance-avatar { background: rgba(16, 185, 129, 0.16) !important; color: #047857 !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; } /* ============================================================ CADASTRO HEADER ROW & READONLY METADATA (DATA DE CADASTRO) ============================================================ */ .amti-cadastro-header-row { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 16px !important; width: 100% !important; margin-bottom: 16px; } .amti-cadastro-header-row > .amti-form-group:first-child { flex: 1 1 auto !important; min-width: 0 !important; margin-bottom: 0 !important; } .amti-cadastro-header-row > .amti-cadastro-meta-group { flex: 0 0 200px !important; min-width: 175px !important; max-width: 220px !important; margin-bottom: 0 !important; } .amti-readonly-input { background-color: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: var(--text-secondary, #94a3b8) !important; font-weight: 500 !important; cursor: default !important; user-select: text !important; letter-spacing: 0.02em; } .amti-readonly-input:focus { outline: none !important; border-color: rgba(255, 255, 255, 0.18) !important; box-shadow: none !important; } :is( html[data-theme='light'], html[data-theme='block-light'], html.theme-light, html.theme-block-light, body.theme-light, body.theme-block-light ) .amti-readonly-input { background-color: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.15) !important; color: #475569 !important; } @media (max-width: 640px) { .amti-cadastro-header-row { flex-direction: column !important; gap: 12px !important; } .amti-cadastro-header-row > .amti-form-group:first-child, .amti-cadastro-header-row > .amti-cadastro-meta-group { flex: 1 1 100% !important; max-width: 100% !important; width: 100% !important; min-width: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ PADRONIZAÇÃO UNIVERSAL DE MARGEM INTERNA (PADDING) DE TODOS OS CARDS Regra única do Sistema AMTI: margem interna (superior, inferior, direita e esquerda: 10px) padronizada em todos os cards de todas as páginas do Dashboard (desktop e mobile). ═══════════════════════════════════════════════════════════════════════════ */ :root { --amti-card-padding: 10px; } .amti-card, .amti-grid-card, .os-card, .agenda-card, .ai-tips-live-card, .amti-ai-collapsible-card, .amti-settings-section-card, .amti-settings-hero-card, .amti-settings-card-soft, .amti-settings-card, .amti-settings-footer-card, .amti-soft-card, .amti-stat-card, .amti-finance-balcao-card, .comissao-card, .comissao-stat-card, .comissao-chart-card, .amti-whatsapp-card, .amti-whatsapp-mini-card, .amti-whatsapp-share-card, .amti-flow-summary-card, .pdv-config-card, .pdv-widget-card, .pdv-widget-summary-card, .amti-archive-card, .amti-menu-order-card, .amti-spotlight-card, .amti-home-card, .amti-user-notes-card, .behavior-card, .confidence-mode-card, .dash-plan-card, .finance-card, .hardware-card, .hardware-card-modern, .shortcut-card, .status-card, .toggle-card, .card, .zn-card, #tab-home .amti-card, #tab-home .amti-grid-card, #tab-home .os-card, #tab-home .agenda-card, #tab-home .ai-tips-live-card, #tab-home .pdv-widget-card, #tab-home .amti-dashboard-grid .amti-grid-card, #tab-home .amti-dashboard-grid .amti-card, #tab-orders .os-card, #tab-orders .amti-grid-card, #tab-orders #activeOsCard, #tab-orders #finalizedOsArchiveCard, #tab-agenda .amti-grid-card, #tab-agenda .agenda-card, #tab-agenda .os-card, #tab-cadastros .amti-card, #tab-cadastros .amti-settings-card-soft, #tab-cadastros .amti-soft-card, #tab-cadastros .amti-settings-shell, #tab-cadastros > .amti-card.amti-settings-shell, #tab-clients .amti-card, #tab-equipments .amti-card, #tab-stock .amti-card, #tab-services .amti-card, #tab-suppliers .amti-card, #tab-finance .amti-card, #tab-finance .amti-stat-card, #tab-finance .amti-finance-balcao-card, #tab-ai-advisor .amti-card, #tab-ai-advisor .amti-grid-card, #tab-ai-advisor .amti-ai-collapsible-card, #tab-settings .amti-card, #tab-settings .amti-settings-section-card, #tab-settings .amti-settings-section-grid > .amti-settings-card-soft, #tab-settings .amti-settings-hero-card, #tab-settings .amti-settings-footer-card, #tab-company .amti-card, #tab-company .amti-settings-shell, #tab-whatsapp .amti-card, #tab-whatsapp .amti-whatsapp-card, #tab-comissao-tecnica .amti-card, #tab-comissao-tecnica .comissao-stat-card, #tab-comissao-tecnica .comissao-chart-card, #tab-sales .amti-card, #tab-sales .pdv-config-card, #tab-sales .pdv-widget-card, #tab-sales .pdv-widget-summary-card { padding: 10px !important; } /* Cards recolhidos / colapsáveis (Gerente Virtual de IA) */ .amti-ai-collapsible-card, #tab-ai-advisor .amti-ai-collapsible-card { padding: 10px !important; } .amti-ai-collapsible-card .amti-card-header, #tab-ai-advisor .amti-ai-collapsible-card .amti-card-header { padding: 6px 10px !important; margin: 0 !important; } .amti-ai-collapsible-card .amti-card-body, #tab-ai-advisor .amti-ai-collapsible-card .amti-card-body { padding: 10px !important; margin-top: 8px !important; } /* Cards menores de Configurações e Cadastros */ .amti-settings-section-grid > .amti-settings-card-soft, .amti-settings-card-soft, .amti-soft-card { padding: 10px !important; } /* ═══════════════════════════════════════════════════════════════════════════ CONTROLE FINANCEIRO / FLUXO DE CAIXA: PADRONIZAÇÃO COMPLETA DE CARDS - Cards de lançamentos padronizados em 10px universal - Cabeçalho padronizado entre cards normais e colapsáveis (Lançamento de Contas e Balcão/TI) - Alinhamento de valores e colunas idênticos ao restante do sistema - Efeito blur ao clicar nos cards para privacidade ═══════════════════════════════════════════════════════════════════════════ */ #tab-finance .amti-stat-card { padding: 10px !important; display: flex !important; align-items: center !important; gap: 10px !important; cursor: pointer !important; user-select: none !important; min-height: 64px !important; box-sizing: border-box !important; transition: transform 0.18s ease, box-shadow 0.18s ease !important; } #tab-finance .amti-stat-icon { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; font-size: 1.1rem !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: var(--radius-md, 8px) !important; flex-shrink: 0 !important; align-self: center !important; } #tab-finance .amti-stat-info { display: flex !important; flex-direction: column !important; justify-content: space-between !important; flex: 1 1 auto !important; min-width: 0 !important; min-height: 48px !important; } #tab-finance .amti-stat-label { font-size: 0.76rem !important; line-height: 1.25 !important; min-height: 2.5em !important; max-height: 2.5em !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-bottom: 4px !important; color: var(--text-secondary, #94a3b8) !important; } #tab-finance .amti-stat-value { margin-top: auto !important; display: block !important; white-space: nowrap !important; font-size: 1.15rem !important; font-weight: 700 !important; line-height: 1.2 !important; transition: filter 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; will-change: filter, opacity; } /* Efeito Blur ao clicar nos cards de resumo financeiro */ .amti-summary-grid.amti-cards-blurred .amti-stat-card .amti-stat-value, .amti-summary-grid.amti-cards-blurred .amti-stat-value, .amti-stat-card.amti-card-blurred .amti-stat-value, .amti-stat-card.is-blurred .amti-stat-value, #tab-finance.amti-values-blurred .amti-stat-value, #tab-finance .amti-stat-card.amti-card-blurred .amti-stat-value, #tab-finance .amti-stat-card.is-blurred .amti-stat-value, #tab-finance .amti-stat-card.amti-cards-blurred .amti-stat-value, #tab-finance .amti-stat-value.amti-blurred { filter: blur(8px) !important; opacity: 0.45 !important; user-select: none !important; pointer-events: none !important; } /* Cards de lançamentos: regra unificada idêntica para todos os cards de finanças */ #tab-finance .amti-card, #tab-finance .amti-finance-balcao-card { padding: 10px !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-block: 0 !important; box-sizing: border-box !important; border-radius: var(--radius-lg, 14px) !important; } /* Cabeçalho unificado para todos os cards de lançamentos de finanças */ #tab-finance .amti-card > .amti-card-header, #tab-finance .amti-card > .os-card-header, #tab-finance .amti-finance-balcao-card > .amti-card-header, #tab-finance .amti-finance-balcao-card > .os-card-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 0 0 10px 0 !important; margin: 0 0 10px 0 !important; border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important; min-height: 40px !important; box-sizing: border-box !important; cursor: pointer; } /* Quando o card colapsável de finanças estiver recolhido (body oculto) */ #tab-finance .amti-finance-balcao-card:has(.amti-finance-card-body.collapsed) > .amti-card-header, #tab-finance .amti-finance-balcao-card:has(.amti-finance-card-body.collapsed) > .os-card-header, #tab-finance .amti-finance-balcao-card.is-collapsed > .amti-card-header, #tab-finance .amti-finance-balcao-card.is-collapsed > .os-card-header, #tab-finance .amti-finance-balcao-card:has(.amti-finance-card-body[style*="display: none"]) > .amti-card-header, #tab-finance .amti-finance-balcao-card:has(.amti-finance-card-body[style*="display:none"]) > .amti-card-header, #tab-finance .amti-finance-balcao-card:has(.amti-finance-card-body[style*="display: none"]) > .os-card-header, #tab-finance .amti-finance-balcao-card:has(.amti-finance-card-body[style*="display:none"]) > .os-card-header { padding: 0 !important; margin: 0 !important; border-bottom: none !important; } /* Corpo do card de finanças (gráfico balcão / TI / etc.) */ #tab-finance .amti-finance-balcao-card .amti-finance-card-body { padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column !important; gap: 10px !important; box-sizing: border-box !important; } /* Forçar desaparecimento absoluto quando recolhido */ #tab-finance .amti-finance-balcao-card .amti-finance-card-body.collapsed, #tab-finance .amti-finance-balcao-card .amti-finance-card-body[style*="display: none"], #tab-finance .amti-finance-balcao-card .amti-finance-card-body[style*="display:none"], #tab-finance .amti-finance-balcao-card.is-collapsed .amti-finance-card-body { display: none !important; } #tab-finance .amti-finance-chart-toolbar { padding: 0 !important; margin: 0 !important; } #tab-finance .amti-finance-chart-frame { padding: 0 !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; } /* Tabela de lançamentos: alinhamento perfeito de bordas e células com 10px */ #tab-finance #financeTableContainer, #tab-finance .amti-table-container.amti-finance-list { padding: 0 !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; } #tab-finance #financeTableContainer th, #tab-finance #financeTableContainer td, #tab-finance .amti-finance-list th, #tab-finance .amti-finance-list td { padding: 8px 10px !important; font-size: 0.85rem !important; line-height: 1.25 !important; vertical-align: middle !important; white-space: nowrap !important; } #tab-finance #financeTableContainer th:first-child, #tab-finance #financeTableContainer td:first-child, #tab-finance .amti-finance-list th:first-child, #tab-finance .amti-finance-list td:first-child { padding-left: 2px !important; } #tab-finance #financeTableContainer th:last-child, #tab-finance #financeTableContainer td:last-child, #tab-finance .amti-finance-list th:last-child, #tab-finance .amti-finance-list td:last-child { padding-right: 2px !important; } /* Card expansível de personalização de mensagens WhatsApp */ .amti-whatsapp-templates-card { padding: 0 !important; overflow: hidden; border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.16) !important; background: var(--bg-card, rgba(15, 23, 42, 0.65)) !important; transition: all 0.25s ease; } .amti-whatsapp-templates-card:hover { border-color: rgba(59, 130, 246, 0.35) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } .amti-whatsapp-accordion-header { width: 100%; display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 0 !important; background: transparent !important; border: none !important; cursor: pointer; text-align: left; transition: background-color 0.2s ease; box-sizing: border-box; min-height: 40px; } .amti-whatsapp-accordion-header:hover { background: rgba(255, 255, 255, 0.04) !important; } .amti-whatsapp-accordion-header[aria-expanded="true"] { border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important; background: rgba(255, 255, 255, 0.02) !important; } .amti-whatsapp-accordion-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } .amti-whatsapp-accordion-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 10px; background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.1) 100%); border: 1px solid rgba(59, 130, 246, 0.32); color: #60a5fa; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: transform 0.2s ease, background 0.2s ease; } .amti-whatsapp-accordion-header:hover .amti-whatsapp-accordion-icon { transform: scale(1.05); background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.2) 100%); color: #93c5fd; } .amti-whatsapp-accordion-text { display: flex; flex-direction: column; gap: 5px !important; min-width: 0; } .amti-whatsapp-accordion-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary, #f8fafc); letter-spacing: -0.01em; } .amti-whatsapp-accordion-subtitle { font-size: 0.8rem; color: var(--text-secondary, #94a3b8); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .amti-whatsapp-accordion-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .amti-whatsapp-accordion-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.18); font-size: 0.76rem; font-weight: 500; color: var(--text-secondary, #cbd5e1); } .amti-whatsapp-accordion-chevron-wrap { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-secondary, #94a3b8); transition: all 0.25s ease; } .amti-whatsapp-accordion-header:hover .amti-whatsapp-accordion-chevron-wrap { background: rgba(255, 255, 255, 0.08); color: var(--text-primary, #f8fafc); border-color: rgba(255, 255, 255, 0.15); } .amti-whatsapp-accordion-chevron { font-size: 0.82rem; transition: transform 0.25s ease; } .amti-whatsapp-accordion-header[aria-expanded="true"] .amti-whatsapp-accordion-chevron { transform: rotate(180deg); } @media (max-width: 640px) { .amti-whatsapp-accordion-subtitle { display: none; } .amti-whatsapp-accordion-badge { display: none; } .amti-whatsapp-accordion-header { padding: 12px 14px !important; } } html[data-theme='light'] .amti-whatsapp-templates-card { background: #ffffff !important; border-color: #e2e8f0 !important; } html[data-theme='light'] .amti-whatsapp-accordion-header:hover { background: rgba(0, 0, 0, 0.03) !important; } html[data-theme='light'] .amti-whatsapp-accordion-title { color: #1e293b; } html[data-theme='light'] .amti-whatsapp-accordion-subtitle { color: #64748b; } html[data-theme='light'] .amti-whatsapp-accordion-badge { background: #f1f5f9; border-color: #cbd5e1; color: #475569; } html[data-theme='light'] .amti-whatsapp-accordion-chevron-wrap { background: #f8fafc; border-color: #e2e8f0; color: #64748b; } /* ═══════════════════════════════════════════════════════════════════════════ PADRÃO UNIVERSAL PARA TODOS OS CARDS RECOLHIDOS DO DASHBOARD (Finanças, OS Ativas / Arquivo, Gerente Virtual IA, Integração WhatsApp, etc.) ═══════════════════════════════════════════════════════════════════════════ */ /* 1. Estado recolhido universal: formato compacto preservando 100% o estilo e cor nativos do tema */ .amti-card.is-collapsed, .amti-finance-balcao-card.is-collapsed, .amti-finance-balcao-card:has(.amti-finance-card-body.collapsed), .amti-finance-balcao-card:has(.amti-finance-card-body[style*="display: none"]), .amti-finance-balcao-card:has(.amti-finance-card-body[style*="display:none"]), #tab-orders #finalizedOsArchiveCard[data-collapsed="true"], #tab-orders #activeOsCard[data-collapsed="true"], #finalizedOsArchiveCard[data-collapsed="true"], #activeOsCard[data-collapsed="true"], #aiAdvisorPromptCard[data-collapsed="true"], #aiAdvisorWhatsAppCard[data-collapsed="true"], .amti-ai-collapsible-card[data-collapsed="true"], .amti-whatsapp-templates-card:has(.amti-whatsapp-accordion-header.is-collapsed), .amti-whatsapp-templates-card:has(#whatsappMessageTemplatesBody[style*="display: none"]), .amti-whatsapp-templates-card:has(#whatsappMessageTemplatesBody[style*="display:none"]) { min-height: 48px !important; height: auto !important; max-height: none !important; flex: 0 0 auto !important; padding: 10px !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-block: 0 !important; box-sizing: border-box !important; cursor: pointer !important; user-select: none !important; overflow: visible !important; } /* 2. Cabeçalho zerado dentro do card recolhido para garantir formato compacto */ .amti-card.is-collapsed > .amti-card-header, .amti-card.is-collapsed > .os-card-header, .amti-finance-balcao-card.is-collapsed > .amti-card-header, .amti-finance-balcao-card.is-collapsed > .os-card-header, .amti-finance-balcao-card:has(.amti-finance-card-body.collapsed) > .amti-card-header, .amti-finance-balcao-card:has(.amti-finance-card-body.collapsed) > .os-card-header, .amti-finance-balcao-card:has(.amti-finance-card-body[style*="display: none"]) > .amti-card-header, .amti-finance-balcao-card:has(.amti-finance-card-body[style*="display:none"]) > .amti-card-header, .amti-finance-balcao-card:has(.amti-finance-card-body[style*="display: none"]) > .os-card-header, .amti-finance-balcao-card:has(.amti-finance-card-body[style*="display:none"]) > .os-card-header, #tab-orders #finalizedOsArchiveCard[data-collapsed="true"] > .os-card-header, #tab-orders #finalizedOsArchiveCard[data-collapsed="true"] > .amti-card-header, #tab-orders #activeOsCard[data-collapsed="true"] > .os-card-header, #tab-orders #activeOsCard[data-collapsed="true"] > .amti-card-header, #finalizedOsArchiveCard[data-collapsed="true"] > .os-card-header, #finalizedOsArchiveCard[data-collapsed="true"] > .amti-card-header, #activeOsCard[data-collapsed="true"] > .os-card-header, #activeOsCard[data-collapsed="true"] > .amti-card-header, #aiAdvisorPromptCard[data-collapsed="true"] > .amti-card-header, #aiAdvisorPromptCard[data-collapsed="true"] > .os-card-header, #aiAdvisorWhatsAppCard[data-collapsed="true"] > .amti-card-header, #aiAdvisorWhatsAppCard[data-collapsed="true"] > .os-card-header, .amti-ai-collapsible-card[data-collapsed="true"] > .amti-card-header, .amti-ai-collapsible-card[data-collapsed="true"] > .os-card-header, .amti-whatsapp-templates-card:has(#whatsappMessageTemplatesBody[style*="display: none"]) > .amti-whatsapp-accordion-header, .amti-whatsapp-templates-card:has(#whatsappMessageTemplatesBody[style*="display:none"]) > .amti-whatsapp-accordion-header, .amti-whatsapp-templates-card:has(.amti-whatsapp-accordion-header.is-collapsed) > .amti-whatsapp-accordion-header { padding: 0 !important; margin: 0 !important; border-bottom: none !important; min-height: 38px !important; height: auto !important; background: transparent !important; } /* 3. Ocultação absoluta do corpo dos cards recolhidos */ .amti-card.is-collapsed > .amti-card-body, .amti-finance-balcao-card.is-collapsed > .amti-finance-card-body, .amti-finance-balcao-card > .amti-finance-card-body.collapsed, .amti-finance-balcao-card > .amti-finance-card-body[style*="display: none"], .amti-finance-balcao-card > .amti-finance-card-body[style*="display:none"], #tab-orders #finalizedOsArchiveCard[data-collapsed="true"] > #finalizedOsArchiveBody, #tab-orders #activeOsCard[data-collapsed="true"] > #activeOsBody, #finalizedOsArchiveCard[data-collapsed="true"] > #finalizedOsArchiveBody, #activeOsCard[data-collapsed="true"] > #activeOsBody, #aiAdvisorPromptCard[data-collapsed="true"] > #aiAdvisorPromptCardBody, #aiAdvisorWhatsAppCard[data-collapsed="true"] > #aiAdvisorWhatsAppCardBody, .amti-ai-collapsible-card[data-collapsed="true"] > .amti-card-body, .amti-whatsapp-templates-card:has(.amti-whatsapp-accordion-header.is-collapsed) > #whatsappMessageTemplatesBody, .amti-whatsapp-templates-card:has(#whatsappMessageTemplatesBody[style*="display: none"]) > #whatsappMessageTemplatesBody, .amti-whatsapp-templates-card:has(#whatsappMessageTemplatesBody[style*="display:none"]) > #whatsappMessageTemplatesBody { display: none !important; } /* 4. Padronização universal da distância entre cards: Usa exatamente a mesma distância entre os cards superiores (lateral e inferior) e o card de lançamento de contas (gap: 12px sem margens adicionais acumuladas) */ #tab-finance > .amti-summary-grid, #tab-finance .amti-summary-grid { gap: var(--rf-card-gap, 12px) !important; column-gap: var(--rf-card-gap, 12px) !important; row-gap: var(--rf-card-row-gap, 12px) !important; } #tab-finance > .amti-summary-grid > :is(.amti-stat-card, .amti-card, .amti-grid-card) { margin: 0 !important; } #tab-finance > .amti-summary-grid, #tab-finance > .amti-card, #tab-finance .amti-card, #tab-finance .amti-finance-balcao-card { margin-top: 0 !important; margin-bottom: 0 !important; margin-block: 0 !important; } /* Card de Variáveis Dinâmicas do WhatsApp dentro de Personalizar Mensagens */ .amti-whatsapp-variables-card, .amti-whatsapp-variables-card.is-collapsed, .amti-whatsapp-variables-card[data-collapsed="true"], #whatsappVariablesCard, #whatsappVariablesCard.is-collapsed, #whatsappVariablesCard[data-collapsed="true"] { margin-top: 10px !important; margin-bottom: 14px !important; margin-block: 10px 14px !important; padding: 10px !important; border-radius: var(--radius-lg, 12px) !important; box-sizing: border-box !important; } .amti-whatsapp-variables-card.is-collapsed, .amti-whatsapp-variables-card[data-collapsed="true"] { min-height: 48px !important; height: auto !important; flex: 0 0 auto !important; padding: 10px !important; cursor: pointer !important; user-select: none !important; } .amti-whatsapp-variables-card.is-collapsed > .os-card-header, .amti-whatsapp-variables-card.is-collapsed > .amti-card-header, .amti-whatsapp-variables-card[data-collapsed="true"] > .os-card-header, .amti-whatsapp-variables-card[data-collapsed="true"] > .amti-card-header { padding: 0 !important; margin: 0 !important; border-bottom: none !important; min-height: 38px !important; } .amti-whatsapp-variables-card:not(.is-collapsed):not([data-collapsed="true"]) > .os-card-header, .amti-whatsapp-variables-card:not(.is-collapsed):not([data-collapsed="true"]) > .amti-card-header { padding: 0 0 10px 0 !important; margin: 0 0 10px 0 !important; border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important; } .amti-whatsapp-variables-card.is-collapsed > .amti-card-body, .amti-whatsapp-variables-card[data-collapsed="true"] > .amti-card-body { display: none !important; }