:root {
            --bg-primary: #f8fafc;
            --bg-secondary: #ffffff;
            --bg-sidebar: #0f172a;
            --bg-card: #ffffff;
            --bg-hover: #f1f5f9;
            --bg-input: #f8fafc;
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-sidebar: #cbd5e1;
            --text-sidebar-active: #ffffff;
            --border-color: #e2e8f0;
            --border-strong: #cbd5e1;
            --border-sidebar: #1e293b;
            --bg-sidebar-hover: rgba(255,255,255,0.06);
            --bg-sidebar-active: linear-gradient(90deg, rgba(59,130,246,0.2), rgba(16,185,129,0.1));
            --text-tertiary: #64748b;
            --text-sidebar-muted: #64748b;
            --shadow: 0 1px 2px rgba(15,23,42,0.05), 0 3px 10px rgba(15,23,42,0.06);
            --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 2px 6px rgba(15,23,42,0.05);
            --shadow-md: 0 2px 4px rgba(15,23,42,0.05), 0 10px 24px rgba(15,23,42,0.09);
            --shadow-lg: 0 4px 8px rgba(15,23,42,0.06), 0 18px 36px rgba(15,23,42,0.12);
            --shadow-xl: 0 20px 25px rgba(15,23,42,0.15), 0 10px 10px rgba(15,23,42,0.04);
            --primary: #3b82f6;
            --primary-rgb: 59, 130, 246;
            --primary-light: #dbeafe;
            --primary-lighter: #dbeafe;
            --primary-dark: #2563eb;
            --primary-deeper: #1d4ed8;
            --primary-glow: rgba(59, 130, 246, 0.2);
            --primary-glow-strong: rgba(59, 130, 246, 0.35);
            --success: #059669;
            --success-light: #d1fae5;
            --success-rgb: 16, 185, 129;
            --warning: #d97706;
            --warning-light: #fef3c7;
            --warning-rgb: 245, 158, 11;
            --danger: #ef4444;
            --danger-light: #fee2e2;
            --danger-rgb: 239, 68, 68;
            --info: #3b82f6;
            --info-rgb: 59, 130, 246;
            --purple: #8b5cf6;
            --purple-light: #ede9fe;
            --chart-bg: #ffffff;
            --modal-overlay: rgba(0, 0, 0, 0.6);
            --transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            --whatsapp: #25D366;
            --glass-bg: rgba(255, 255, 255, 0.75);
            --glass-border: rgba(255, 255, 255, 0.4);
            --success-text: #047857;
            --warning-text: #b45309;
            --danger-text: #b91c1c;
            --calor-rgb: 59, 130, 246;
        }
        [data-theme="dark"] {
            --bg-primary: #020617;
            --bg-secondary: #0f172a;
            --bg-sidebar: #000000;
            --bg-card: #0f172a;
            --bg-card-solid: #0f172a;
            --bg-card-hover: #1e293b;
            --bg-hover: #1e293b;
            --bg-input: #0f172a;
            --text-primary: #f1f5f9;
            --text-secondary: #cbd5e1;
            --text-sidebar: #cbd5e1;
            --text-sidebar-active: #ffffff;
            --border-color: #1e293b;
            --border-strong: #334155;
            --border-color-light: #334155;
            --border-sidebar: #1e293b;
            --bg-sidebar-hover: rgba(255,255,255,0.04);
            --bg-sidebar-active: linear-gradient(90deg, rgba(59,130,246,0.25), rgba(16,185,129,0.15));
            --text-tertiary: #64748b;
            --text-sidebar-muted: #64748b;
            --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 4px 14px rgba(0,0,0,0.28);
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 3px 10px rgba(0,0,0,0.22);
            --shadow-md: 0 2px 4px rgba(0,0,0,0.35), 0 12px 28px rgba(0,0,0,0.4);
            --shadow-lg: 0 4px 8px rgba(0,0,0,0.4), 0 20px 40px rgba(0,0,0,0.5);
            --shadow-xl: 0 20px 25px rgba(0,0,0,0.6);
            --primary-light: rgba(59,130,246,0.15);
            --primary-lighter: rgba(59,130,246,0.15);
            --primary-glow: rgba(59, 130, 246, 0.2);
            --primary-glow-strong: rgba(59, 130, 246, 0.35);
            --success-light: rgba(16,185,129,0.15);
            --warning-light: rgba(245,158,11,0.15);
            --danger-light: rgba(239,68,68,0.15);
            --purple-light: rgba(139,92,246,0.15);
            --chart-bg: #0f172a;
            --modal-overlay: rgba(0, 0, 0, 0.6);
            --glass-bg: #0f172a;
            --glass-border: #1e293b;
            --glass-highlight: #1e293b;
            /* Contraste no tema escuro: verdes/amarelos vivos leem bem no fundo escuro; linhas das tabelas um tom mais claras */
            --success: #10b981;
            --warning: #f59e0b;
            --text-tertiary: #94a3b8;
            --border-color: #273449;
            --success-text: #34d399;
            --warning-text: #fbbf24;
            --danger-text: #f87171;
            --calor-rgb: 96, 165, 250;
        }
        /* ========== DARK MODE OVERRIDES ========== */
        [data-theme="dark"] #sellerDrawer {
            background: var(--bg-secondary);
            border-left-color: var(--border);
        }

        /* ========== DARK BACKGROUND ========== */
        [data-theme="dark"] select, [data-theme="dark"] input { color-scheme: dark; }  /* ícone e calendário dos campos de data legíveis no escuro */
        [data-theme="dark"] select option { background: #0f172a; color: #f1f5f9 !important; }
        [data-theme="dark"] select optgroup { background: #0f172a; color: #f1f5f9; }
        [data-theme="dark"] body {
            background: var(--bg-primary);
            min-height: 100vh;
        }

        [data-theme="dark"] .sidebar {
            position: fixed;
            background: var(--bg-sidebar);
            border-right: 1px solid var(--border-sidebar);
            box-shadow: none;
        }
        [data-theme="dark"] .sidebar-header {
            border-bottom-color: rgba(255, 255, 255, 0.06);
        }
        [data-theme="dark"] .sidebar-footer {
            border-top-color: rgba(255, 255, 255, 0.06);
        }
        [data-theme="dark"] .topbar h1 {
            color: #ffffff;
            -webkit-text-fill-color: #ffffff;
        }
        [data-theme="dark"] .kpi-icon {
            background: var(--bg);
            box-shadow: none;
        }
        [data-theme="dark"] .pagination-controls button {
            background: var(--bg-secondary);
            border-color: var(--border);
        }
        [data-theme="dark"] .pagination-controls button:hover:not(:disabled) {
            background: var(--bg-hover);
            border-color: var(--primary);
        }
        [data-theme="dark"] .pagination-controls button.active {
            background: var(--primary);
            border-color: var(--primary);
            box-shadow: none;
        }
        [data-theme="dark"] .btn-primary {
            box-shadow: 0 1px 3px rgba(0,0,0,0.15);
        }
        [data-theme="dark"] .btn-primary:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        [data-theme="dark"] .online-user-item {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.06);
        }
        [data-theme="dark"] .report-stat {
            background: var(--bg);
        }
        [data-theme="dark"] .progress-bar {
            background: rgba(255, 255, 255, 0.055);
        }


        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: var(--font); background: var(--bg-primary); color: var(--text-primary); display: flex; min-height: 100vh; overflow-x: hidden; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-xs); }
        ::-webkit-scrollbar-thumb:hover { background: var(--primary); }

        /* LOGIN */
        #loginScreen { display: flex; position: fixed; top:0; left:0; right:0; bottom:0; background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); z-index: 9999; align-items: center; justify-content: center; overflow: hidden; }
        #loginScreen::before { content: ''; position: absolute; top: -150px; right: -150px; width: 400px; height: 400px; background: #3b82f6; border-radius: 50%; filter: blur(80px); opacity: 0.3; animation: blobFloat 8s ease-in-out infinite; pointer-events: none; }
        #loginScreen::after { content: ''; position: absolute; bottom: -150px; left: -150px; width: 400px; height: 400px; background: #10b981; border-radius: 50%; filter: blur(80px); opacity: 0.3; animation: blobFloat 8s ease-in-out 4s infinite; pointer-events: none; }
        @keyframes blobFloat { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px, 20px) scale(1.1); } }
        @keyframes loginOrbs { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(20px, -15px) scale(1.05); } }
.login-box { background: rgba(255,255,255,0.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); padding: 32px; border-radius: var(--radius-xl); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); width: 100%; max-width: 420px; position: relative; overflow: hidden; margin: 16px; z-index: 1; }
        .login-box::before { display: none; }
        .login-box::after { display: none; }
        .login-box h2 { text-align: center; margin-bottom: 8px; font-size: 30px; font-weight: 700; letter-spacing: -0.5px; position: relative; z-index: 1; }
        .login-box h2 .crm-label { color: rgba(255,255,255,0.5); font-weight: 600; }
        .login-box h2 .blumen-label { background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .login-box > * { position: relative; z-index: 1; }
        #loginStatus { text-align: center; font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 12px; min-height: 20px; }
        #loginStatus.error { color: var(--danger); }
        #loginStatus.success { color: var(--success); }
        .login-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-right: 6px; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .login-btn-wrap { position: relative; }
        .login-btn-wrap .btn { width: 100%; margin-top: 8px; }
        .login-btn-wrap .btn:disabled { opacity: 0.7; cursor: wait; }

        /* SIDEBAR */
        .sidebar { width: 260px; background: var(--bg-sidebar); color: var(--text-sidebar); display: none; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; transition: background 0.4s ease, border-color 0.4s ease; overflow-y: auto; scrollbar-gutter: stable; border-right: 1px solid var(--border-sidebar); }
        .sidebar-header { padding: 20px; border-bottom: 1px solid var(--border-sidebar); display: flex; align-items: center; justify-content: space-between; }
        .sidebar-header h2 { font-size: var(--fs-md); font-weight: 600; color: #ffffff; letter-spacing: -0.5px; }
        .sidebar-header h2 span { background: linear-gradient(135deg, #3b82f6, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .sidebar-toggle { background: none; border: none; color: var(--text-primary); font-size: var(--fs-2xl); cursor: pointer; display: none; padding: 8px 10px; border-radius: var(--radius); min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, color 0.3s ease; }
        .sidebar-toggle:hover { background: var(--bg-hover); }
        @media (min-width: 769px) { .sidebar-toggle { display: none !important; } }
        @media (max-width: 768px) { .sidebar-toggle { display: flex; } }
        /* Overlay escuro ao abrir sidebar no mobile */
        .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 98; backdrop-filter: blur(4px); }
        .sidebar-overlay.active { display: block; }
        .sidebar-nav { padding: 8px 0; flex: 1; }
        .nav-item { display: flex; align-items: center; padding: 11px 16px; margin: 2px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1); font-size: var(--fs-sm); font-weight: 500; gap: 12px; color: var(--text-sidebar); text-decoration: none; position: relative; letter-spacing: 0.01em; }
        .nav-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: var(--primary); border-radius: 0 2px 2px 0; transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
        .nav-item:hover { background: var(--bg-sidebar-hover); color: var(--text-sidebar-active); }
        .nav-item:hover::before { height: 14px; }
        .nav-item.active { background: var(--bg-sidebar-active); color: var(--text-sidebar-active); border-color: rgba(59,130,246,0.3); }
        .nav-item.active::before { height: 16px; }
        .nav-item .icon { font-size: var(--fs-lg); width: 22px; text-align: center; opacity: 0.75; transition: opacity 0.25s ease; }
        .nav-item:hover .icon, .nav-item.active .icon { opacity: 1; }
        .nav-item.active .icon { color: var(--primary); }
        .nav-item .badge { margin-left: auto; background: rgba(255,255,255,0.1); color: var(--text-sidebar); padding: 2px 10px; border-radius: var(--radius-lg); font-size: var(--fs-2xs); font-weight: 600; }
        .nav-item.active .badge { background: rgba(59,130,246,0.4); color: white; }
        .sidebar-footer { padding: 12px; border-top: 1px solid var(--border-sidebar); display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); }
        .theme-toggle { background: rgba(255,255,255,0.04); border: 1px solid transparent; color: var(--text-sidebar); width: 34px; height: 34px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-md); transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; display: flex; align-items: center; justify-content: center; }
        .theme-toggle:hover { background: rgba(255,255,255,0.08); color: var(--text-sidebar-active); }

        /* MAIN */
        .main { margin-left: 260px; width: calc(100vw - 260px); min-width: 0; padding: 28px 36px; min-height: 100vh; display: none; position: relative; z-index: 1; overflow-x: hidden; overflow-y: scroll; transition: width 0.35s cubic-bezier(0.4,0,0.2,1); }
        .main.drawer-open { width: calc(100vw - 260px - 380px); }
        .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
        .topbar h1 { font-size: 26px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.5px; }
        .topbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
        .search-global { display: flex; align-items: center; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 0 14px; box-shadow: var(--shadow); transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .search-global:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow), var(--shadow-md); }
        .search-global input { border: none; background: transparent; padding: 10px 8px; font-size: var(--fs-sm); outline: none; color: var(--text-primary); min-width: 220px; font-family: var(--font); }
        .search-global input::placeholder { color: var(--text-secondary); }
        .search-global i { color: var(--text-secondary); font-size: var(--fs-sm); }

        .btn { padding: 9px 20px; border: none; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); text-decoration: none; letter-spacing: 0.01em; }
        .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; position: relative; overflow: hidden; }
        .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent); opacity: 0; transition: opacity 0.25s ease; }
        .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px var(--primary-glow-strong), 0 0 0 1px var(--primary) inset; }
        .btn-primary:hover::before { opacity: 1; }
        .btn-success { background: linear-gradient(135deg, var(--success), #059669); color: #fff; }
        .btn-success:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2); }
        .btn-danger { background: linear-gradient(135deg, var(--danger), #dc2626); color: #fff; }
        .btn-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35); }
        .btn-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); }
        .btn-outline:hover { background: var(--bg-hover); border-color: var(--primary); color: var(--primary); }
        .btn-sm { padding: 6px 14px; font-size: var(--fs-xs); }
        .btn-icon { padding: 6px 10px; font-size: var(--fs-sm); background: transparent; border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
        .btn-icon:hover { background: var(--bg-sidebar-hover); color: var(--primary); border-color: var(--primary); }
        .btn-wa { color: var(--whatsapp); border-color: var(--whatsapp); }
        .btn-wa:hover { background: var(--whatsapp); color: #fff; }

        /* PAGINAÇÃO */
        .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 4px; border-top: 1px solid var(--border-color); margin-top: 12px; flex-wrap: wrap; gap: 8px; }
        .pagination-info { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--text-secondary); }
        .pagination-info select { padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-size: var(--fs-xs); background: var(--bg-input); }
        .pagination-controls { display: flex; align-items: center; gap: 4px; }
        .pagination-controls button { padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-card); font-size: var(--fs-xs); cursor: pointer; transition: var(--transition); color: var(--text-primary); }
        .pagination-controls button:hover:not(:disabled) { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
        .pagination-controls button.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
        .pagination-controls button:disabled { opacity: 0.4; cursor: not-allowed; }
        .btn-nav { font-size: var(--fs-xs) !important; }

        /* STATUS BADGES extra */
        .status-prospect { background: rgba(59,130,246,0.1); color: #0284c7; }
        .status-lovatel { background: rgba(139,92,246,0.1); color: #7c3aed; }
        .status-contact { background: rgba(14,165,233,0.1); color: #0284c7; }

        /* CARDS */
        .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 22px 26px; box-shadow: var(--shadow); transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; max-width: 100%; overflow: hidden; }
        .card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
        .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 8px; }
        .card-header h3 { font-size: var(--fs-lg); font-weight: 600; display: flex; align-items: center; letter-spacing: -0.2px; }
        .card-header .subtitle { font-size: var(--fs-sm); color: var(--text-secondary); }

        /* GRID */
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
        .grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; }
        .grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
        .grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }

        /* KPI */
        .kpi-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow); transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; cursor: pointer; position: relative; overflow: hidden; }
        .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #3b82f6, #10b981); border-radius: 12px 12px 0 0; opacity: 0; transition: opacity 0.3s ease; }
        .kpi-card::after { content: ''; position: absolute; top: 0; right: 0; width: 120px; height: 120px; background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
        .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
        .kpi-card:hover::before { opacity: 1; }
        .kpi-card:hover::after { opacity: 0.2; }
        .kpi-label { font-size: var(--fs-2xs); color: var(--text-secondary); font-weight: 600; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.6px; }
        .kpi-value { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.5px; }
        .kpi-change { font-size: var(--fs-2xs); margin-top: 8px; color: var(--success); display: flex; align-items: center; gap: 4px; font-weight: 500; }
        .kpi-change.negative { color: var(--danger); }
        .kpi-icon { font-size: var(--fs-xl); margin-bottom: 10px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--primary-light); color: var(--primary); }

        /* TABLE */
        .table-container { overflow-x: auto; }
        table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
        table th { text-align: left; padding: 12px 14px; font-weight: 600; color: var(--text-secondary); border-bottom: 2px solid var(--border-color); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.7px; cursor: pointer; user-select: none; white-space: nowrap; background: transparent; }
        table th:hover { color: var(--primary); }
        table td { padding: 12px 14px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
        table tr { transition: background 0.2s ease; }
        table tbody tr:hover td { background: var(--bg-hover); }
        table .actions { display: flex; gap: 6px; }
        .status-badge { padding: 4px 14px; border-radius: 20px; font-size: var(--fs-2xs); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0.01em; }
        .status-prospeccao { background: rgba(59,130,246,0.1); color: #3b82f6; }
        .status-qualificacao { background: var(--primary-light); color: var(--primary); }
        .status-proposta { background: rgba(245,158,11,0.1); color: #975a16; }
        .status-negociacao { background: rgba(249,115,22,0.1); color: #ea580c; }
        .status-fechado { background: rgba(16,185,129,0.1); color: #059669; }
        .status-perdido { background: rgba(239,68,68,0.1); color: #dc2626; }
        .status-ativo { background: rgba(16,185,129,0.1); color: #059669; }
        .status-inativo { background: rgba(239,68,68,0.1); color: #dc2626; }
        .status-pendente { background: rgba(245,158,11,0.1); color: #975a16; }
        .status-concluido { background: rgba(16,185,129,0.1); color: #059669; }
        .status-cancelado { background: rgba(100,116,139,0.1); color: #64748b; }

        .prazo-overdue { color: var(--danger) !important; font-weight: 600; }
        .prazo-soon { color: var(--warning) !important; }
        .prazo-ok { color: var(--success) !important; }

        .empty-state { text-align: center; padding: 36px 20px; color: var(--text-secondary); }
        .empty-state .icon { font-size: 40px; margin-bottom: 10px; opacity: 0.25; }
        .empty-state p { font-size: var(--fs-sm); opacity: 0.7; }

        /* FORMS */
        .form-group { margin-bottom: 16px; }
        .form-group label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; letter-spacing: 0.02em; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: var(--fs-sm); background: var(--bg-input); color: var(--text-primary); transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1); font-family: var(--font); }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
        .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-secondary); opacity: 0.7; }
        .form-group textarea { resize: vertical; min-height: 80px; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color); }

        /* MODAL */
        .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--modal-overlay); display: none; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(8px); padding: 20px; }
        .modal-overlay.open { display: flex; }
        .modal { background: var(--bg-card); border-radius: var(--radius-lg); width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 70px rgba(0,0,0,0.25); padding: 30px 32px; animation: modalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid var(--border-color); }
        @keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } }
        .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
        .modal-header h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.3px; }
        .modal-close { background: none; border: none; font-size: var(--fs-xl); cursor: pointer; color: var(--text-secondary); padding: 6px 10px; border-radius: var(--radius-sm); transition: color 0.25s ease, background 0.25s ease; }
        .modal-close:hover { background: var(--danger); color: #fff; box-shadow: 0 0 16px rgba(239, 68, 68, 0.3); }

        /* FUNNEL / KANBAN */
        .funnel { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 12px 0; }
        .funnel-stage { min-width: 180px; flex: 1; background: var(--bg-primary); border-radius: var(--radius); padding: 14px 16px; border: 1px solid var(--border-color); transition: background 0.2s, border-color 0.2s; min-height: 120px; }
        .funnel-stage h4 { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.3px; display: flex; align-items: center; justify-content: space-between; }
        .funnel-stage h4 .stage-total { font-size: var(--fs-2xs); color: var(--primary); font-weight: 600; }
        .funnel-stage.drag-over { background: rgba(59,130,246,0.05); border-color: rgba(59,130,246,0.4); box-shadow: none; }
        .funnel-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; cursor: grab; transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow); position: relative; }
        .funnel-card:hover { border-color: rgba(255, 255, 255, 0.1); box-shadow: var(--shadow-md); transform: translateY(-1px); }
        .funnel-card:active { cursor: grabbing; }
        .funnel-card.dragging { opacity: 0.4; transform: rotate(2deg); border-style: dashed; }
        .funnel-card .funnel-value { font-weight: 600; font-size: var(--fs-md); }
        .funnel-card .funnel-company { font-size: var(--fs-xs); color: var(--text-secondary); }
        .funnel-card .funnel-time { font-size: var(--fs-3xs); color: var(--text-secondary); margin-top: 4px; opacity: 0.7; }
        .funnel-card .funnel-time i { margin-right: 3px; }
        .funnel-drop-placeholder { border: 2px dashed var(--primary); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; background: rgba(59,130,246,0.04); min-height: 50px; }

        /* PAGINATION */
        .pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 0 4px; flex-wrap: wrap; }
        .pagination button { min-width: 32px; height: 32px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); font-size: var(--fs-sm); cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; }
        .pagination button:hover { border-color: var(--primary); background: rgba(59,130,246,0.06); }
        .pagination button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
        .pagination button:disabled { opacity: 0.4; cursor: default; }
        .pagination .page-info { font-size: var(--fs-xs); color: var(--text-secondary); margin: 0 8px; }

        /* REPORTS (charts) */
        .chart-container { width: 100%; height: 260px; position: relative; padding: 8px 4px 4px 4px; border-radius: var(--radius); }
        .chart-container canvas { display: block; }
        [data-theme="dark"] .chart-container { background: var(--bg-secondary); border-radius: var(--radius-lg); box-shadow: none; }
        .chart-container.doughnut-container { height: 300px; }
        .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
        .card-header h3 { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); display: flex; align-items: center; letter-spacing: -0.2px; }
        [data-theme="dark"] .card-header h3 { color: var(--text-primary); }
        .card-header .text-muted { font-size: var(--fs-xs); color: var(--text-secondary); }
        .kpi-icon { transition: background 0.3s ease, transform 0.2s ease; }
        .kpi-card:hover .kpi-icon { transform: scale(1.08); }
        .kpi-icon.icon-success { background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.22)) !important; }
        .kpi-icon.icon-warning { background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.22)) !important; }
        .kpi-icon.icon-danger  { background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.22)) !important; }
        .kpi-icon.icon-info    { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.22)) !important; }
        .kpi-icon.icon-default { background: linear-gradient(135deg, var(--primary-light), var(--primary-lighter)); }
        [data-theme="dark"] .kpi-icon.icon-success { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.25)) !important; }
        [data-theme="dark"] .kpi-icon.icon-warning { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.25)) !important; }
        [data-theme="dark"] .kpi-icon.icon-danger  { background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.25)) !important; }
        .report-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
        .report-stat { padding: 12px 16px; background: var(--bg-primary); border-radius: var(--radius); }
        .report-stat .label { font-size: var(--fs-xs); color: var(--text-secondary); }
        .report-stat .value { font-size: var(--fs-xl); font-weight: 700; }

        /* NOTIFICATION TOAST */

        /* FILTERS */
        .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; padding: 12px 16px; background: var(--bg-primary); border-radius: var(--radius); border: 1px solid var(--border-color); flex: 1; min-width: 0; }
        .filter-bar select, .filter-bar input { padding: 7px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: var(--fs-sm); background: var(--bg-input); color: var(--text-primary); }
        .filter-bar select:focus, .filter-bar input:focus { outline: none; border-color: var(--primary); }
        .filter-bar .filter-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
        /* Dashboard date filter - inputs within blue banner */
        #dashPeriodo option { color: var(--text-primary); background: var(--bg-secondary); }
        #dashDateInicio::-webkit-calendar-picker-indicator, #dashDateFim::-webkit-calendar-picker-indicator { filter: invert(1) brightness(2); cursor: pointer; }
        @media (max-width: 768px) {
            #welcomeBanner { flex-direction: column; align-items: flex-start; }
            #welcomeBanner > div:last-child { width: 100%; }
        }

        /* CONTACT SECTIONS */
        .contact-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 10px 16px; border-radius: var(--radius); }
        .contact-section-header.hoje { background: var(--primary-light); border: 1px solid rgba(59,130,246,0.2); }
        .contact-section-header.anteriores { background: var(--bg-primary); border: 1px solid var(--border-color); margin-top: 16px; }
        .contact-section-title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); font-weight: 600; }
        .contact-section-title.hoje-title { color: var(--primary); }
        .contact-section-title.anteriores-title { color: var(--text-secondary); }
        .contact-section-count { padding: 3px 10px; border-radius: var(--radius); font-size: var(--fs-2xs); font-weight: 600; }
        .contact-section-count.hoje { background: var(--primary); color: #fff; }
        .contact-section-count.anteriores { background: var(--bg-hover); color: var(--text-secondary); }
        .contact-section-meta { display: flex; align-items: center; gap: 16px; font-size: var(--fs-xs); color: var(--text-secondary); }
        .contact-section-meta strong { color: var(--primary); font-weight: 600; }
        .contact-section-empty { padding: 20px; text-align: center; color: var(--text-secondary); font-size: var(--fs-sm); }

        /* NOTIFICATION */
        .notification-container { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
        .notification { padding: 14px 20px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 0 8px 30px rgba(0,0,0,0.15); animation: slideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); font-weight: 500; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
        .notification.success { border-left: 4px solid var(--success); }
        .notification.error { border-left: 4px solid var(--danger); }
        .notification.info { border-left: 4px solid var(--info); }
        .notification.success:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 0 20px rgba(16,185,129,0.12); }
        .notification.error:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 0 20px rgba(239,68,68,0.2); }
        .notification.info:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 0 20px rgba(59,130,246,0.2); }
        @keyframes slideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

        /* RESPONSIVE */
        @media (max-width: 1024px) {
            .grid-4, .grid-5 { grid-template-columns: 1fr 1fr; }
            .grid-2-1 { grid-template-columns: 1fr; }
        }
        /* ====== MOBILE DRAWER ====== */
        /* FIX: regras movidas de .drawer-overlay para .seller-overlay — antes as duas
           seções CSS disputavam a mesma classe e o overlay nunca ficava visível
           ('active' dava display:block mas visibility:hidden vinha da outra regra). */
        .seller-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 199; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
        .seller-overlay.active { display: block; }
        .mobile-drawer-btn { font-size: var(--fs-xs) !important; padding: 7px 12px !important; white-space: nowrap; }
        /* O botão "Desempenho" aparece em todas as larguras (o painel começa fechado) */
        /* Opp view toggle */
        .opp-view-toggle { background: transparent; color: var(--text-secondary); }
        .opp-view-toggle.active { background: var(--primary); color: #fff; }
        .opp-view-toggle:not(.active):hover { background: var(--bg-hover); color: var(--text-primary); }

        @media (max-width: 768px) {
            .sidebar { width: 0; overflow: hidden; }
            .sidebar.open { width: 280px; position: fixed; z-index: 999; height: 100vh; left: 0; top: 0; }
            .sidebar .nav-item span:not(.icon) { display: none; }
            .sidebar.open .nav-item span:not(.icon) { display: inline; }
            .sidebar .nav-item .badge { display: none; }
            .sidebar.open .nav-item .badge { display: inline; }
            .sidebar-header h2 { display: none; }
            .sidebar.open .sidebar-header h2 { display: block; }
            .sidebar-footer { flex-direction: column; gap: 6px; padding: 10px; }
            .sidebar-footer span { display: none; }
            .main { margin-left: 0 !important; width: 100vw !important; padding: 16px; }
            .main.drawer-open { width: 100vw !important; }
            /* Drawer: full-width overlay on mobile */
            #sellerDrawer { width: 100vw !important; }
            #sellerDrawer[style*="translateX(100%)"] { transform: translateX(100%) !important; }
            #sellerDrawerToggle { display: none !important; }
            .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr 1fr; }
            .grid-2-1 { grid-template-columns: 1fr; }
            .form-row { grid-template-columns: 1fr; }
            .topbar h1 { font-size: var(--fs-xl); }
            .topbar-actions { width: 100%; }
            .search-global { flex: 1; }
            .search-global input { min-width: 0; width: 100%; }
            .funnel-stage { min-width: 140px; }
            .modal { padding: 20px; margin: 10px; max-width: 100%; }
            /* Mobile improvements */
            .kpi-value { font-size: var(--fs-2xl); }
            .kpi-card { padding: 12px 14px; }
            .card { padding: 14px 16px; }
            .card-header h3 { font-size: var(--fs-md); }
            .filter-bar { padding: 8px 10px; gap: 6px; }
            .filter-bar select, .filter-bar input { font-size: var(--fs-xs); padding: 6px 8px; }
            #welcomeBanner { padding: 14px 16px; }
            #welcomeBanner > div:first-child > i { display: none; }
            #welcomeText { font-size: var(--fs-lg) !important; }
            .btn { padding: 8px 12px; font-size: var(--fs-sm); }
            .btn-sm { padding: 6px 10px; font-size: var(--fs-xs); }
            table { font-size: var(--fs-xs); }
            table th, table td { padding: 8px 6px; }
            .sidebar-toggle { display: flex !important; }
            .mobile-drawer-btn { display: inline-flex !important; }
            #sellerDrawer > div:first-child { flex-wrap: wrap; }
            #sellerDashVendedor { max-width: 100px !important; font-size: var(--fs-3xs) !important; }
            #sellerDashPeriod { font-size: var(--fs-3xs) !important; }
            /* Chart containers */
            .chart-container { height: 220px; }
            .chart-container.doughnut-container { height: 260px; }
            /* Report summary */
            .report-summary { grid-template-columns: 1fr; }
        }
        @media (max-width: 480px) {
            .sidebar { width: 0; overflow: hidden; }
            .sidebar.open { width: 280px; position: fixed; z-index: 999; height: 100vh; left: 0; top: 0; }
            .main { margin-left: 0 !important; width: 100vw !important; padding: 12px; }
            .main.drawer-open { width: 100vw !important; }
            /* Drawer: full-width overlay */
            #sellerDrawer { width: 100vw !important; }
            #sellerDrawerToggle { display: none !important; }
            .topbar { flex-direction: column; align-items: stretch; gap: 8px; }
            .topbar-actions { width: 100%; }
            .search-global input { min-width: 0; width: 100%; }
            .sidebar-toggle { display: flex !important; }
            .mobile-drawer-btn { display: inline-flex !important; }
            .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
            .kpi-value { font-size: var(--fs-xl); }
            .kpi-card { padding: 10px 12px; }
            .kpi-label { font-size: var(--fs-2xs); }
            .card { padding: 12px 14px; }
            .filter-bar { flex-direction: column; align-items: stretch; }
            .filter-bar select, .filter-bar input { width: 100%; }
            .flex-between { flex-direction: column; gap: 8px; align-items: stretch; }
            .flex-between .btn { width: 100%; justify-content: center; }
            table { font-size: var(--fs-2xs); }
            table th, table td { padding: 6px 4px; }
            .modal { padding: 16px; margin: 8px; max-height: 95vh; max-width: 100%; width: calc(100% - 16px); }
            .modal-header h2 { font-size: var(--fs-lg); }
            #welcomeBanner { flex-direction: column !important; align-items: flex-start !important; padding: 12px 14px; }
            #welcomeBanner > div:last-child { width: 100%; flex-direction: column !important; }
            #dashCustomDates { flex-direction: column !important; width: 100%; }
            #dashCustomDates input { width: 100% !important; }
            #dashPeriodo { width: 100%; }
            /* Seller drawer header */
            #sellerDrawer > div:first-child { flex-direction: column; align-items: flex-start; gap: 8px; }
            #sellerDashVendedor, #sellerDashPeriod { max-width: 100% !important; width: 100% !important; }
            .seller-stat-grid { grid-template-columns: 1fr 1fr !important; }
            .chart-container { height: 200px; }
        }
        /* Touch-friendly improvements */
        @media (pointer: coarse) {
            .nav-item { padding: 12px 18px; }
            .btn { min-height: 40px; }
            table th, table td { padding: 10px 8px; }
            .kpi-card { min-height: 70px; }
        }
        /* Online users admin widget */
        .online-users-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 18px 22px; box-shadow: var(--shadow); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
        .online-users-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
        .online-users-card h4 { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
        .online-user-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--primary-light); border-radius: 20px; font-size: var(--fs-xs); font-weight: 600; margin: 3px 4px 3px 0; color: var(--primary); border: 1px solid rgba(59,130,246,0.12); transition: background 0.25s ease, border-color 0.25s ease; }
        .online-user-item .online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: pulse 2s infinite; }
        .online-user-item.is-me { background: rgba(56,161,105,0.1); color: var(--success); }

        /* MISC */
        .flex-between { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; }
        .gap-8 { gap: 8px; }
        .gap-12 { gap: 12px; }
        .mt-12 { margin-top: 12px; }
        .mb-12 { margin-bottom: 12px; }
        .text-center { text-align: center; }
        .text-muted { color: var(--text-secondary); font-size: var(--fs-sm); }
        .hidden { display: none !important; }
        .view { display: none; }
        .view.active { display: block; animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

        /* CUSTOM CONFIRM DIALOG */
        .confirm-overlay { position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.15s ease; }
        .confirm-box { background:var(--bg-card);border-radius:var(--radius-lg);padding:32px 36px;max-width:420px;width:90%;box-shadow:0 25px 70px rgba(0,0,0,0.25);text-align:center;border:1px solid var(--border-color);animation:modalIn 0.25s cubic-bezier(0.4,0,0.2,1); }
        .confirm-box .confirm-icon { font-size:40px;margin-bottom:16px; }
        .confirm-box .confirm-icon.danger { color:var(--danger); filter: drop-shadow(0 0 12px rgba(239,68,68,0.4)); }
        .confirm-box .confirm-icon.warning { color:var(--warning); filter: drop-shadow(0 0 12px rgba(245,158,11,0.4)); }
        .confirm-box .confirm-icon.info { color:var(--info); filter: drop-shadow(0 0 12px rgba(59,130,246,0.4)); }
        .confirm-box h3 { font-size:var(--fs-xl);margin-bottom:8px; }
        .confirm-box p { font-size:var(--fs-md);color:var(--text-secondary);margin-bottom:20px;line-height:1.5; }
        .confirm-box .confirm-actions { display:flex;gap:10px;justify-content:center; }
        .confirm-box .confirm-actions .btn { min-width:100px; }

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

        /* PIPELINE FORECAST */
        .forecast-row { display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border-color); }
        .forecast-row:last-child { border-bottom:none; }
        .forecast-stage { width:100px;font-weight:600;font-size:var(--fs-sm); }
        .forecast-bar { flex:1;height:24px;background:var(--bg-primary);border-radius:var(--radius-sm);overflow:hidden;position:relative; }
        .forecast-fill { height:100%;border-radius:var(--radius-sm);display:flex;align-items:center;padding:0 8px;font-size:var(--fs-2xs);color:#fff;font-weight:600;transition:width 0.5s ease; }
        .forecast-weight { font-size:var(--fs-xs);color:var(--text-secondary);width:70px;text-align:right; }

        /* MESSAGE TEMPLATES */
        .template-card { padding:14px;border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:background 0.25s cubic-bezier(0.4,0,0.2,1),border-color 0.25s cubic-bezier(0.4,0,0.2,1);margin-bottom:8px; }
        .template-card:hover { border-color: var(--primary); box-shadow: 0 0 16px var(--primary-glow); }
        .template-card:hover { border-color:var(--primary);background:var(--primary-light); }
        .template-card h4 { font-size:var(--fs-sm);font-weight:600;margin-bottom:4px; }
        .template-card p { font-size:var(--fs-xs);color:var(--text-secondary);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

        /* BETTER KANBAN CARDS */
        .funnel-card { transition:var(--transition);position:relative;overflow:hidden; }
        .funnel-card:hover { transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.12); }
        .funnel-card .opp-prazo { font-size:var(--fs-3xs);padding:2px 6px;border-radius:var(--radius-xs);display:inline-block;margin-top:3px; }
        .funnel-card .opp-prazo.urgent { background:rgba(239,68,68,0.1);color:var(--danger); }
        .funnel-card .opp-prazo.soon { background:rgba(245,158,11,0.1);color:#975a16; }
        .funnel-card .opp-prazo.ok { background:rgba(16,185,129,0.1);color:var(--success); }
        .funnel-card .opp-objections { display:flex;gap:3px;flex-wrap:wrap;margin-top:3px; }
        .funnel-card .objection-tag { font-size:var(--fs-3xs);padding:1px 5px;border-radius:var(--radius-xs);background:var(--primary-light);color:var(--primary); }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        .clickable { cursor: pointer; }
        .tag { display: inline-block; padding: 2px 10px; border-radius: var(--radius-lg); font-size: var(--fs-2xs); font-weight: 600; background: var(--primary-light); color: var(--primary); }
        .progress-bar { height: 6px; background: var(--bg-primary); border-radius: var(--radius); overflow: hidden; margin-top: 4px; }
        .progress-bar .fill { height: 100%; border-radius: var(--radius); background: var(--primary); transition: width 0.6s ease; }
        .admin-only { display: none; }
        .admin-exclusive { display: none; }
    
        .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
        .card-header h3 { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); display: flex; align-items: center; letter-spacing: -0.2px; }
        [data-theme="dark"] .card-header h3 { color: var(--text-primary); }
        .card-header .text-muted { font-size: var(--fs-xs); color: var(--text-secondary); }
        .kpi-icon { transition: background 0.3s ease, transform 0.2s ease; }
        .kpi-card:hover .kpi-icon { transform: scale(1.08); }
        .kpi-icon.icon-success { background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.22)) !important; }
        .kpi-icon.icon-warning { background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.22)) !important; }
        .kpi-icon.icon-danger  { background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.22)) !important; }
        .kpi-icon.icon-info    { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.22)) !important; }
        .kpi-icon.icon-default { background: linear-gradient(135deg, var(--primary-light), var(--primary-lighter)); }
        [data-theme="dark"] .kpi-icon.icon-success { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.25)) !important; }
        [data-theme="dark"] .kpi-icon.icon-warning { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.25)) !important; }
        [data-theme="dark"] .kpi-icon.icon-danger  { background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.25)) !important; }
        [data-theme="dark"] .card:has(.chart-container):hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
        
        /* ========== KANBAN BOARD ========== */
        .kanban-toggle { margin-left: 8px; }
        .kanban-board { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 12px 0; min-height: 300px; }
        .kanban-col { min-width: 200px; flex: 1; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; transition: border-color 0.25s ease; }
        .kanban-col.drag-over { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), 0 0 12px var(--primary-glow); }
        .kanban-col-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
        .kanban-col-title { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
        .kanban-col-count { font-size: var(--fs-2xs); font-weight: 600; background: var(--primary-light); color: var(--primary); padding: 1px 8px; border-radius: var(--radius); }
        .kanban-col-value { font-size: var(--fs-xs); color: var(--text-secondary); font-weight: 600; letter-spacing: -0.2px; }
        .kanban-cards { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
        .kanban-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px; cursor: grab; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; position: relative; }
        .kanban-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(59,130,246,0.2); }
        .kanban-card.dragging { opacity: 0.5; transform: rotate(2deg); }
        .kanban-card-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 6px; line-height: 1.3; }
        .kanban-card-company { font-size: var(--fs-2xs); color: var(--text-secondary); margin-bottom: 8px; }
        .kanban-card-footer { display: flex; justify-content: space-between; align-items: center; }
        .kanban-card-value { font-size: var(--fs-sm); font-weight: 600; color: var(--primary); }
        .kanban-card-date { font-size: var(--fs-3xs); color: var(--text-secondary); }
        .kanban-card-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
        .kanban-card:hover .kanban-card-actions { opacity: 1; }
        /* Kanban interaction register buttons */
        [data-kanban-reg] { transition: all 0.15s; }
        [data-kanban-reg]:hover { transform: scale(1.08); filter: brightness(1.15); }
        [data-theme="dark"] .kanban-col { background: var(--bg-secondary); border-color: var(--border); }
        [data-theme="dark"] .kanban-card { background: var(--bg); border-color: var(--border); }
        [data-theme="dark"] .kanban-card:hover { border-color: var(--primary); }

        /* ========== SPOTLIGHT SEARCH ========== */
        .spotlight-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 5000; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; }
        .spotlight-overlay.open { display: flex; }
        .spotlight-box { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-xl); width: 560px; max-width: 92vw; box-shadow: 0 25px 60px rgba(0,0,0,0.3); overflow: hidden; }
        [data-theme="dark"] .spotlight-box { background: var(--bg-secondary); border-color: var(--border); box-shadow: var(--shadow-xl); }
        .spotlight-input-wrap { display: flex; align-items: center; padding: 16px 20px; gap: 12px; border-bottom: 1px solid var(--border-color); }
        .spotlight-input-wrap i { color: var(--primary); font-size: var(--fs-xl); }
        .spotlight-input { flex: 1; border: none; background: none; font-size: var(--fs-lg); color: var(--text-primary); outline: none; font-family: var(--font); }
        .spotlight-input::placeholder { color: var(--text-secondary); }
        .spotlight-kbd { font-size: var(--fs-2xs); color: var(--text-secondary); background: var(--bg-primary); border: 1px solid var(--border-color); padding: 2px 8px; border-radius: var(--radius-xs); font-family: var(--font); }
        .spotlight-results { max-height: 380px; overflow-y: auto; padding: 8px; }
        .spotlight-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius); cursor: pointer; transition: background 0.15s ease; }
        .spotlight-item:hover, .spotlight-item.active { background: var(--primary-light); }
        .spotlight-item-icon { width: 36px; height: 36px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); flex-shrink: 0; }
        .spotlight-item-body { flex: 1; min-width: 0; }
        .spotlight-item-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .spotlight-item-sub { font-size: var(--fs-2xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .spotlight-item-type { font-size: var(--fs-3xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
        .spotlight-empty { text-align: center; padding: 40px 20px; color: var(--text-secondary); font-size: var(--fs-sm); }
        .spotlight-footer { padding: 10px 16px; border-top: 1px solid var(--border-color); display: flex; gap: 16px; font-size: var(--fs-2xs); color: var(--text-secondary); }
        .spotlight-footer kbd { background: var(--bg-primary); border: 1px solid var(--border-color); padding: 1px 6px; border-radius: var(--radius-xs); font-size: var(--fs-3xs); font-family: var(--font); margin: 0 2px; }

        /* ========== CONTACT TIMELINE ========== */
        .timeline { position: relative; padding-left: 28px; }
        .timeline::before { content: ''; position: absolute; left: 10px; top: 4px; bottom: 4px; width: 2px; background: var(--border-color); border-radius: 1px; }
        .timeline-item { position: relative; padding-bottom: 16px; }
        .timeline-item:last-child { padding-bottom: 0; }
        .timeline-dot { position: absolute; left: -24px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg-secondary); z-index: 1; }
        .timeline-dot.comm-email { background: #3b82f6; }
        .timeline-dot.comm-phone { background: #10b981; }
        .timeline-dot.comm-whatsapp { background: #25D366; }
        .timeline-dot.comm-meeting { background: #f59e0b; }
        .timeline-dot.comm-task { background: #64748b; }
        .timeline-dot.comm-opp { background: #0284c7; }
        .timeline-dot.comm-sale { background: #2563eb; }
        .timeline-content { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px 14px; }
        .timeline-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
        .timeline-type { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
        .timeline-date { font-size: var(--fs-2xs); color: var(--text-secondary); }
        .timeline-body { font-size: var(--fs-sm); color: var(--text-primary); line-height: 1.5; }
        .timeline-detail { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 4px; }
        .timeline-empty { text-align: center; padding: 30px; color: var(--text-secondary); font-size: var(--fs-sm); }

        /* ========== SELLER DASHBOARD ========== */
        .seller-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
        .seller-stat { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 14px 12px; text-align: center; transition: background 0.2s ease, border-color 0.2s ease; }
        .seller-stat-value { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); line-height: 1.2; }
        .seller-stat-label { font-size: var(--fs-3xs); color: var(--text-secondary); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
        .seller-stat-change { font-size: var(--fs-3xs); margin-top: 3px; font-weight: 600; }
        .seller-stat-change.up { color: var(--success); }
        .seller-stat-change.down { color: var(--danger); }
        @media (max-width: 1100px) { .seller-stat-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 640px) { .seller-stat-grid { grid-template-columns: 1fr; } }

        /* ========== DUPLICATE DETECTION ========== */
        .dup-alert { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.15); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 10px; }
        .dup-alert i { color: #f59e0b; font-size: var(--fs-lg); margin-top: 2px; }
        .dup-alert-title { font-size: var(--fs-sm); font-weight: 600; color: #f59e0b; margin-bottom: 4px; }
        .dup-alert-body { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; }
        .dup-alert-body strong { color: var(--text-primary); }
        .dup-link { color: var(--primary); cursor: pointer; text-decoration: underline; font-weight: 600; }


        
    /* Drag-and-drop reorder para metas na dashboard */
    .meta-drag-item { transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: grab; }
    .meta-drag-item:active { cursor: grabbing; }
    .meta-drag-item.dragging { opacity: 0.5; transform: scale(0.97); }
    .meta-drag-over { border-top: 2px solid var(--primary) !important; }

    /* ====== CSV Import Styles ====== */
    .csv-import-summary { font-size: var(--fs-sm); }
    .csv-import-stats { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
    .csv-stat-card {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        padding: 10px 16px;
        text-align: center;
        min-width: 80px;
        flex: 1;
    }
    .csv-stat-value { font-size: var(--fs-2xl); font-weight: 700; color: var(--primary); line-height: 1.1; }
    .csv-stat-label { font-size: var(--fs-3xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; font-weight: 600; }
    .csv-stat-new .csv-stat-value { color: var(--success); }
    .csv-stat-dup .csv-stat-value { color: var(--warning); }
    .csv-stat-err .csv-stat-value { color: var(--danger); }
    .csv-import-result { font-size: var(--fs-md); line-height: 1.6; padding: 4px 0; }
    .csv-import-result strong { font-size: var(--fs-xl); }

    /* ====== CONTACT DRAWER ====== */
    .drawer-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;backdrop-filter:blur(2px); }
    .drawer-overlay.open { opacity:1;visibility:visible; }
    .drawer { position:fixed;top:0;right:0;width:460px;max-width:92vw;height:100vh;background:var(--bg-secondary);z-index:1001;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(0,0,0,.25); }
    .drawer.open { transform:translateX(0); }
    .drawer-header { display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border-color);flex-shrink:0; }
    .drawer-header h3 { font-size:var(--fs-lg);font-weight:600;margin:0;display:flex;align-items:center;gap:10px; }
    .drawer-close { background:none;border:none;color:var(--text-secondary);font-size:var(--fs-xl);cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:background .15s; }
    .drawer-close:hover { background:var(--bg-primary);color:var(--text-primary); }
    .drawer-body { flex:1;overflow-y:auto;padding:0; }
    .drawer-section { padding:16px 20px;border-bottom:1px solid var(--border-color); }
    .drawer-section:last-child { border-bottom:none; }
    .drawer-section-title { font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:10px;display:flex;align-items:center;gap:6px; }
    .drawer-info-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
    .drawer-info-item { font-size:var(--fs-sm); }
    .drawer-info-item .label { color:var(--text-secondary);font-size:var(--fs-2xs);margin-bottom:2px; }
    .drawer-info-item .value { font-weight:600;word-break:break-all; }
    .drawer-actions { display:flex;gap:6px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--border-color);flex-shrink:0; }
    .drawer-opp-card { background:var(--bg-primary);border-radius:var(--radius);padding:10px 12px;margin-bottom:6px;border-left:3px solid var(--primary);cursor:pointer;transition:background .15s; }
    .drawer-opp-card:hover { background:var(--bg-secondary); }
    .drawer-opp-card .opp-name { font-weight:600;font-size:var(--fs-sm);margin-bottom:3px; }
    .drawer-opp-card .opp-meta { font-size:var(--fs-2xs);color:var(--text-secondary);display:flex;gap:8px;flex-wrap:wrap; }
    .drawer-sale-card { background:var(--bg-primary);border-radius:var(--radius);padding:10px 12px;margin-bottom:6px;border-left:3px solid var(--success); }
    .drawer-sale-card .sale-meta { font-size:var(--fs-2xs);color:var(--text-secondary);display:flex;gap:8px;flex-wrap:wrap;margin-top:3px; }
    .drawer-timeline-item { display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-color);font-size:var(--fs-xs); }
    .drawer-timeline-item:last-child { border-bottom:none; }
    .drawer-timeline-dot { width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0; }
    .drawer-empty { text-align:center;padding:20px;color:var(--text-secondary);font-size:var(--fs-sm); }
    .drawer-badge { display:inline-block;padding:2px 8px;border-radius:var(--radius);font-size:var(--fs-2xs);font-weight:600; }

    /* ====== EXPANDABLE ROW (Opção B) ====== */
    .expand-row-opp-table { width:100%;border-collapse:collapse;font-size:var(--fs-xs);margin:0; }
    .expand-row-opp-table th { text-align:left;padding:6px 10px;font-size:var(--fs-3xs);font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--border-color);background:var(--bg-primary); }
    .expand-row-opp-table td { padding:6px 10px;border-bottom:1px solid var(--border-color); }
    .expand-row-opp-table tr:last-child td { border-bottom:none; }
    .expand-row-container td { padding:0 !important;background:var(--bg-primary); }
    .expand-row-inner { max-height:0;overflow:hidden;transition:max-height .3s ease; }
    .expand-row-inner.open { max-height:600px;overflow-y:auto; }
    .btn-expand { background:none;border:none;cursor:pointer;color:var(--primary);font-size:var(--fs-xs);padding:2px 6px;border-radius:var(--radius-xs);transition:background .15s,transform .2s; }
    .btn-expand:hover { background:var(--bg-primary); }
    .btn-expand.open { transform:rotate(90deg); }

    /* ====== REPORTS TABLE ====== */
    .report-table { width:100%; border-collapse:collapse; font-size:var(--fs-xs); }
    .report-table th, .report-table td { border:1px solid var(--border-color); padding:6px 8px; }
    .report-table th { background:var(--bg-primary); font-weight:600; text-align:center; white-space:nowrap; }
    .report-table td { text-align:center; }
    .report-table td:first-child { text-align:left; }
    .report-total-row { background:var(--bg-primary) !important; }
    .report-pct-ok { color:var(--success,#16a34a) !important; font-weight:600; }
    .report-pct-warn { color:var(--warning,#d97706) !important; font-weight:600; }
    .report-pct-low { color:var(--danger,#dc2626) !important; font-weight:600; }
    #view-reports .card { overflow-x:auto; }


/* =====================================================================
   Relatórios v2 (assets/js/relatorios.js)
   ===================================================================== */
.rpt-toolbar { display: flex; flex-direction: column; gap: 10px; }
.rpt-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.rpt-tab { border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); padding: 6px 12px; border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s; }
.rpt-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.rpt-tab.ativo { background: var(--primary); border-color: var(--primary); color: #fff; }
.rpt-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rpt-actions select { max-width: 220px; }
.rpt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.rpt-kpi { padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-input); }
.rpt-kpi.clicavel { cursor: pointer; }
.rpt-kpi.clicavel:hover, .rpt-kpi.clicavel:focus-visible { border-color: var(--primary); outline: none; }
.rpt-kpi.ativo { box-shadow: 0 0 0 2px var(--primary); }
.rpt-kpi-label { font-size: var(--fs-2xs); color: var(--text-secondary); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.rpt-kpi-valor { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.rpt-kpi-sub { font-size: var(--fs-2xs); color: var(--text-secondary); margin-top: 4px; }
.rpt-delta { font-weight: 600; }
.rpt-delta.up { color: var(--success); }
.rpt-delta.down { color: var(--danger); }
.rpt-info { display: inline-flex; width: 14px; height: 14px; border-radius: 50%; border: 1px solid currentColor; font-size: var(--fs-3xs); font-weight: 600; align-items: center; justify-content: center; cursor: help; opacity: 0.7; font-style: normal; flex-shrink: 0; }
.rpt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; }
.rpt-bloco { margin-bottom: 18px; }
.rpt-bloco h4 { font-size: var(--fs-sm); font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; color: var(--text-primary); }
.rpt-canvas { position: relative; width: 100%; }
.rpt-tabela th, .rpt-tabela td { text-align: center; }
.rpt-tabela th:first-child, .rpt-tabela td:first-child { text-align: left; }
.rpt-tabela td.num { text-align: right; white-space: nowrap; }
.rpt-tabela .rpt-sep { border-left: 2px solid var(--border-color); }
.rpt-tabela th.rpt-grupo { text-align: center; letter-spacing: 0.04em; }
.rpt-resumo-tab td:first-child { white-space: nowrap; }
.rpt-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.rpt-link:hover { text-decoration: underline; }
.rpt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.rpt-badge { display: inline-block; padding: 2px 7px; border-radius: var(--radius); color: #fff; font-size: var(--fs-3xs); font-weight: 600; white-space: nowrap; margin: 1px 0; }
.rpt-nota { font-size: var(--fs-2xs); color: var(--text-secondary); margin: 8px 0; line-height: 1.5; }
.rpt-funil { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 6px 0 20px; }
.rpt-funil-passo { min-width: 190px; color: #fff; border-radius: var(--radius); padding: 10px 14px; text-align: center; font-size: var(--fs-sm); }
.rpt-funil-passo strong { font-size: var(--fs-xl); margin-right: 4px; }
.rpt-funil-passo.clicavel { cursor: pointer; }
.rpt-funil-conv { font-size: var(--fs-xs); color: var(--text-secondary); padding: 2px 0; }
.rpt-piv-ctrl { flex-wrap: wrap; margin-bottom: 6px; }
.rpt-piv-ctrl label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-secondary); }
.rpt-trunc { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left !important; }
.rpt-dest { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px; font-size: var(--fs-sm); max-height: 180px; overflow: auto; padding: 4px 0; }
.rpt-periodo-label { font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: 12px; }
.rpt-periodo-label span { opacity: 0.8; }
.rpt-print-head { display: none; }
#rptFiltros { flex-wrap: wrap; }
@media screen and (max-width: 768px) {
    .rpt-grid { grid-template-columns: 1fr; }
    .rpt-kpis { grid-template-columns: repeat(2, 1fr); }
    .rpt-kpi-valor { font-size: var(--fs-xl); }
    .rpt-tab { flex: 1 1 auto; }
    #rptFiltros > select, #rptFiltros > input, #rptFiltros > button { flex: 0 0 auto; }
    #rptFiltros > input { max-width: none !important; }
    .rpt-actions select { max-width: none; flex: 1 1 100%; }
}
.rpt-print-foot { display: none; }
/* Durante a preparação da impressão, a troca de tema é instantânea (sem transições pela metade no papel) */
body.rpt-imprimindo, body.rpt-imprimindo *, body.rpt-imprimindo *::before, body.rpt-imprimindo *::after { transition: none !important; animation: none !important; }

/* ---------------------------------------------------------------------
   Impressão / PDF dos relatórios — A4, papel branco, visual limpo.
   O tamanho e a orientação da página (retrato/paisagem) são definidos
   pelo relatorios.js conforme a largura das tabelas.
   --------------------------------------------------------------------- */
@media print {
    html { background: #fff !important; }
    body.rpt-imprimindo {
        --bg-primary: #fff; --bg-secondary: #fff; --bg-card: #fff; --bg-input: #fff; --bg-hover: #fff;
        --text-primary: #111827; --text-secondary: #4b5563; --border-color: #d1d5db;
        background: #fff !important; color: #111827 !important;
        font-family: 'Inter', Arial, Helvetica, sans-serif; font-size: 9pt; line-height: 1.35;
    }
    body.rpt-imprimindo::before, body.rpt-imprimindo::after { display: none !important; }
    body.rpt-imprimindo *, body.rpt-imprimindo *::before, body.rpt-imprimindo *::after {
        box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        -webkit-print-color-adjust: economy; print-color-adjust: economy;
    }

    /* Só o relatório vai para o papel */
    body.rpt-imprimindo .sidebar, body.rpt-imprimindo .topbar, body.rpt-imprimindo .rpt-toolbar,
    body.rpt-imprimindo #sellerDrawer, body.rpt-imprimindo #sellerDrawerToggle, body.rpt-imprimindo .sidebar-overlay,
    body.rpt-imprimindo .seller-overlay, body.rpt-imprimindo .notification-container, body.rpt-imprimindo .rpt-periodo-label,
    body.rpt-imprimindo .rpt-piv-ctrl, body.rpt-imprimindo .rpt-col-acao, body.rpt-imprimindo .rpt-so-tela, body.rpt-imprimindo .rpt-info,
    body.rpt-imprimindo .modal-overlay, body.rpt-imprimindo .drawer, body.rpt-imprimindo .drawer-overlay,
    body.rpt-imprimindo .spotlight-overlay, body.rpt-imprimindo #loginScreen, body.rpt-imprimindo .empty-state .icon { display: none !important; }
    body.rpt-imprimindo .main, body.rpt-imprimindo #view-reports, body.rpt-imprimindo #rptBody {
        margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important;
        background: #fff !important; border: none !important; border-radius: 0 !important; overflow: visible !important;
    }

    /* Cabeçalho e rodapé */
    body.rpt-imprimindo .rpt-print-head { display: block; margin: 0 0 5mm; padding-bottom: 3mm; border-bottom: 1.2pt solid #111827; }
    body.rpt-imprimindo .rpt-ph-topo { display: flex; justify-content: space-between; gap: 4mm; font-size: 7pt; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; }
    body.rpt-imprimindo .rpt-ph-marca { font-weight: 700; color: #111827; letter-spacing: 0.14em; }
    body.rpt-imprimindo .rpt-print-head h1 { font-size: 17pt; font-weight: 700; margin: 2mm 0 1.5mm; color: #111827; letter-spacing: -0.01em; }
    body.rpt-imprimindo .rpt-ph-meta { display: flex; flex-wrap: wrap; gap: 1mm 6mm; font-size: 8pt; color: #374151; }
    body.rpt-imprimindo .rpt-ph-meta b { font-weight: 600; color: #6b7280; }
    body.rpt-imprimindo .rpt-print-foot { display: block; margin-top: 6mm; padding-top: 2mm; border-top: 0.5pt solid #d1d5db; font-size: 7pt; color: #9ca3af; text-align: center; }

    /* Indicadores */
    body.rpt-imprimindo .rpt-kpis { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 2.5mm !important; margin: 0 0 5mm !important; }
    body.rpt-imprimindo.rpt-paisagem .rpt-kpis { grid-template-columns: repeat(6, 1fr) !important; }
    body.rpt-imprimindo .rpt-kpi { background: #fff !important; border: 0.5pt solid #d1d5db !important; border-radius: 2mm !important; padding: 2.5mm 3mm !important; break-inside: avoid; }
    body.rpt-imprimindo .rpt-kpi-label { font-size: 7pt !important; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280 !important; }
    body.rpt-imprimindo .rpt-kpi-valor { font-size: 13pt !important; color: #111827 !important; padding: 0 !important; }
    body.rpt-imprimindo .rpt-kpi-sub { font-size: 7pt !important; color: #6b7280 !important; }
    body.rpt-imprimindo .rpt-delta.up { color: #15803d !important; }
    body.rpt-imprimindo .rpt-delta.down { color: #b91c1c !important; }

    /* Blocos e gráficos */
    body.rpt-imprimindo .rpt-bloco { margin: 0 0 5mm !important; }
    body.rpt-imprimindo .rpt-bloco h4 { font-size: 10pt !important; font-weight: 700; color: #111827 !important; margin: 0 0 2mm !important; padding-bottom: 1mm; border-bottom: 0.5pt solid #e5e7eb; break-after: avoid; }
    body.rpt-imprimindo .rpt-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 5mm !important; }
    body.rpt-imprimindo .rpt-canvas { height: auto !important; break-inside: avoid; }
    body.rpt-imprimindo .rpt-canvas canvas { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 70mm !important; margin: 0 auto; }
    body.rpt-imprimindo .rpt-funil { margin: 2mm 0 5mm !important; }
    body.rpt-imprimindo .rpt-funil-passo { background: #fff !important; color: #111827 !important; border: 0.8pt solid #9ca3af; border-radius: 1.5mm !important; padding: 2mm 3mm !important; }

    /* Tabelas: largura da folha, cabeçalho repetido em cada página, linhas finas */
    body.rpt-imprimindo .table-container { overflow: visible !important; max-height: none !important; }
    body.rpt-imprimindo .report-table { width: 100% !important; border-collapse: collapse !important; font-size: 8pt !important; table-layout: auto; }
    body.rpt-imprimindo.rpt-paisagem .report-table { font-size: 7.5pt !important; }
    body.rpt-imprimindo .report-table thead { display: table-header-group; }
    body.rpt-imprimindo .report-table tr { break-inside: avoid; page-break-inside: avoid; }
    body.rpt-imprimindo .report-table th {
        background: #fff !important; color: #374151 !important; font-size: 6.8pt !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
        border: none !important; border-bottom: 1pt solid #111827 !important; padding: 1.6mm 1.8mm !important; white-space: normal !important; vertical-align: bottom;
    }
    body.rpt-imprimindo .report-table td {
        background: #fff !important; color: #111827 !important; border: none !important; border-bottom: 0.4pt solid #e5e7eb !important;
        padding: 1.4mm 1.8mm !important; vertical-align: top; white-space: normal; word-break: normal; overflow-wrap: break-word; hyphens: manual;
    }    body.rpt-imprimindo .report-table td.num { white-space: nowrap !important; font-variant-numeric: tabular-nums; }
    body.rpt-imprimindo .report-table tr, body.rpt-imprimindo .report-table .report-total-row { background: #fff !important; }
    body.rpt-imprimindo .report-table .report-total-row td { font-weight: 700 !important; border-top: 1pt solid #111827 !important; border-bottom: none !important; }
    body.rpt-imprimindo .report-table th.rpt-grupo { border-bottom: 0.5pt solid #9ca3af !important; text-align: center !important; }
    body.rpt-imprimindo .report-table .rpt-sep { border-left: 0.5pt solid #d1d5db !important; }
    body.rpt-imprimindo .rpt-resumo-tab th, body.rpt-imprimindo .rpt-resumo-tab td { text-align: center !important; }
    body.rpt-imprimindo .rpt-resumo-tab th:first-child, body.rpt-imprimindo .rpt-resumo-tab td:first-child { text-align: left !important; white-space: nowrap; }
    body.rpt-imprimindo .report-table.rpt-resumo-tab { font-size: 8.5pt !important; }
    body.rpt-imprimindo .rpt-trunc { max-width: none !important; white-space: normal !important; overflow: visible !important; }
    body.rpt-imprimindo .rpt-link { color: inherit !important; text-decoration: none !important; font-weight: inherit !important; }
    body.rpt-imprimindo .rpt-dot { display: none !important; }
    body.rpt-imprimindo .rpt-badge { background: transparent !important; color: #374151 !important; border: 0.5pt solid #9ca3af; border-radius: 1mm !important; padding: 0 1.5mm !important; font-weight: 500; }
    body.rpt-imprimindo .report-pct-ok { color: #15803d !important; }
    body.rpt-imprimindo .report-pct-warn { color: #b45309 !important; }
    body.rpt-imprimindo .report-pct-low { color: #b91c1c !important; }
    body.rpt-imprimindo .rpt-nota { font-size: 7pt !important; color: #6b7280 !important; }
    body.rpt-imprimindo small { color: #6b7280; }
}
/* =====================================================================
   Melhorias de visualização (out/2026): Início, listas, quadro, janelas,
   relatórios, celular, densidade. Cores via tokens para os dois temas.
   ===================================================================== */
table, .report-table { font-variant-numeric: tabular-nums; }
table td.num, table th.num { text-align: right; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Menu lateral com botões (acessível pelo teclado) */
button.nav-item { width: calc(100% - 20px); border: none; background: transparent; font-family: inherit; text-align: left; }
.nav-item .badge.badge-alerta { background: var(--danger); color: #fff; }

/* Filtros ativos em etiquetas */
.chips-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 12px; }
.chips-filtros:empty { display: none; }
.chip-filtro { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: var(--radius-xl); background: var(--primary-light); color: var(--text-primary); font-size: var(--fs-xs); border: 1px solid rgba(59,130,246,0.3); }
.chip-filtro button { border: none; background: transparent; color: var(--text-secondary); cursor: pointer; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.chip-filtro button:hover { background: rgba(0,0,0,0.08); color: var(--text-primary); }
.chip-limpar { border: none; background: transparent; color: var(--primary); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; padding: 3px 6px; }

/* Contatos */
.th-ordenavel { cursor: pointer; }
.th-ordenavel i { font-size: var(--fs-3xs); margin-left: 4px; opacity: 0.5; }
.th-ordenavel.sort-ativo { color: var(--primary); }
.th-ordenavel.sort-ativo i { opacity: 1; }
.tabela-contatos .ct-linha { cursor: pointer; }
.ct-principal { display: flex; align-items: flex-start; gap: 4px; min-width: 200px; }
.ct-textos { min-width: 0; }
.ct-empresa { font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.ct-nome { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; }
.ct-link { color: var(--text-tertiary); margin-left: 6px; font-size: var(--fs-xs); }
.ct-link:hover { color: var(--primary); }
.ct-vendedor, .ct-quando { font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; }
.ct-opps { border: none; background: var(--success-light); color: var(--success-text); font-weight: 600; font-size: var(--fs-xs); padding: 3px 9px; border-radius: var(--radius); cursor: pointer; white-space: nowrap; font-family: inherit; }
td.idle-ok { color: var(--text-secondary); font-weight: 600; }
td.idle-medio, strong.idle-medio { color: var(--warning-text); font-weight: 600; }
td.idle-alto, strong.idle-alto { color: var(--danger-text); font-weight: 600; }
.btn-icon.btn-icon-perigo:hover { color: var(--danger-text); border-color: var(--danger); }
#hojeCard.hoje-vazio { padding: 0; }
#hojeCard.hoje-vazio .contact-section-empty { padding: 10px 16px; font-size: var(--fs-xs); }

/* Oportunidades: Quadro / Lista */
.opp-modo { display: flex; align-items: center; gap: 0; margin-bottom: 10px; flex-wrap: wrap; }
.opp-modo-btn { border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); padding: 7px 14px; font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.opp-modo-btn:first-child { border-radius: 8px 0 0 8px; }
.opp-modo-btn:nth-child(2) { border-radius: 0 8px 8px 0; border-left: none; }
.opp-modo-btn.ativo { background: var(--primary); border-color: var(--primary); color: #fff; }
.opp-modo-resumo { margin-left: 14px; font-size: var(--fs-xs); color: var(--text-secondary); }
#oppListaCard .card-header { margin-bottom: 8px; }

/* Quadro (kanban) — layout de referência; 7 colunas cabem a partir de ~1280px */
.funnel { gap: 10px; }
.funnel-stage { min-width: 150px; padding: 12px; }
.funnel-card { padding: 10px 12px; }
.funnel-card .funnel-value { padding-right: 46px; }
.kcard-acoes { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; }
.kcard-btn { width: 22px; height: 22px; border: none; background: transparent; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-3xs); cursor: pointer; text-decoration: none; opacity: 0.55; transition: opacity 0.15s, background 0.15s; }
.kcard-btn:hover { opacity: 1; background: var(--bg-hover); }
.kcard-del { color: var(--danger); }
.kcard-op { color: var(--primary); }
.kcard-status { margin-top: 3px; }
.kcard-status .status-badge { font-size: 9.5px; padding: 1px 6px; display: inline-block; }
.kchips { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.kchip { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-3xs); padding: 2px 6px; border-radius: var(--radius); cursor: pointer; font-family: inherit; line-height: 1.4; }
.kchip i { font-size: 8px; }
.kchip-lig { background: rgba(139,92,246,0.1); color: #8b5cf6; border: 1px solid rgba(139,92,246,0.2); }
.kchip-wpp { background: rgba(37,211,102,0.1); color: #25d366; border: 1px solid rgba(37,211,102,0.2); }
.kchip-eml { background: rgba(245,158,11,0.1); color: #f59e0b; border: 1px solid rgba(245,158,11,0.2); }
.kchip:hover { filter: brightness(1.1); }
.kcard-vendedor { font-size: var(--fs-2xs); color: var(--primary); margin-top: 3px; }
.kcard-vendedor i { margin-right: 3px; font-size: var(--fs-3xs); }
.funil-vazio { padding: 8px; font-size: var(--fs-xs); }
.kanban-more { padding: 6px 8px; font-size: var(--fs-2xs); color: var(--text-secondary); text-align: center; border-top: 1px dashed var(--border-color); cursor: pointer; }
.kanban-more:hover { color: var(--primary); }
.cartao-movendo { outline: 2px dashed var(--primary); outline-offset: 1px; }
.funnel-encerrar:empty { display: none; }
/* Janelas em 3 tamanhos, rodapé de botões sempre visível */
.modal.modal-p { max-width: 420px; }
.modal.modal-m { max-width: 640px; }
.modal.modal-g { max-width: 960px; }
.modal .form-actions { position: sticky; bottom: -30px; background: var(--bg-card); margin-bottom: -30px; padding-bottom: 18px; z-index: 2; }
.form-bloco { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 10px 14px 4px; margin: 0 0 12px; }
.form-bloco legend { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); padding: 0 6px; }
.form-detalhes { padding: 10px 14px; }
.form-detalhes summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.form-detalhes[open] summary { margin-bottom: 10px; }
.form-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 0; }
.form-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); cursor: pointer; }
.form-explica { font-size: var(--fs-xs); color: var(--text-secondary); margin: -2px 0 8px; }
.form-dica { display: block; font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 4px; }
.menu-criar { display: grid; gap: 8px; }
.menu-criar button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: var(--fs-md); font-weight: 600; cursor: pointer; text-align: left; }
.menu-criar button i { width: 22px; color: var(--primary); font-size: var(--fs-lg); }
.menu-criar button:hover { background: var(--bg-hover); }

/* Ficha do contato */
.ficha-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.ficha-resumo > div { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 8px 10px; }
.ficha-resumo span { display: block; font-size: var(--fs-2xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.ficha-resumo strong { font-size: var(--fs-md); color: var(--text-primary); }

/* Tela Início */
.ini-escopo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: var(--fs-sm); color: var(--text-secondary); }
.ini-escopo select { max-width: 240px; }
.ini-saudacao { font-size: var(--fs-md); color: var(--text-primary); margin: 0 0 14px; }
.ini-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ini-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px 16px; cursor: pointer; font: inherit; color: inherit; box-shadow: var(--shadow); }
.ini-kpi:hover { border-color: var(--primary); }
.ini-kpi-rot { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.ini-kpi-val { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.15; font-variant-numeric: tabular-nums; }
.ini-kpi-sub { font-size: var(--fs-xs); color: var(--text-secondary); }
.ini-barra { display: block; width: 100%; height: 6px; border-radius: var(--radius-xs); background: var(--bg-hover); overflow: hidden; margin: 4px 0 2px; }
.ini-barra span { display: block; height: 100%; background: var(--success); border-radius: var(--radius-xs); }
.ini-delta { font-weight: 600; }
.ini-delta.up { color: var(--success-text); }
.ini-delta.down { color: var(--danger-text); }
.ini-nota { font-size: var(--fs-xs); color: var(--text-secondary); margin: 8px 0 14px; }
.ini-grade { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.ini-coluna { display: grid; gap: 14px; }
.ini-grade .card-header h3 i, .ini-equipe .card-header h3 i { color: var(--primary); margin-right: 6px; }
.ini-cont { background: var(--bg-hover); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 600; padding: 2px 10px; border-radius: var(--radius); }
.agenda-lista { list-style: none; margin: 0; padding: 0; }
.agenda-item { display: flex; align-items: center; gap: 12px; padding: 10px 0 10px 12px; border-bottom: 1px solid var(--border-color); border-left: 4px solid var(--border-strong); }
.agenda-item:last-child { border-bottom: none; }
.agenda-item.agenda-atrasado { border-left-color: var(--danger); }
.agenda-item.agenda-hoje { border-left-color: var(--warning); }
.agenda-texto { flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.agenda-texto strong { color: var(--text-primary); font-size: var(--fs-md); }
.agenda-sub { font-size: var(--fs-xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-tag { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.agenda-atrasado .agenda-tag { color: var(--danger-text); }
.agenda-hoje .agenda-tag { color: var(--warning-text); }
.agenda-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.agenda-acoes .btn { text-decoration: none; }
.btn-wa-txt i { color: #16a34a; }
.ini-mais { margin-top: 10px; width: 100%; }
.ini-projecao { font-size: var(--fs-md); line-height: 1.55; color: var(--text-primary); margin: 0; }
.ini-pipe { display: grid; gap: 4px; }
.ini-pipe-linha { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; border: none; background: transparent; padding: 6px 4px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.ini-pipe-linha:hover { background: var(--bg-hover); }
.ini-pipe-nome { font-size: var(--fs-sm); color: var(--text-primary); }
.ini-pipe-barra { height: 10px; background: var(--bg-hover); border-radius: var(--radius-xs); overflow: hidden; }
.ini-pipe-barra span { display: block; height: 100%; background: var(--primary); border-radius: var(--radius-xs); }
.ini-pipe-val { font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ini-equipe { margin-top: 14px; }
.ini-alertas { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.ini-alertas li { font-size: var(--fs-sm); padding: 8px 12px; border-radius: var(--radius); background: var(--warning-light); color: var(--text-primary); }
.ini-alertas i { color: var(--warning-text); margin-right: 6px; }
.ini-ranking td:first-child, .ini-ranking th:first-child { text-align: left; }

/* Relatórios: abas em grupos, filtros por aba, comparação e mapa de calor */
.rpt-tabs { gap: 10px 18px; align-items: flex-end; }
.rpt-grupo-abas { display: flex; flex-direction: column; gap: 4px; }
.rpt-grupo-nome { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); cursor: help; }
.rpt-grupo-botoes { display: flex; gap: 4px; flex-wrap: wrap; }
.rpt-mais { display: none; }
.rpt-mais.aberto { display: contents; }
.rpt-cont { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--radius); background: var(--primary); color: #fff; font-size: var(--fs-2xs); line-height: 18px; text-align: center; margin-left: 2px; }
.rpt-opcao { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-secondary); cursor: pointer; }
.rpt-calor { background: rgba(var(--calor-rgb), calc(var(--calor) * 0.26)) !important; }
.rpt-var { font-size: var(--fs-3xs); font-weight: 600; margin-left: 2px; color: var(--text-secondary); white-space: nowrap; }
.rpt-var.up { color: var(--success-text); }
.rpt-var.down { color: var(--danger-text); }
[hidden] { display: none !important; }

/* Densidade compacta (Configurações → Exibição) */
.opcoes-densidade { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--fs-sm); }
.opcoes-densidade label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
body.densidade-compacta table th, body.densidade-compacta table td { padding-top: 6px; padding-bottom: 6px; }
body.densidade-compacta .report-table th, body.densidade-compacta .report-table td { padding: 4px 6px; }
body.densidade-compacta .funnel-card { padding: 5px 8px; margin-bottom: 4px; }
body.densidade-compacta .agenda-item { padding-top: 6px; padding-bottom: 6px; }

/* Navegação inferior (só no celular) */
.nav-inferior { display: none; }

@media (max-width: 1100px) {
    .ini-kpis { grid-template-columns: repeat(2, 1fr); }
    .ini-grade { grid-template-columns: 1fr; }
}
/* Só na tela: no papel (A4 em pé é estreito como celular) as tabelas continuam tabelas */
@media screen and (max-width: 768px) {
    .nav-inferior { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: var(--bg-secondary); border-top: 1px solid var(--border-color); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); justify-content: space-around; align-items: center; box-shadow: 0 -4px 12px rgba(0,0,0,0.08); }
    .nav-inferior button, .nav-inferior .nav-inferior-link { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; border: none; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--fs-2xs); cursor: pointer; text-decoration: none; }
    .nav-inferior button i, .nav-inferior .nav-inferior-link i { font-size: var(--fs-xl); }
    .nav-inferior button.ativo { color: var(--primary); font-weight: 600; }
    .nav-inferior .nav-mais { flex: 0 0 56px; }
    .nav-inferior .nav-mais i { width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xl); margin-top: -14px; box-shadow: 0 4px 12px rgba(59,130,246,0.4); }
    .main { padding-bottom: 84px !important; }
    #notificationContainer { bottom: 76px !important; }
    .ini-kpi-val { font-size: var(--fs-2xl); }
    .agenda-item { flex-direction: column; align-items: stretch; }
    .agenda-acoes .btn { flex: 1; justify-content: center; min-height: 40px; }
    .agenda-acoes .btn span { display: none; }
    .ini-pipe-linha { grid-template-columns: 90px 1fr auto; }
    .funnel { scroll-snap-type: x mandatory; }
    .funnel-stage { scroll-snap-align: start; min-width: 82vw; }
    .opp-modo-resumo { margin: 6px 0 0; flex-basis: 100%; }
    .btn-icon { min-width: 40px; min-height: 40px; }
    /* Tabelas viram cartões: cada linha é um bloco e cada célula mostra o nome da coluna */
    .table-container table.tabela-cartoes thead { display: none; }
    .table-container table.tabela-cartoes, .table-container table.tabela-cartoes tbody, .table-container table.tabela-cartoes tr, .table-container table.tabela-cartoes td { display: block; width: 100%; }
    .table-container table.tabela-cartoes tr { border: 1px solid var(--border-color); border-radius: var(--radius); margin-bottom: 10px; padding: 6px 10px; background: var(--bg-card); }
    .table-container table.tabela-cartoes tbody tr:hover td { background: transparent; }
    .table-container table.tabela-cartoes td { border: none; padding: 5px 0 !important; display: flex; justify-content: space-between; gap: 12px; text-align: right !important; font-size: var(--fs-sm); }
    .table-container table.tabela-cartoes td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--text-secondary); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.04em; text-align: left; flex-shrink: 0; }
    .table-container table.tabela-cartoes td:first-child { justify-content: flex-start; text-align: left !important; font-size: var(--fs-md); }
    .table-container table.tabela-cartoes td:first-child::before { display: none; }
    .table-container table.tabela-cartoes td.actions { justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--border-color); margin-top: 4px; padding-top: 8px !important; }
    .table-container table.tabela-cartoes td.actions::before { display: none; }
    .table-container table.tabela-cartoes tr.ct-expandida, .table-container table.tabela-cartoes tr.ct-expandida td { display: block; }
    .table-container table.tabela-cartoes td[colspan] { display: block; text-align: left !important; }
    .table-container table.tabela-cartoes td[colspan]::before { display: none; }
    /* Relatórios: primeira coluna fixa ao rolar tabelas largas */
    .report-table th:first-child, .report-table td:first-child { position: sticky; left: 0; background: var(--bg-card); z-index: 1; }
    .rpt-grupo-abas { width: 100%; }
    /* Barra de filtros e ações em largura total no celular */
    .view > .flex-between { flex-direction: column; align-items: stretch; gap: 8px; }
    .view > .flex-between .filter-bar { width: 100%; margin-bottom: 0; }
    .view > .flex-between > div:last-child { display: flex; gap: 8px; }
    .view > .flex-between > div:last-child > .btn { flex: 1; justify-content: center; }
}
@media print {
    .nav-inferior, .chips-filtros { display: none !important; }
    body.rpt-imprimindo .rpt-var { color: #374151 !important; }
}

/* =====================================================================
   Projetos de embalagem (assets/js/projetos.js)
   ===================================================================== */
.pf-selo { display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; border-radius: var(--radius-lg); padding: 2px 9px; font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: var(--bg-hover); color: var(--text-secondary); }
button.pf-selo:hover { filter: brightness(0.95); }
.funnel-card .pf-selo { margin-top: 4px; font-size: var(--fs-2xs); padding: 1px 7px; }
.pf-selo.pf-neutro { background: var(--bg-hover); color: var(--text-secondary); border-color: var(--border-color); }
.pf-selo.pf-andamento, .pf-selo.pf-info { background: var(--primary-light); color: var(--primary-dark); border-color: rgba(59,130,246,0.3); }
.pf-selo.pf-alerta { background: var(--warning-light); color: var(--warning-text); border-color: rgba(217,119,6,0.35); }
.pf-selo.pf-atrasado { background: var(--danger-light); color: var(--danger-text); border-color: rgba(239,68,68,0.35); }
.pf-selo.pf-ok { background: var(--success-light); color: var(--success-text); border-color: rgba(5,150,105,0.35); }
[data-theme="dark"] .pf-selo.pf-andamento, [data-theme="dark"] .pf-selo.pf-info { color: #93c5fd; }
.pf-mais { background: rgba(0,0,0,0.08); border-radius: var(--radius); padding: 0 5px; font-size: var(--fs-2xs); }
.pf-vazio { font-size: var(--fs-sm); color: var(--text-secondary); margin: 6px 0; }
.pf-bloco-opp { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 12px 14px; margin: 4px 0 8px; display: grid; gap: 8px; }
.pf-bloco-tit { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.pf-bloco-tit i { color: var(--primary); margin-right: 4px; }
.pf-bloco-lista { display: grid; gap: 6px; }
.pf-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); border-radius: var(--radius); padding: 8px 10px; font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: left; }
.pf-linha:hover { background: var(--bg-hover); }
.pf-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 12px; }
.pf-trilha { display: grid; grid-template-columns: repeat(8, 1fr); list-style: none; margin: 0 0 14px; padding: 0; counter-reset: etapa; }
.pf-trilha li { position: relative; text-align: center; font-size: var(--fs-2xs); color: var(--text-tertiary); padding-top: 18px; line-height: 1.25; }
.pf-trilha li span { position: absolute; top: 3px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--border-strong); z-index: 1; }
.pf-trilha li::before { content: ''; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: var(--border-color); }
.pf-trilha li:first-child::before { display: none; }
.pf-trilha li.feita { color: var(--text-secondary); }
.pf-trilha li.feita span, .pf-trilha li.feita::before { background: var(--success); }
.pf-trilha li.atual { color: var(--text-primary); font-weight: 600; }
.pf-trilha li.atual span { background: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); }
.pf-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 14px; flex-wrap: wrap; }
.pf-aba { border: none; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pf-aba.ativo { color: var(--primary); border-bottom-color: var(--primary); }
.pf-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pf-campo { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 8px 10px; }
.pf-campo span, .pf-obs span { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.pf-campo strong { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 600; }
.pf-obs { margin-top: 10px; border: 1px solid var(--border-color); border-radius: var(--radius); padding: 8px 10px; }
.pf-obs p { margin: 4px 0 0; font-size: var(--fs-sm); white-space: pre-wrap; }
.pf-devolvida { background: var(--warning-light); border-left: 4px solid var(--warning); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; font-size: var(--fs-sm); }
.pf-aprovado { background: var(--success-light); border-left: 4px solid var(--success); border-radius: var(--radius); padding: 10px 12px; margin: 10px 0; font-size: var(--fs-sm); }
.pf-alerta-txt { color: var(--danger-text); font-weight: 600; }
.pf-linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pf-linha-tempo li { display: flex; gap: 10px; align-items: flex-start; }
.pf-linha-tempo i { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-hover); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); flex-shrink: 0; }
.pf-linha-tempo strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.pf-linha-tempo span { font-size: var(--fs-xs); color: var(--text-secondary); }
.pf-conversa { max-height: 42vh; overflow-y: auto; display: grid; gap: 8px; padding: 4px 2px 10px; }
.pf-msg { max-width: 80%; background: var(--bg-hover); border-radius: var(--radius); padding: 8px 12px; }
.pf-msg.minha { margin-left: auto; background: var(--primary-light); }
.pf-msg-cab { font-size: var(--fs-2xs); color: var(--text-secondary); margin-bottom: 2px; }
.pf-msg-txt { font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-escrever { display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--border-color); padding-top: 10px; }
.pf-escrever textarea { flex: 1; min-height: 60px; }
.pf-anexos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.pf-anexos li { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 10px; border: 1px solid var(--border-color); border-radius: var(--radius); padding: 8px 10px; font-size: var(--fs-sm); }
.pf-anexos li.pf-vazio { display: block; border: none; }
.pf-anexos small { color: var(--text-secondary); font-size: var(--fs-xs); white-space: nowrap; }
.pf-enviar-arq { cursor: pointer; }
.pf-registrar { border-top: 1px solid var(--border-color); margin-top: 14px; padding-top: 12px; }
.pf-tab-aprov td, .pf-tab-aprov th { text-align: left; }
.pf-sino { position: relative; }
/* Popup "Nova OP para desenvolvimento" (projetos.js) */
.pf-popdev-pilha { position: fixed; right: 16px; bottom: 16px; z-index: 3000; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); }
.pf-popdev { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); border-left: 4px solid var(--primary); border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 12px 14px; animation: pfPopIn .25s ease; }
.pf-popdev-urg { border-left-color: var(--danger); }
@keyframes pfPopIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pf-popdev-cab { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.pf-popdev-cab i { color: var(--primary); }
.pf-popdev-urg .pf-popdev-cab i { color: var(--danger); }
.pf-popdev-x { margin-left: auto; background: none; border: 0; font-size: var(--fs-xl); line-height: 1; color: var(--text-secondary); cursor: pointer; padding: 0 4px; }
.pf-popdev-corpo { margin: 8px 0 10px; font-size: var(--fs-sm); display: grid; gap: 2px; }
.pf-popdev-corpo small { color: var(--text-secondary); }
.pf-popdev-op { font-weight: 600; font-size: var(--fs-md); }
.pf-popdev-prio { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; color: #fff; background: var(--danger); border-radius: var(--radius-sm); padding: 1px 6px; margin-left: 4px; vertical-align: 2px; }
.pf-popdev-acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media print { .pf-popdev-pilha { display: none !important; } }
.pf-sino-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: var(--radius); background: var(--danger); color: #fff; font-size: var(--fs-2xs); font-weight: 600; line-height: 18px; text-align: center; padding: 0 4px; }
.pf-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 60vh; overflow-y: auto; }
.pf-avisos button { display: grid; grid-template-columns: 20px 1fr; gap: 2px 10px; width: 100%; border: none; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--fs-sm); text-align: left; padding: 8px; border-radius: var(--radius); cursor: pointer; }
.pf-avisos button:hover { background: var(--bg-hover); }
.pf-avisos button i { grid-row: span 2; color: var(--primary); margin-top: 2px; }
.pf-avisos small { font-size: var(--fs-2xs); }
.pf-avisos li.novo button { color: var(--text-primary); font-weight: 600; background: var(--primary-light); }
.ini-projetos { margin-top: 14px; }
.ini-projetos .card-header h3 i { color: var(--primary); margin-right: 6px; }
.pf-contagens { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; }
.pf-contagens div { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 8px; text-align: center; }
.pf-contagens strong { display: block; font-size: var(--fs-xl); color: var(--text-primary); }
.pf-contagens span { font-size: var(--fs-2xs); color: var(--text-secondary); }
.pf-lista-ini { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pf-lista-ini button { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; width: 100%; border: none; background: transparent; font: inherit; text-align: left; padding: 8px; border-radius: var(--radius); cursor: pointer; color: var(--text-primary); }
.pf-lista-ini button:hover { background: var(--bg-hover); }
.pf-lista-ini small { grid-column: 2; font-size: var(--fs-xs); color: var(--text-secondary); }
.pf-prazos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pf-prazos label { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--text-secondary); }
@media (max-width: 768px) {
    .pf-trilha { grid-template-columns: repeat(4, 1fr); row-gap: 10px; }
    .pf-contagens { grid-template-columns: repeat(3, 1fr); }
    .pf-anexos li { grid-template-columns: 22px 1fr auto; }
    .pf-anexos small { display: none; }
    .pf-msg { max-width: 95%; }
    .pf-sino { order: -1; }
}
@media print { .pf-sino, .pf-selo { display: none !important; } }

/* Grupo PackFlow (último item do menu) com submenu */
.nav-grupo .nav-seta { margin-left: auto; font-size: var(--fs-3xs); opacity: 0.6; transition: transform 0.2s; }
.nav-grupo .badge + .nav-seta { margin-left: 8px; }
.nav-grupo [aria-expanded="true"] .nav-seta { transform: rotate(180deg); }
.nav-sub { display: flex; flex-direction: column; margin: 2px 10px 6px 36px; padding-left: 10px; border-left: 1px solid var(--border-sidebar); }
.nav-sub[hidden] { display: none; }
.nav-subitem { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 500; color: var(--text-sidebar); text-decoration: none; }
.nav-subitem i { width: 14px; text-align: center; font-size: var(--fs-xs); opacity: 0.75; }
.nav-subitem:hover { background: var(--bg-sidebar-hover); color: var(--text-sidebar-active); }
/* =====================================================================
   Moldura (inspirada no layout de referência do Stitch): barra superior fixa,
   cabeçalho de tela, fonte de títulos, seções no menu e menu do usuário.
   Mantém as cores do CRM (tokens acima); só muda organização e acabamento.
   ===================================================================== */
:root { --font-titulo: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
h1, h2, h3, h4 { font-family: var(--font-titulo); letter-spacing: -0.01em; word-spacing: 0.12em; }   /* o espaço da Plus Jakarta é estreito: "Por ano" parecia "Porano" */

/* barra superior: presa no topo da área de conteúdo, de ponta a ponta */
/* a área de conteúdo não rola sozinha (quem rola é a página); 'clip' corta o excesso lateral sem virar área de rolagem, para a barra poder ficar presa no topo */
.main { overflow-x: clip; overflow-y: visible; }
.topbar { position: sticky; top: 0; z-index: 50; height: 64px; margin: -28px -36px 24px; padding: 0 36px; flex-wrap: nowrap; gap: 16px; background: var(--bg-card); border-bottom: 1px solid var(--border-color); }
.topbar-esq { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.topbar .search-global { flex: 1; max-width: 480px; height: 38px; background: var(--bg-input); box-shadow: none; }
.topbar .search-global input { min-width: 0; width: 100%; padding: 8px; }
.topbar .search-global kbd.atalho { font: 600 var(--fs-2xs) var(--font); color: var(--text-tertiary); background: var(--bg-hover); border: 1px solid var(--border-color); border-radius: var(--radius-xs); padding: 1px 6px; white-space: nowrap; }
.topbar-actions { flex-wrap: nowrap; gap: 10px; }
.btn-topo-novo { white-space: nowrap; }
.topbar-divisor { width: 1px; height: 24px; background: var(--border-color); flex-shrink: 0; }
.topbar .pf-sino { border: none !important; background: transparent !important; width: 38px; height: 38px; padding: 0 !important; justify-content: center; color: var(--text-secondary); font-size: var(--fs-lg); border-radius: var(--radius); }
.topbar .pf-sino:hover { background: var(--bg-hover) !important; color: var(--text-primary); }

/* usuário: avatar com iniciais, nome e cargo; menu com tema e sair */
.usuario-menu { position: relative; }
.usuario-btn { display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 4px 6px; border-radius: var(--radius); cursor: pointer; color: var(--text-primary); font: inherit; }
.usuario-btn:hover { background: var(--bg-hover); }
.usuario-avatar { position: relative; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font: 600 var(--fs-sm) var(--font-titulo); letter-spacing: 0.02em; }
.usuario-avatar::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #10b981; border: 2px solid var(--bg-card); }
.usuario-txt { display: flex; flex-direction: column; text-align: left; line-height: 1.25; max-width: 180px; }
.usuario-txt strong { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-txt small { font-size: var(--fs-2xs); color: var(--text-secondary); }
.usuario-seta { font-size: var(--fs-3xs); color: var(--text-tertiary); }
.usuario-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; padding: 6px; z-index: 60; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.usuario-pop[hidden] { display: none; }
.usuario-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: var(--radius); color: var(--text-primary); font: 500 var(--fs-sm) var(--font); text-align: left; cursor: pointer; }
.usuario-pop button:hover { background: var(--bg-hover); }
.usuario-pop button i { width: 16px; text-align: center; color: var(--text-secondary); }
.usuario-pop button.sair, .usuario-pop button.sair i { color: var(--danger-text); }

/* cabeçalho de cada tela: título + linha de apoio */
.page-header { margin: 0 0 20px; }
.page-header h1 { margin: 0; font: 700 var(--fs-2xl)/32px var(--font-titulo); letter-spacing: -0.015em; color: var(--text-primary); }
.page-header p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.page-header p:empty { display: none; }

/* menu lateral: rótulos de seção e item ativo em pílula */
.sidebar-header h2 { font-family: var(--font-titulo); font-size: 21px; letter-spacing: -0.4px; }
.sidebar-header { padding: 22px 24px; }
.nav-secao { padding: 16px 26px 6px; font: 600 var(--fs-3xs) var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-sidebar-muted); }
.sidebar-nav > .nav-secao:first-child { padding-top: 8px; }
.nav-item { border-radius: var(--radius); padding: 9px 14px; }
.nav-item::before { display: none; }
.nav-item.active { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(var(--primary-rgb), 0.3); }
.nav-item.active .icon { color: #fff; }
.sidebar-atalho { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid var(--border-sidebar); color: var(--text-sidebar); font: 500 var(--fs-xs) var(--font); }
.sidebar-atalho:hover { background: var(--bg-sidebar-hover); color: var(--text-sidebar-active); }
.sidebar-atalho kbd { margin-left: auto; font: 600 var(--fs-3xs) var(--font); background: rgba(255,255,255,0.08); border-radius: var(--radius-xs); padding: 1px 6px; }

@media (max-width: 1100px) {
    .topbar .search-global kbd.atalho, .usuario-txt, .usuario-seta { display: none; }
}
@media (max-width: 768px) {
    .topbar { flex-direction: row !important; align-items: center !important; height: 56px; margin: -16px -16px 16px; padding: 0 12px; gap: 8px; }
    .topbar-actions { width: auto !important; gap: 6px; }
    .btn-topo-novo span, .topbar-divisor { display: none; }
    .btn-topo-novo { padding: 8px 11px; }
    .mobile-drawer-btn span { display: none; }
    .page-header h1 { font-size: var(--fs-xl); line-height: 28px; }
    .page-header p { font-size: var(--fs-xs); }
}
@media (max-width: 480px) {
    .topbar { margin: -12px -12px 12px; padding: 0 8px; }
    .topbar .search-global { padding: 0 10px; }
}

/* submenu do PackFlow: itens são botões (abrem a tela dentro do CRM) */
button.nav-subitem { width: 100%; background: none; border: none; font-family: inherit; text-align: left; cursor: pointer; }
.nav-subitem.active { background: var(--bg-sidebar-hover); color: var(--text-sidebar-active); }
.nav-subitem.active i { opacity: 1; color: var(--primary); }
/* Anexos da OP (janela do projeto no CRM): histórico de excluídos */
.pf-anx-hist-crm { margin-top: 10px; }
.pf-anx-hist-crm summary { cursor: pointer; font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); }
.pf-anexos .pf-excluido { opacity: 0.7; }

/* ====== Funil: tempo na etapa (amarelo/vermelho), decisão obrigatória e faxina ====== */
.kcard-idade { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); font-weight: 600; padding: 2px 7px; border-radius: 999px; margin: 4px 0 2px; background: var(--bg-hover); color: var(--text-secondary); }
.kcard-idade.idade-amarelo { background: rgba(245,158,11,0.15); color: #b45309; }
.kcard-idade.idade-vermelho { background: rgba(239,68,68,0.15); color: var(--danger); }
.kcard-idade.idade-agendada { background: rgba(59,130,246,0.12); color: var(--primary); }
[data-theme="dark"] .kcard-idade.idade-amarelo { color: #fbbf24; }
.funnel-card.idade-amarelo { border-left: 3px solid #f59e0b; }
.funnel-card.idade-vermelho { border-left: 3px solid var(--danger); background: linear-gradient(90deg, rgba(239,68,68,0.07), var(--bg-card) 55%); }
.decisoes-overlay { position: fixed; inset: 0; z-index: 950; background: rgba(15,23,42,0.72); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.decisoes-caixa { width: 100%; max-width: 980px; background: var(--bg-card); border-radius: var(--radius-xl); border: 1px solid var(--border-color); box-shadow: 0 20px 60px rgba(0,0,0,0.35); padding: 22px 24px; }
.decisoes-caixa h2 { font-size: 19px; margin: 0 0 6px; display: flex; gap: 10px; align-items: center; }
.decisoes-caixa h2 i { color: var(--danger); }
.dec-explica { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0 0 14px; }
.dec-lote { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--radius); background: var(--bg-secondary); font-size: var(--fs-xs); margin-bottom: 12px; }
.dec-lote select, .dec-lote input[type=date] { width: auto; padding: 6px 8px; font-size: var(--fs-xs); }
.dec-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dec-item { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border-color); border-left: 3px solid var(--danger); border-radius: var(--radius); }
.dec-info b { display: block; font-size: var(--fs-md); }
.dec-info span { display: block; font-size: var(--fs-xs); color: var(--text-secondary); }
.dec-info small { display: block; font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; }
.dec-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dec-perder:hover { color: var(--danger); border-color: var(--danger); }
.dec-form { grid-column: 2 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 4px; }
.dec-form[hidden] { display: none; }
.dec-form input[type=text] { flex: 1 1 260px; }
.dec-form input[type=date], .dec-form select { width: auto; }
@media screen and (max-width: 768px) {
    .dec-item { grid-template-columns: auto 1fr; }
    .dec-acoes { grid-column: 1 / -1; justify-content: flex-start; }
    .dec-form { grid-column: 1 / -1; }
}
.btn-faxina span { min-width: 18px; padding: 0 6px; border-radius: var(--radius); background: var(--danger); color: #fff; font-size: var(--fs-2xs); line-height: 18px; }

/* ====== Painel (direção): Orçamento, Proposta e Negociação ====== */
.painel-etapas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.painel-etapa { display: flex; flex-direction: column; gap: 14px; text-align: left; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: 26px 28px; cursor: pointer; font: inherit; color: var(--text-primary); transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s; }
.painel-etapa:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.pe-nome { font-size: var(--fs-md); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.pe-nome em { font-style: normal; color: var(--text-primary); }
.painel-etapas.com-vendas { grid-template-columns: repeat(3, 1fr); }
.painel-vendas { cursor: default; }
.painel-vendas:hover { transform: none; box-shadow: none; border-color: var(--border-color); }
.painel-vendas-mes { font: inherit; font-size: var(--fs-xs); color: var(--text-primary); background: transparent; border: 0; border-bottom: 1px dashed var(--text-secondary); cursor: pointer; padding: 0 2px; }
.pe-sub { font-size: var(--fs-xs); color: var(--text-secondary); }
.pe-valor { font-family: var(--font-titulo, inherit); font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--primary); }
@media screen and (max-width: 900px) { .painel-etapas, .painel-etapas.com-vendas { grid-template-columns: 1fr; } .pe-valor { font-size: 28px; } }
/* Painel: faturamento real do Metrics */
.pf2 { margin-top: 18px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: 18px 22px; }
.pf2-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pf2-cab h3 { font-size: var(--fs-md); margin: 0; } .pf2-cab h3 i { color: var(--primary); margin-right: 6px; } .pf2-cab small { color: var(--text-secondary); font-weight: 400; }
.pf2-grade { display: grid; grid-template-columns: 1fr minmax(180px, 280px); gap: 18px; align-items: end; }
.pf2-total { display: flex; flex-direction: column; gap: 6px; }
.pf2-rot, .pf2-sub, .pf2-pct, .pf2-nota { color: var(--text-secondary); font-size: var(--fs-xs); }
.pf2-val { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; }
.pf2-sub .up { color: var(--success); font-weight: 600; } .pf2-sub .down { color: var(--danger); font-weight: 600; }
.pf2-barra { display: block; height: 8px; border-radius: var(--radius-xs); background: var(--bg-hover); overflow: hidden; max-width: 420px; }
.pf2-barra span { display: block; height: 100%; background: var(--success); }
.pf2-meses { display: flex; gap: 6px; align-items: flex-end; height: 90px; }
.pf2-mesbar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; padding: 0; font: inherit; }
.pf2-mesbar span { width: 100%; background: color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 4px 4px 0 0; }
.pf2-mesbar.ativo span { background: var(--primary); }
.pf2-mesbar em { font-style: normal; font-size: var(--fs-3xs); color: var(--text-secondary); text-transform: capitalize; }
.pf2-tab { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: var(--fs-sm); }
.pf2-tab th, .pf2-tab td { padding: 8px 10px; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: middle; }
.pf2-tab th { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); }
.pf2-tab .num { text-align: right; white-space: nowrap; }
.pf2-tab td .pf2-barra { margin-bottom: 3px; }
.pf2-outros td { color: var(--text-secondary); }
.pf2-nota { margin: 12px 0 0; }
@media screen and (max-width: 700px) { .pf2-grade { grid-template-columns: 1fr; } .pf2 { padding: 14px; } }

/* ====== Cargo "Só PackFlow": nada do comercial na tela (o banco também bloqueia) ====== */
body.so-packflow .sidebar-nav > .nav-item:not([data-view="settings"]),   /* Configurações fica: é onde a pessoa troca a senha */
body.so-packflow #navSetorComercial,
body.so-packflow .sidebar-footer .sidebar-atalho,
body.so-packflow #sellerDrawer,
body.so-packflow #sellerDrawerToggle,
body.so-packflow .nav-inferior > :not([data-view="packflow"]):not([data-view="pcp"]) { display: none !important; }
/* Diretoria e consulta no Comercial: só leem (o banco recusa a gravação — SQL 31) */
body.comercial-so-leitura [data-comercial-grava] { display: none !important; }

/* Painel: abas Resumo | Dashboard */
.painel-abas { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius); background: var(--bg-hover); margin-bottom: 16px; }
.painel-abas button { border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 7px 14px; border-radius: var(--radius); cursor: pointer; }
.painel-abas button.ativo { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.painel-abas i { margin-right: 5px; }
/* Dashboard (faturamento real) */
.dash-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 12px 14px; }
.dash-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .3px; }
.dash-filtros select { min-width: 160px; text-transform: none; }
.dash-escopo { font-size: var(--fs-sm); color: var(--text-secondary); margin: 12px 2px; }
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.dash-kpi { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.dash-rot { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); }
.dash-val { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.4px; }
.dash-sub { font-size: var(--fs-xs); color: var(--text-secondary); }
.dash-var { font-weight: 600; } .dash-var.up { color: var(--success); } .dash-var.down { color: var(--danger); }
.dash-bloco { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 14px; }
.dash-bloco h4 { margin: 0 0 10px; font-size: var(--fs-sm); }
.dash-canvas { position: relative; }
.dash-grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-tab-wrap { overflow-x: auto; }
.dash-tab { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dash-tab th, .dash-tab td { padding: 7px 10px; border-bottom: 1px solid var(--border-color); text-align: left; white-space: nowrap; }
.dash-tab th { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); }
.dash-tab .num { text-align: right; }
.dash-tab small { color: var(--text-secondary); font-size: var(--fs-2xs); }
.dash-tab tfoot td { font-weight: 600; border-top: 2px solid var(--border-color); }
.dash-nota { font-size: var(--fs-xs); color: var(--text-secondary); }
@media screen and (max-width: 900px) { .dash-grade2 { grid-template-columns: 1fr; } .dash-filtros select { min-width: 0; width: 100%; } .dash-filtros label { flex: 1 1 140px; } }

/* Painel: comissão (em teste) */
.pcom-teste { font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .5px; color: #fff; background: var(--warning); border-radius: var(--radius-sm); padding: 2px 7px; margin-left: 6px; vertical-align: 2px; }
.pcom-aviso { font-size: var(--fs-xs); color: var(--text-secondary); margin: -4px 0 10px; } .pcom-aviso.on { color: var(--success); } .pcom-aviso i { margin-right: 4px; }
.pcom-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pcom-est { color: var(--text-secondary); }
.pf2-tab tfoot td { font-weight: 600; border-top: 2px solid var(--border-color); }
.pf2-tab td small { color: var(--text-secondary); font-size: var(--fs-2xs); }
@media screen and (max-width: 700px) { .pcom-grade { grid-template-columns: 1fr; } }

/* Comissão: cartão de destaque do mês */
.pcom-destaque { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; margin-bottom: 14px; border-radius: var(--radius-xl); color: #fff;
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 55%, #8b5cf6 100%); box-shadow: 0 10px 30px rgba(99,102,241,.28); }
.pcom-destaque::after { content: ''; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.10); pointer-events: none; }
.pcom-destaque > * { position: relative; z-index: 1; }   /* o círculo decorativo fica atrás e não pega cliques (olho) */
.pcom-d-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .3px; opacity: .95; }
.pcom-d-mes i { margin-right: 5px; color: #fde68a; }
.pcom-d-tit { background: rgba(255,255,255,.18); border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.pcom-d-rot { font-size: var(--fs-sm); opacity: .9; margin-top: 4px; }
.pcom-d-val { font-size: 38px; font-weight: 700; letter-spacing: -1px; line-height: 1.05; }
.pcom-d-barra { display: block; height: 9px; border-radius: var(--radius-xs); background: rgba(255,255,255,.25); overflow: hidden; max-width: 520px; margin-top: 4px; }
.pcom-d-barra span { display: block; height: 100%; border-radius: var(--radius-xs); background: linear-gradient(90deg, #fde68a, #34d399); }
.pcom-d-sub { font-size: var(--fs-xs); opacity: .92; }
.pcom-d-sub b { font-weight: 600; }
.pcom-aguarda { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 4px; }
.pcom-aguarda b { margin-left: auto; color: var(--text-primary); font-size: var(--fs-md); }
@media screen and (max-width: 700px) { .pcom-d-val { font-size: 30px; } }

/* Painel: Proposta | Negociação | cartão da comissão na mesma linha */
.painel-topo { display: grid; grid-template-columns: 1fr; gap: 18px; }
.painel-topo.com-card { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: stretch; }
.painel-topo #painelComCard:empty { display: none; }
.painel-topo .pcom-destaque { margin-bottom: 0; height: 100%; box-sizing: border-box; justify-content: center; }
.painel-topo .pcom-d-val { font-size: 32px; }
@media screen and (max-width: 1100px) { .painel-topo.com-card { grid-template-columns: 1fr; } }

/* Campo de senha com botão "olho" (mostrar/esconder) */
.senha-wrap { position: relative; }
.senha-wrap input { width: 100%; padding-right: 42px; box-sizing: border-box; }
.ver-senha { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--text-secondary); cursor: pointer; padding: 6px 9px; border-radius: var(--radius); font-size: var(--fs-md); line-height: 1; }
.ver-senha:hover { color: var(--primary); background: var(--bg-hover); }
.ver-senha:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Briefing da semana (IA) */
.pia { border-left: 4px solid #8b5cf6; }
.pia .pf2-cab h3 i { color: #8b5cf6; }
.pia-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pia-acoes select { width: auto; min-width: 200px; max-width: 100%; }
.pia-texto { font-size: var(--fs-md); line-height: 1.55; }
.pia-texto h4 { font-size: var(--fs-md); margin: 14px 0 6px; } .pia-texto h4:first-child { margin-top: 0; }
.pia-texto p { margin: 0 0 8px; } .pia-texto ul { margin: 0 0 8px; padding-left: 20px; } .pia-texto li { margin-bottom: 4px; }
.pia-rodape { margin: 12px 0 0; font-size: var(--fs-xs); color: var(--text-secondary); } .pia-rodape i { margin-right: 4px; }
/* Briefing: clientes da semana com botões da IA */
.pia-clientes { margin-top: 14px; border-top: 1px solid var(--border-color); padding-top: 10px; }
.pia-grupo { margin-bottom: 8px; } .pia-grupo summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); padding: 6px 0; } .pia-grupo summary em { font-weight: 400; color: var(--text-secondary); font-style: normal; }
.pia-cli { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: var(--radius); margin: 6px 0; }
.pia-cli-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-sm); } .pia-cli-info span { color: var(--text-secondary); font-size: var(--fs-xs); }
.pia-cli-info .pia-nota { color: var(--text-primary); font-style: italic; }
.pia-dev { display: inline-block; font-size: var(--fs-2xs); font-weight: 600; color: #dc2626; }
.pia-cli-bts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.pia-cli-bts .btn { white-space: nowrap; } .pia-ocultar { color: var(--text-secondary); }
.pia-ocultos-lk { margin: 8px 0 0; font-size: var(--fs-xs); } .pia-ocultos .pia-cli { opacity: .75; }
.pia-motivos { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; } .pia-motivos label { display: flex; gap: 8px; align-items: baseline; cursor: pointer; } .pia-motivos small { color: var(--text-secondary); }
.pia-modal-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; font-size: var(--fs-xs); color: var(--text-secondary); }
.pia-msg { font: inherit; width: 100%; resize: vertical; } .pia-dica { font-size: var(--fs-xs); color: var(--text-secondary); margin: 6px 0; }
.pia-carregando { padding: 20px 0; text-align: center; color: var(--text-secondary); } .pia-erro { color: var(--danger, #dc2626); }
@media screen and (max-width: 700px) { .pia-cli { flex-direction: column; align-items: stretch; } .pia-cli-bts { justify-content: flex-start; } .pia-cli-bts .btn span { display: none; } }
.pia-ocultos-lk .btn-link { background: none; border: 0; padding: 0; color: var(--primary); cursor: pointer; font: inherit; text-decoration: underline; }

/* IA no card da oportunidade */
.kcard-ia { color: #8b5cf6; }
.ia-opp-form { margin-right: auto; color: #8b5cf6; }
.ia-ov { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: none; align-items: center; justify-content: center; z-index: 3000; padding: 16px; }
.ia-ov.open { display: flex; }
.ia-ov-caixa { background: var(--bg-card); color: var(--text-primary); border-radius: var(--radius-xl); width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.ia-ov-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-color); }
.ia-ov-cab h3 { font-size: var(--fs-md); margin: 0; overflow: hidden; text-overflow: ellipsis; }
.ia-ov-corpo { padding: 16px 18px; }
.ia-opp-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
.ia-opp-op { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); color: var(--text-primary); cursor: pointer; font: inherit; }
.ia-opp-op:hover, .ia-opp-op:focus-visible { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.15); }
.ia-opp-op i { color: #8b5cf6; font-size: var(--fs-xl); margin-top: 2px; width: 20px; text-align: center; }
.ia-opp-op span { display: flex; flex-direction: column; gap: 2px; } .ia-opp-op small { color: var(--text-secondary); font-size: var(--fs-xs); }
.ia-opp-tit { margin: 0 0 10px; font-size: var(--fs-md); }
@media screen and (max-width: 520px) { .ia-opp-opcoes { grid-template-columns: 1fr; } }

/* card que veio de um orçamento do Metrics */
.kcard-orc { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: var(--fs-3xs); font-weight: 600; vertical-align: 2px; color: #0369a1; background: rgba(3, 105, 161, .1); }

/* descrição da oportunidade: mais espaço para ler o histórico */
textarea.op-descricao { min-height: 220px; line-height: 1.55; resize: vertical; white-space: pre-wrap; }

/* olho da comissão (valores começam escondidos) */
.pcom-olho { background: none; border: 0; padding: 2px 4px; margin-left: 4px; cursor: pointer; color: inherit; opacity: .85; font-size: var(--fs-md); vertical-align: middle; border-radius: var(--radius-sm); }
.pcom-olho:hover, .pcom-olho:focus-visible { opacity: 1; background: rgba(127,127,127,.15); }
.pcom-d-tit .pcom-olho { color: #fff; }

/* Pedidos em andamento e reposição prevista (Metrics) */
.pped .pf2-cab h3 i { color: #0891b2; }
.pped-filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pped-filtros input[type=search] { width: 220px; max-width: 100%; }
.pped-filtros select { width: auto; max-width: 100%; }
.pped-chk { display: flex; gap: 6px; align-items: center; font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; }
.pped-tab-wrap { overflow-x: auto; }
.pped-tab td { vertical-align: top; } .pped-tab td small { display: block; color: var(--text-secondary); font-size: var(--fs-xs); margin-top: 2px; }
.pped-op { white-space: nowrap; font-weight: 600; }
.pped-st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.pped-ok { background: rgba(16,185,129,.15); color: #059669; } .pped-pronto { background: rgba(16,185,129,.1); color: #0d9488; }
.pped-prod { background: rgba(14,165,233,.15); color: #0284c7; } .pped-fila { background: rgba(100,116,139,.15); color: var(--text-secondary); }
.pped-pre { background: rgba(139,92,246,.13); color: #7c3aed; } .pped-alerta { background: rgba(245,158,11,.18); color: #b45309; }
.pped-cinza { background: rgba(100,116,139,.12); color: var(--text-secondary); text-decoration: line-through; }
.pped-atr, small.pped-atr { color: #dc2626 !important; font-weight: 600; }
.pped-mudo { color: var(--text-secondary); } .pped-dica { font-size: var(--fs-xs); color: var(--text-secondary); margin: -6px 0 10px; }
.pped-mais { margin-top: 8px; background: none; border: 0; padding: 0; color: var(--primary); cursor: pointer; font: inherit; font-size: var(--fs-sm); text-decoration: underline; }
.pped-opp { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius); font-size: var(--fs-sm); }
.pped-opp b i { color: #0891b2; margin-right: 4px; }
.pped-opp-l { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 6px; }

/* Painel: resumo dos pedidos (abre o menu Pedidos) */
.pped-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; width: 100%; margin-top: 18px; padding: 12px 18px; border: 1px solid var(--border-color); border-left: 4px solid #0891b2; border-radius: var(--radius-xl); background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.pped-resumo:hover, .pped-resumo:focus-visible { box-shadow: 0 0 0 3px rgba(8,145,178,.15); }
.pped-resumo > i { color: #0891b2; font-size: var(--fs-lg); }
.pped-resumo b { font-size: var(--fs-md); }
.pped-resumo em { margin-left: auto; font-style: normal; color: var(--primary); font-weight: 600; white-space: nowrap; }
.pped-abas em { font-style: normal; font-weight: 500; opacity: .75; margin-left: 2px; }
#view-pedidos .pped { margin-top: 12px; }
#view-pedidos .pped-filtros { margin-bottom: 12px; }

/* Pedidos: filtros rápidos por situação */
.pped-sits { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pped-sits button { border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.pped-sits button em { font-style: normal; opacity: .7; margin-left: 2px; }
.pped-sits button.ativo { background: #0891b2; border-color: #0891b2; color: #fff; }
.pped-sits button.pped-sit-atr:not(.ativo) { border-color: #fca5a5; color: #dc2626; }

/* Pedidos: pontualidade, prazo realista e limpeza */
.ppont-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ppont-k { border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.ppont-k span { font-size: var(--fs-xs); color: var(--text-secondary); } .ppont-k b { font-size: var(--fs-2xl); } .ppont-k small { font-size: var(--fs-xs); color: var(--text-secondary); }
.ppont-ok b { color: #059669; } .ppont-alerta b { color: #b45309; } .ppont-ruim b { color: #dc2626; }
.ppont-tit { font-size: var(--fs-md); margin: 18px 0 6px; } .ppont-tit i { color: #0891b2; margin-right: 6px; }
.pped-ruim { background: rgba(220,38,38,.12); color: #dc2626; }
.pped-esq-bt { background: none; border: 0; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); }
.pped-esq-bt:hover, .pped-esq-bt:focus-visible { color: var(--text-primary); background: rgba(127,127,127,.15); }
.pped-velha { color: #b45309 !important; font-weight: 600; }
.pped-pcp { margin-top: 10px; font-size: var(--fs-xs); color: var(--text-secondary); }
.pped-pcp .btn-link { background: none; border: 0; padding: 0; color: var(--primary); cursor: pointer; font: inherit; text-decoration: underline; }
.pped-pcp-caixa { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius); margin: 4px 0 12px; cursor: pointer; }
.pped-pcp-caixa input { margin-top: 3px; width: 16px; height: 16px; flex: none; }
.pped-pcp-caixa small { display: block; color: var(--text-secondary); font-size: var(--fs-xs); margin-top: 2px; }
.pped-pcp-caixa.desligada { opacity: .6; cursor: not-allowed; }
.pped-mail { display: block; color: var(--text-secondary); }
.pped-mail.ok { color: #047857; }
.pped-mail.erro { color: #b91c1c; }
.pped-limpeza { margin-top: 14px; border-top: 1px dashed var(--border-color); padding-top: 10px; font-size: var(--fs-sm); }
.pped-limpeza .btn-link { background: none; border: 0; padding: 0; color: var(--primary); cursor: pointer; font: inherit; text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Assistente (💬 conversa com a IA, em teste) ===== */
.assist-botao { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 56px; height: 56px; border-radius: 50%; border: 0; background: #25a35a; color: #fff; font-size: var(--fs-2xl); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.assist-botao:hover { transform: scale(1.06); }
.assist-botao.ativo { background: #1d7f47; }
.assist-painel { position: fixed; right: 20px; bottom: 88px; z-index: 901; width: min(390px, calc(100vw - 32px)); height: min(580px, calc(100vh - 120px)); display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 0 16px 40px rgba(0,0,0,.28); }
.assist-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #1d7f47; color: #fff; }
.assist-avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; flex: none; }
.assist-titulo { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.assist-titulo small { opacity: .85; font-size: var(--fs-2xs); }
.assist-x { background: none; border: 0; color: #fff; font-size: var(--fs-lg); cursor: pointer; padding: 6px; border-radius: var(--radius-sm); }
.assist-x:hover { background: rgba(255,255,255,.15); }
.assist-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #ece5dd; }
.assist-msg { max-width: 86%; padding: 8px 10px 4px; border-radius: var(--radius); font-size: var(--fs-sm); line-height: 1.45; color: #111827; box-shadow: 0 1px 1px rgba(0,0,0,.08); word-wrap: break-word; }
.assist-msg.eu { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }
.assist-msg.ia { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.assist-msg.erro { background: #fee2e2; color: #991b1b; }
.assist-msg h3, .assist-msg h4 { font-size: var(--fs-sm); margin: 6px 0 2px; }
.assist-msg ul { margin: 4px 0; padding-left: 18px; }
.assist-msg p { margin: 0 0 6px; }
.assist-hora { display: block; text-align: right; font-size: var(--fs-3xs); color: #6b7280; margin-top: 2px; }
.assist-copiar { background: none; border: 0; color: #6b7280; cursor: pointer; padding: 0 0 0 4px; font-size: var(--fs-2xs); }
.assist-copiar:hover { color: #111827; }
.assist-ola { background: #fff; border-radius: var(--radius); padding: 10px 12px; font-size: var(--fs-sm); color: #111827; }
.assist-ola p { margin: 0 0 8px; }
.assist-sugs { display: flex; flex-direction: column; gap: 6px; }
.assist-sugs button { text-align: left; background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; border-radius: var(--radius); padding: 6px 10px; font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.assist-sugs button:hover { background: #dcfce7; }
.assist-restam { text-align: center; font-size: var(--fs-2xs); color: #6b7280; margin: 2px 0 0; }
.assist-msg.digitando { display: flex; gap: 4px; padding: 12px 14px; }
.assist-msg.digitando span { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; animation: assistPulo 1s infinite; }
.assist-msg.digitando span:nth-child(2) { animation-delay: .15s; }
.assist-msg.digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes assistPulo { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.assist-envio { display: flex; gap: 8px; align-items: flex-end; padding: 8px; border-top: 1px solid var(--border-color); background: var(--bg-card); }
.assist-envio textarea { flex: 1; resize: none; border: 1px solid var(--border-color); border-radius: 18px; padding: 8px 12px; font: inherit; font-size: var(--fs-sm); background: var(--bg-secondary); color: var(--text-primary); max-height: 120px; }
.assist-enviar { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: #25a35a; color: #fff; cursor: pointer; }
.assist-enviar:disabled { opacity: .5; cursor: wait; }
@media (max-width: 768px) {
    .assist-botao { bottom: calc(76px + env(safe-area-inset-bottom)); right: 14px; width: 50px; height: 50px; font-size: 21px; }
    .assist-painel { right: 8px; left: 8px; width: auto; bottom: calc(136px + env(safe-area-inset-bottom)); height: calc(100vh - 160px); }
}
@media print { .assist-botao, .assist-painel { display: none !important; } }

/* ===== PCP: QAP automático (em teste) ===== */
.pcp-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pcp-tit { font-size: var(--fs-xl); font-weight: 700; margin: 0 0 2px; color: var(--text-primary); }
.pcp-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.pcp-dica { color: var(--text-secondary); font-size: var(--fs-xs); }
.pcp-rodape { margin-top: 12px; }
.pcp-resumo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.pcp-kpi { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 8px 14px; box-shadow: var(--shadow-sm); display: flex; align-items: baseline; gap: 8px; }
.pcp-kpi span { font-size: var(--fs-xs); color: var(--text-secondary); }
.pcp-kpi b { font-size: var(--fs-xl); color: var(--text-primary); }
.pcp-kpi.risco { border-color: var(--danger); }
.pcp-kpi.risco b { color: var(--danger-text); }
.pcp-leg { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-xs); color: var(--text-secondary); margin-left: auto; }
.pcp-leg span { display: inline-flex; align-items: center; gap: 5px; }
.pcp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--text-secondary); flex: none; }
.pcp-concluido .pcp-dot, .l-concluido .pcp-dot { background: var(--success); }
.pcp-produzindo .pcp-dot, .l-produzindo .pcp-dot { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-light); }
.pcp-aberto .pcp-dot, .l-aberto .pcp-dot { background: var(--danger); }
.pcp-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; align-items: start; }
.pcp-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.pcp-card header { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border-color); }
.pcp-card header > div { flex: 1; min-width: 0; }
.pcp-card h3 { font-size: var(--fs-md); font-weight: 600; margin: 0; color: var(--text-primary); }
.pcp-card header small { font-size: var(--fs-xs); color: var(--text-secondary); }
.pcp-ico { border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); border-radius: var(--radius); width: 30px; height: 30px; cursor: pointer; flex: none; }
.pcp-ico:hover { color: var(--primary); border-color: var(--primary); }
.pcp-card table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pcp-grade .pcp-card table { table-layout: fixed; }
/* colunas com largura fixa: o texto longo termina em "…" em vez de empurrar o quadro */
.pcp-grade .pcp-card thead th:nth-child(1) { width: 27%; }
.pcp-grade .pcp-card thead th:nth-child(3) { width: 17%; }
.pcp-grade .pcp-card thead th:nth-child(4) { width: 13%; }
.pcp-grade .pcp-card thead th:nth-child(5) { width: 15%; }
.pcp-grade .pcp-card td { overflow: hidden; text-overflow: ellipsis; }
.pcp-cli-m { display: none; }
/* celular: o cliente vai para baixo do nº da OP e os números ganham o espaço */
@media (max-width: 480px) {
    .pcp-grade .pcp-card table { font-size: var(--fs-xs); }
    .pcp-grade .pcp-card th, .pcp-grade .pcp-card td { padding-left: 6px; padding-right: 6px; }
    .pcp-grade .pcp-card thead th:nth-child(2), .pcp-grade .pcp-card td.pcp-cli { display: none; }
    .pcp-grade .pcp-card thead th:nth-child(1) { width: 36%; }
    .pcp-grade .pcp-card thead th:nth-child(3) { width: 24%; }
    .pcp-grade .pcp-card thead th:nth-child(4) { width: 17%; }
    .pcp-grade .pcp-card thead th:nth-child(5) { width: 23%; }
    .pcp-op .pcp-dot { margin-right: 4px; }
    .pcp-cli-m { display: block; font-weight: 400; font-size: var(--fs-2xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.pcp-card th { text-align: left; font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); padding: 7px 10px 5px; }
.pcp-card td { padding: 7px 10px; border-top: 1px solid var(--border-color); color: var(--text-primary); vertical-align: middle; }
.pcp-card .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pcp-card tbody tr { box-shadow: inset 3px 0 0 transparent; }
.pcp-card tbody tr.pcp-produzindo { background: var(--warning-light); box-shadow: inset 3px 0 0 var(--warning); }
.pcp-card tbody tr.pcp-aberto { box-shadow: inset 3px 0 0 var(--danger); }
.pcp-card tbody tr.pcp-concluido { box-shadow: inset 3px 0 0 var(--success); }
.pcp-card tbody tr.pcp-concluido td { color: var(--text-secondary); }
.pcp-op { white-space: nowrap; font-weight: 600; }
.pcp-op .pcp-dot { margin-right: 7px; vertical-align: 1px; }
.pcp-cli { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcp-fora { font-style: normal; font-size: var(--fs-2xs); margin-left: 6px; color: var(--warning-text); }
.pcp-parec-ico { font-size: var(--fs-3xs); color: var(--success-text); margin-left: 6px; }
.pcp-card tfoot td { font-weight: 600; font-size: var(--fs-xs); background: var(--bg-hover); }
.pcp-sub td { background: var(--bg-hover); padding: 5px 10px; }
.pcp-link { background: none; border: 0; padding: 0; color: var(--primary); cursor: pointer; font: inherit; font-weight: 600; font-size: var(--fs-xs); }
.pcp-aviso td { color: var(--danger-text); background: var(--danger-light); font-weight: 600; font-size: var(--fs-xs); }
.pcp-vazio { text-align: center; color: var(--text-secondary) !important; padding: 18px !important; font-size: var(--fs-xs); }
.pcp-ent { white-space: nowrap; font-size: var(--fs-xs); color: var(--text-secondary); }
.pcp-ent.atrasa { color: var(--danger-text); font-weight: 600; }
.pcp-parec { color: var(--success-text); font-weight: 600; }
.pcp-aguarda { color: var(--warning-text); font-weight: 600; }
.pcp-h4 { margin: 14px 0 6px; font-size: var(--fs-md); }
.pcp-h4 small { font-weight: 400; color: var(--text-secondary); }
.pcp-ptab td small { display: block; color: var(--text-secondary); }
.pcp-ptab tr.pcp-produzindo td { background: var(--warning-light); }
.pcp-ptab tr.pcp-concluido td { color: var(--text-secondary); }
.pcp-ord { white-space: nowrap; }
.pcp-ord button { border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); border-radius: var(--radius-sm); width: 26px; height: 24px; cursor: pointer; margin-right: 2px; }
.pcp-ord button:disabled { opacity: .35; cursor: default; }
.pcp-acoes-l { white-space: nowrap; }
.pcp-acoes-l select { padding: 3px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); font-size: var(--fs-xs); }
.pcp-disp { max-height: 44vh; overflow: auto; }
.pcp-linha-acoes { margin-top: 6px; }
.pcp-maqs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pcp-maqs button { border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); border-radius: var(--radius-xl); padding: 4px 12px; cursor: pointer; font: inherit; font-size: var(--fs-xs); }
.pcp-maqs button.ativo { background: var(--primary); color: #fff; border-color: var(--primary); }
.pcp-avisos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pcp-aviso-chip { background: var(--danger-light); color: var(--danger-text); border-radius: var(--radius); padding: 4px 8px; font-size: var(--fs-xs); }
.pcp-aviso-chip button { background: none; border: 0; color: inherit; cursor: pointer; }
.pcp-aviso-form { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.pcp-aviso-form input[type=text] { flex: 1; min-width: 200px; }
.pcp-aviso-form input[type=datetime-local] { width: 210px; }
/* PCP Etapa 2: programação sugerida e turnos */
.pcp-alerta { display: flex; gap: 8px; align-items: center; background: var(--primary-light); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 9px 12px; font-size: var(--fs-sm); margin: 0 0 14px; }
.pcp-alerta i { color: var(--primary); }
.pcp-kpi small { font-size: var(--fs-2xs); color: var(--text-secondary); }
.pcp-kpi.alerta { border-color: var(--warning); }
.pcp-kpi.alerta b { color: var(--warning-text); }
.pcp-plano-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; margin-bottom: 14px; align-items: start; }
.pcp-bloco { margin-bottom: 14px; }
.pcp-plano-grade .pcp-bloco { margin-bottom: 0; }
.pcp-bloco h3 i { color: var(--primary); margin-right: 4px; }
.pcp-bl { display: block; color: var(--text-secondary); font-size: var(--fs-xs); }
.pcp-rolar { max-height: 320px; overflow: auto; }
.pcp-rolar-x { overflow-x: auto; }
.pcp-carga td, .pcp-carga th { text-align: center; white-space: nowrap; }
.pcp-carga td:first-child, .pcp-carga th:first-child { text-align: left; }
.pcp-carga td.c-baixo, .pcp-leg-carga .c-baixo { background: var(--success-light); color: var(--success-text); }
.pcp-carga td.c-medio, .pcp-leg-carga .c-medio { background: var(--primary-light); color: var(--text-primary); }
.pcp-carga td.c-alto, .pcp-leg-carga .c-alto { background: var(--warning-light); color: var(--warning-text); font-weight: 600; }
.pcp-carga td.c-extra, .pcp-leg-carga .c-extra { background: var(--danger-light); color: var(--danger-text); font-weight: 600; }
.pcp-carga td.c-off { color: var(--text-secondary); }
.pcp-leg-carga { padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pcp-leg-carga span { border-radius: var(--radius-sm); padding: 2px 8px; font-size: var(--fs-2xs); }
.pcp-seqs { display: flex; flex-direction: column; gap: 8px; }
.pcp-seq { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.pcp-seq summary { cursor: pointer; padding: 10px 12px; color: var(--text-primary); }
.pcp-seq summary small { color: var(--text-secondary); margin-left: 6px; }
.pcp-seq table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.pcp-seq th { text-align: left; font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; color: var(--text-secondary); padding: 6px 10px; }
.pcp-seq td { padding: 6px 10px; border-top: 1px solid var(--border-color); color: var(--text-primary); vertical-align: top; }
.pcp-seq .num { text-align: right; white-space: nowrap; }
.pcp-seq td:first-child, .pcp-seq td:nth-child(2) { white-space: nowrap; }
.pcp-por { display: inline-block; border-radius: var(--radius-sm); padding: 1px 7px; font-size: var(--fs-2xs); background: var(--bg-hover); color: var(--text-secondary); margin: 1px 0; white-space: nowrap; }
.pcp-por.ok { background: var(--success-light); color: var(--success-text); }
.pcp-por.al { background: var(--warning-light); color: var(--warning-text); font-weight: 600; }
.pcp-por.ruim { background: var(--danger-light); color: var(--danger-text); font-weight: 600; }
.pcp-por.r { background: var(--warning-light); color: var(--warning-text); }
.pcp-rotulo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 600; }
.pcp-rotulo select { max-width: 380px; }
.pcp-tur td { vertical-align: middle; }
.pcp-tchip { display: inline-flex; align-items: center; gap: 4px; background: var(--primary-light); color: var(--text-primary); border-radius: var(--radius); padding: 3px 8px; font-size: var(--fs-xs); margin: 2px 2px 2px 0; font-variant-numeric: tabular-nums; }
.pcp-tchip.ex { background: var(--warning-light); color: var(--warning-text); }
.pcp-tchip button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0 2px; }
.pcp-tur-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 6px; }
.pcp-tur-form label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.pcp-tur-form input[type=time] { width: 110px; }
.pcp-tur-form input[type=number] { width: 90px; }
.pcp-tur-form select, .pcp-tur-form input[type=text] { width: auto; min-width: 180px; }
.pcp-dias { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.pcp-dias label { gap: 4px; }
.pcp-regras { display: flex; flex-direction: column; gap: 4px; max-width: 460px; }
.pcp-regras label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-sm); }
.pcp-regras input { width: 100px; }
.pcp-regras button { align-self: flex-start; margin-top: 8px; }
.pcp-reg-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.pcp-reg-check input { width: auto; }
/* PCP: pulmão das máquinas que não podem parar */
.pcp-card tbody tr.pcp-pulmao-l td { white-space: normal; font-size: var(--fs-xs); color: var(--text-primary); }
.pcp-pulmao-l td > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pcp-pulmao-l.ok td { background: var(--success-light); box-shadow: inset 3px 0 0 var(--success-text); }
.pcp-pulmao-l.al td { background: var(--warning-light); box-shadow: inset 3px 0 0 var(--warning-text); }
.pcp-pulmao-l.ruim td { background: var(--danger-light); box-shadow: inset 3px 0 0 var(--danger-text); }
.pcp-pulmao-l small { color: var(--text-secondary); }
.pcp-pulmao-bar { flex: 1 1 80px; min-width: 60px; height: 6px; border-radius: var(--radius-xs); background: var(--border-color); overflow: hidden; }
.pcp-pulmao-bar i { display: block; height: 100%; background: currentColor; }
.pcp-pulmao-l.ok .pcp-pulmao-bar { color: var(--success-text); }
.pcp-pulmao-l.al .pcp-pulmao-bar { color: var(--warning-text); }
.pcp-pulmao-l.ruim .pcp-pulmao-bar { color: var(--danger-text); }
.pcp-pulmao-adi { display: block; margin-top: 3px; }
.pcp-card tbody tr.pcp-janela-l.tambor td { background: var(--danger-light); color: var(--danger-text); box-shadow: inset 3px 0 0 var(--danger-text); }
.pcp-janela-l.tambor i { color: var(--danger-text); }
.pcp-reg-pulmao { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; }
.pcp-reg-pulmao legend { font-weight: 600; padding: 0 4px; color: var(--text-primary); }
.pcp-puxar { border: 1px solid currentColor; background: var(--bg-card); color: inherit; border-radius: var(--radius-sm); padding: 0 6px; font: inherit; font-size: var(--fs-2xs); font-weight: 600; cursor: pointer; margin-left: 2px; }
.pcp-puxar:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
/* PCP: imprevistos */
.pcp-imp-btn i, .pcp-imp-ico i { color: var(--warning-text); }
.pcp-card tbody tr.pcp-imp-l td { background: var(--warning-light); color: var(--text-primary); font-size: var(--fs-xs); white-space: normal; box-shadow: inset 3px 0 0 var(--warning-text); }
.pcp-card tbody tr.pcp-imp-l.parada td { background: var(--danger-light); box-shadow: inset 3px 0 0 var(--danger-text); }
.pcp-imp-l i { color: var(--warning-text); }
.pcp-imp-l.parada i { color: var(--danger-text); }
.pcp-imp-acoes { white-space: nowrap; }
.pcp-imp-em { background: var(--warning-light); color: var(--warning-text); }
.pcp-imp-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--warning-light); color: var(--warning-text); font-size: .8em; font-weight: 600; }
/* chapa e pantone: etiqueta na impressão (a conferir, ✓, falta, previsão vencida) e a janela de registro */
.pcp-lib { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; border: 1px dashed var(--border-strong); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--fs-2xs); font-weight: 600; font-style: normal; line-height: 18px; cursor: pointer; white-space: nowrap; }
.pcp-lib:hover { border-color: var(--primary); color: var(--primary); }
.pcp-lib.ok, .pcp-lib.falta, .pcp-lib.vencida { border: 1px solid transparent; }
.pcp-lib.ok { background: var(--success-light); color: var(--success-text); }
.pcp-lib.falta { background: var(--danger-light); color: var(--danger-text); }
.pcp-lib.vencida { background: var(--warning-light); color: var(--warning-text); }
em.pcp-lib { cursor: default; }
.pcp-lib-tag { background: var(--danger-light); color: var(--danger-text); }
.pcp-imp-form .pcp-lib-item { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 8px 12px 10px; }
.pcp-lib-item legend { padding: 0 4px; }
.pcp-lib-item legend small { font-weight: 400; color: var(--text-secondary); margin-left: 4px; }
.pcp-lib-op { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: var(--fs-sm); color: var(--text-primary); }
.pcp-lib-op label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.pcp-lib-op small { color: var(--text-secondary); }
.pcp-lib-quando { margin-top: 8px; display: grid; gap: 6px; }
.pcp-lib-quando[hidden] { display: none; }
.pcp-lib-aviso { display: flex; gap: 8px; align-items: flex-start; }
.pcp-imp-g { display: flex; flex-direction: column; gap: 4px; background: var(--warning); color: #1f1300; border-radius: var(--radius-lg); padding: 16px 20px; font-size: var(--fs-2xl); font-weight: 700; margin-bottom: 12px; box-shadow: var(--shadow-md); }
.pcp-imp-g small { font-size: var(--fs-md); font-weight: 600; }
.pcp-imp-form fieldset { border: 0; padding: 0; margin: 12px 0 0; }
.pcp-imp-form legend { font-weight: 600; font-size: var(--fs-sm); color: var(--text-primary); margin-bottom: 6px; }
.pcp-imp-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 12px; }
.pcp-imp-tipos label { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--text-primary); cursor: pointer; }
.pcp-imp-rapido { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pcp-imp-rapido button { border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.pcp-imp-rapido button:hover { border-color: var(--primary); color: var(--primary); }
.pcp-imp-prev { margin-top: 12px; border-radius: var(--radius); padding: 10px 14px; background: var(--bg-hover, rgba(0,0,0,.03)); border: 1px solid var(--border-color); font-size: var(--fs-sm); color: var(--text-primary); }
.pcp-imp-prev ul { margin: 6px 0 4px 18px; padding: 0; }
.pcp-imp-prev li.ruim { color: var(--danger-text); font-weight: 600; }
.pcp-imp-prev li.ok { color: var(--success-text); }
#pcpImpTrabBox[hidden] { display: none; }
/* PCP: trocar máquina e apontamentos faltando */
.pcp-troca { color: var(--primary); font-weight: 600; }
.pcp-trazer { margin: 10px 0; border: 1px dashed var(--border-color); border-radius: var(--radius); padding: 8px 12px; }
.pcp-trazer summary { cursor: pointer; font-weight: 600; color: var(--text-primary); font-size: var(--fs-sm); }
.pcp-trazer form { margin-top: 8px; }
.pcp-acoes-l select optgroup { font-style: normal; }
.pcp-apont td { vertical-align: top; }
.nav-subitem .badge { margin-left: auto; }
/* PCP: gargalos — ordens do dia ao passar o mouse */
.pcp-carga td[data-pcp-cg] { cursor: pointer; }
.pcp-carga td[data-pcp-cg]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.pcp-cg-tip { position: fixed; z-index: 3000; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.18)); padding: 10px 12px; font-size: var(--fs-sm); max-height: 70vh; overflow: auto; pointer-events: none; }
.pcp-cg-tip > b { display: block; }
.pcp-cg-tip > small { display: block; color: var(--text-secondary); margin-top: 2px; }
.pcp-cg-tip ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pcp-cg-tip li { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: baseline; border-top: 1px solid var(--border-color); padding-top: 6px; }
.pcp-cg-tip li > span:first-child { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pcp-cg-tip li small { display: block; color: var(--text-secondary); font-size: var(--fs-xs); }
.pcp-cg-tip li em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.pcp-cg-tip li.atrasa b { color: var(--danger-text); }
.pcp-cg-tip li.man { color: var(--warning-text); }
/* PCP: travar a programação do dia */
.pcp-trava-btn { align-self: center; }
.pcp-trava-box { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--success, #16a34a); background: color-mix(in srgb, var(--success, #16a34a) 10%, var(--bg-card)); border-radius: var(--radius); padding: 6px 12px; color: var(--text-primary); font-size: var(--fs-sm); }
.pcp-trava-box > i { color: var(--success, #16a34a); }
.pcp-trava-box span { display: flex; flex-direction: column; line-height: 1.25; }
.pcp-trava-box small { color: var(--text-secondary); font-size: var(--fs-xs); }
.pcp-trava-ico { color: var(--success, #16a34a); font-size: .85em; }
.pcp-trava-txt { color: var(--text-secondary); }
tr.pcp-travada td.pcp-ord { text-align: center; }
.pcp-trava-tag { color: var(--success, #16a34a); font-weight: 600; }
.pcp-trava-aviso { border-left: 4px solid var(--warning, #d97706); background: color-mix(in srgb, var(--warning, #d97706) 10%, var(--bg-card)); padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-primary); }
.pcp-recebida { background: var(--primary-light); color: var(--text-primary); border-radius: var(--radius); padding: 8px 12px; font-weight: 600; animation: pcp-recebida 1.2s ease-in-out 3; }
@keyframes pcp-recebida { 50% { box-shadow: 0 0 0 4px var(--primary-light); } }
@media (prefers-reduced-motion: reduce) { .pcp-recebida { animation: none; } }
.pcp-seq-n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--bg-hover, rgba(0,0,0,.06)); font-size: .8em; font-weight: 600; margin-right: 4px; }
.pcp-trava-tab tr.pcp-vazia td { color: var(--text-secondary); }
/* PCP: feriados nacionais */
.pcp-fer-nac { margin-top: 14px; border: 1px solid var(--border-color); border-radius: var(--radius); padding: 10px 12px; }
.pcp-fer-nac summary { cursor: pointer; color: var(--text-primary); }
.pcp-fer-nac-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 14px; margin: 10px 0; }
.pcp-fer-nac-l label { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-primary); cursor: pointer; }
.pcp-fer-nac-l label.facult span { color: var(--text-secondary); }
.pcp-fer-nac-l input { margin-top: 3px; }
/* PCP: PackFlow na fila da acopladora */
.pcp-pf-dica { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-secondary); }
.pcp-pf-lista .pcp-tchip { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pcp-pf-ops { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pcp-pf-ops label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border-color); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; color: var(--text-primary); font-size: var(--fs-sm); }
.pcp-pf-ops label:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.pcp-pf-ops input { margin-top: 3px; }
.pcp-pf-ops small { display: block; color: var(--text-secondary); margin-top: 2px; }
/* PCP: simular OP (orçamento) */
.pcp-sim-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; padding: 10px 12px; }
.pcp-sim-ops button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-card); padding: 8px 10px; cursor: pointer; color: var(--text-primary); font-size: var(--fs-xs); }
.pcp-sim-ops button b { font-size: var(--fs-md); }
.pcp-sim-ops button span, .pcp-sim-ops button small { color: var(--text-secondary); }
.pcp-sim-ops button strong { color: var(--primary); }
.pcp-sim-ops button.ativo { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.pcp-sim-busca { padding: 10px 12px 0; }
.pcp-sim-busca input { width: 100%; max-width: 420px; }
.pcp-sim-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pcp-sim-urg { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 10px 12px; }
.pcp-sim-urg label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--text-secondary); }
.pcp-sim-res { margin: 0 12px 10px; padding: 9px 12px; border-radius: var(--radius); font-size: var(--fs-sm); color: var(--text-primary); }
.pcp-sim-res.ok { background: var(--success-light); } .pcp-sim-res.ok i { color: var(--success); }
.pcp-sim-res.ruim { background: var(--danger-light); } .pcp-sim-res.ruim i { color: var(--danger); }
.pcp-sim-res + .pcp-dica, .pcp-sim-urg ~ .pcp-dica { padding: 0 12px; }
.pped-prazo { margin-top: 10px; }
.pped-prazo-dica { display: block; margin-top: 6px; font-size: var(--fs-2xs); color: var(--text-secondary); }
/* PCP: barras de tempo vivas — pulsam perto do previsto e ao estourar */
@keyframes pcpPulsoBarra { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes pcpBrilho { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.pcp-barra-trilho i { transition: width .9s linear, background-color .4s; overflow: hidden; }
.pcp-barra.ok .pcp-barra-trilho i::after { content: ''; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: pcpBrilho 2.4s linear infinite; }
.pcp-barra.quase .pcp-barra-trilho i { background: var(--warning); animation: pcpPulsoBarra 1.6s ease-in-out infinite; }
.pcp-barra.al .pcp-barra-trilho i { animation: pcpPulsoBarra 1.1s ease-in-out infinite; }
.pcp-barra.ruim .pcp-barra-trilho i { animation: pcpPulsoBarra .7s ease-in-out infinite; }
.pcp-barra.ruim .pcp-barra-trilho { box-shadow: 0 0 0 2px var(--danger-light); }
.pcp-barra span { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .pcp-barra .pcp-barra-trilho i, .pcp-barra .pcp-barra-trilho i::after { animation: none !important; transition: none; } }
/* PCP: plano para ficar em dia */
.pcp-emdia-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 10px 12px; }
.pcp-emdia-dia { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 8px 10px; background: var(--bg-card); min-width: 0; }
.pcp-emdia-dt { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--text-primary); text-transform: capitalize; }
.pcp-emdia-dia ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pcp-emdia-dia li { display: flex; gap: 8px; font-size: var(--fs-xs); color: var(--text-primary); align-items: flex-start; overflow-wrap: anywhere; }
.pcp-emdia-dia li > i { color: var(--warning-text); margin-top: 2px; width: 14px; flex: none; }
.pcp-emdia-dia li.pcp-emdia-prio > i { color: var(--primary); }
.pcp-emdia-dia li.pcp-vazio { color: var(--text-secondary); }
/* PCP: OPs que ficam prontas no dia */
.pcp-prontas { border-top: 3px solid var(--success); }
.pcp-prontas h3 i { color: var(--success); margin-right: 4px; }
.pcp-grade .pcp-prontas thead th:nth-child(3) { width: 16%; }
.pcp-grade .pcp-prontas thead th:nth-child(4) { width: 30%; }
@media screen and (max-width: 640px) { .pcp-grade .pcp-prontas thead th:nth-child(3) { width: 24%; } .pcp-grade .pcp-prontas thead th:nth-child(4) { width: 40%; } }
.pcp-prontas tr.pcp-pronta-prev { box-shadow: inset 3px 0 0 var(--primary); }
.pcp-prontas tr.pcp-pronta-prev .pcp-dot { background: var(--primary); }
.pcp-pronta-st { font-size: var(--fs-xs); font-weight: 600; color: var(--primary); white-space: nowrap; }
.pcp-pronta-st.ok { color: var(--success-text); }
/* PCP: GD (programado × realizado) */
.pcp-gd-sel { width: auto; min-width: 200px; display: inline-block; padding: 4px 8px; height: 32px; }
.pcp-gd { border-collapse: collapse; font-size: var(--fs-xs); background: var(--bg-card); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.pcp-gd th, .pcp-gd td { border: 1px solid var(--border-color); padding: 4px 6px; text-align: right; white-space: nowrap; color: var(--text-primary); }
.pcp-gd thead th { background: var(--bg-hover); text-align: center; font-weight: 600; color: var(--danger-text); }
.pcp-gd thead th.hoje { background: var(--primary-light); }
.pcp-gd thead th.sel { box-shadow: inset 0 -3px 0 var(--primary); }
.pcp-gd th.pcp-gd-h { text-align: left; background: var(--bg-hover); color: var(--danger-text); font-weight: 600; min-width: 92px; }
.pcp-gd th.pcp-gd-h small { display: block; font-weight: 400; color: var(--text-secondary); }
.pcp-gd td.pa { color: var(--text-secondary); background: var(--bg-hover); }
.pcp-gd td.baixo { color: var(--danger-text); font-weight: 600; }
.pcp-gd td.pcp-gd-x { background: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--bg-hover) 4px, var(--bg-hover) 8px); }
.pcp-gd td.pcp-gd-sem { vertical-align: middle; font-weight: 600; }
.pcp-gd .pcp-gd-pct { text-align: center; font-weight: 600; }
.pcp-gd .pcp-gd-pct.ok { color: var(--success-text); background: var(--success-light); }
.pcp-gd .pcp-gd-pct.al { color: var(--warning-text); background: var(--warning-light); }
.pcp-gd .pcp-gd-pct.ruim { color: var(--danger-text); background: var(--danger-light); }
.pcp-gd tfoot td, .pcp-gd tfoot th { font-weight: 600; background: var(--bg-hover); text-align: center; }
.pcp-gd tr.pcp-gd-fora td, .pcp-gd tr.pcp-gd-fora th { color: var(--text-secondary); font-size: var(--fs-2xs); }
.pcp-gd-dia .pcp-gd-st { font-size: var(--fs-xs); font-weight: 600; }
.pcp-gd-dia tr.pcp-gd-ok .pcp-gd-st { color: var(--success-text); }
.pcp-gd-dia tr.pcp-gd-parc .pcp-gd-st { color: var(--warning-text); }
.pcp-gd-dia tr.pcp-gd-nao .pcp-gd-st { color: var(--danger-text); }
.pcp-gd-dia tr.pcp-gd-nao { box-shadow: inset 3px 0 0 var(--danger); }
.pcp-gd-dia tr.pcp-gd-parc { box-shadow: inset 3px 0 0 var(--warning); }
.pcp-gd-mot { font-size: var(--fs-xs); padding: 3px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); max-width: 200px; }
.pcp-gd-extra { padding: 8px 12px; }
.pcp-gd-pareto { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.pcp-gd-pareto div { display: grid; grid-template-columns: 200px 1fr 40px; gap: 8px; align-items: center; font-size: var(--fs-xs); color: var(--text-primary); }
.pcp-gd-pareto em { height: 10px; background: var(--bg-hover); border-radius: var(--radius-xs); overflow: hidden; }
.pcp-gd-pareto em i { display: block; height: 100%; background: var(--danger); }
.pcp-gd-pareto b { text-align: right; }
@media (max-width: 640px) { .pcp-gd-pareto div { grid-template-columns: 1fr 60px 30px; } }
/* Pedidos: previsão do PCP */
.pped-prev { display: block; font-size: var(--fs-2xs); margin-top: 2px; color: var(--text-secondary); white-space: nowrap; }
.pped-prev.ok { color: var(--success-text); }
.pped-prev.atr { color: var(--danger-text); font-weight: 600; }
.pped-opp-l .pped-prev { display: inline; }
/* PCP: aviso de OP urgente fora do QAP */
.pcp-urg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--warning-light); color: var(--warning-text); border: 1px solid var(--warning); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 12px; font-size: var(--fs-sm); }
.pcp-urg span { flex: 1; min-width: 200px; }
.pcp-urg b { color: var(--text-primary); }
/* PCP: quanto falta (operador) e janela livre */
.pcp-faltam { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pcp-faltam span { font-size: var(--fs-md) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text-primary) !important; }
.pcp-faltam button { border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary); border-radius: var(--radius); padding: 10px 16px; font: inherit; font-size: var(--fs-lg); font-weight: 600; cursor: pointer; min-width: 72px; }
.pcp-faltam button:hover { border-color: var(--primary); color: var(--primary); }
.pcp-faltam input { width: 90px; padding: 10px; font-size: var(--fs-lg); border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-input); color: var(--text-primary); }
.pcp-faltam small { width: 100%; font-size: var(--fs-md) !important; }
.pcp-card tbody tr.pcp-janela-l td { background: var(--primary-light); color: var(--text-primary); font-size: var(--fs-xs); white-space: normal; box-shadow: inset 3px 0 0 var(--primary); }
.pcp-janela-l i { color: var(--primary); }
/* PCP: OPs deixadas de lado */
.pcp-kpi-btn { font: inherit; cursor: pointer; }
.pcp-kpi-btn:hover { border-color: var(--primary); }
.pcp-lado-sug { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: var(--warning-light); color: var(--warning-text); font-size: var(--fs-xs); border-bottom: 1px solid var(--border-color); }
.pcp-lado-sug .btn { margin-left: auto; }
/* PCP: barra de tempo e alertas (máquina parada, estouro) */
.pcp-alertas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pcp-al { display: inline-flex; align-items: center; gap: 7px; border: 0; background: var(--bg-card); color: var(--text-primary); border-radius: 999px; padding: 6px 14px 6px 11px; font: inherit; font-size: var(--fs-xs); cursor: pointer; box-shadow: var(--shadow-sm); transition: background .15s; }
.pcp-al:hover { background: var(--bg-hover, var(--bg-card)); }
.pcp-al:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pcp-al i { color: var(--warning-text); font-size: var(--fs-xs); }
.pcp-al b { font-weight: 600; }
.pcp-al span { color: var(--text-secondary); }
.pcp-al em { font-style: normal; font-weight: 600; font-size: var(--fs-2xs); color: var(--warning-text); background: var(--warning-light); border-radius: 999px; padding: 1px 7px; }
.pcp-al.ruim i, .pcp-al.ruim em { color: var(--danger-text); }
.pcp-al.ruim em { background: var(--danger-light); }
.pcp-al.ruim i { animation: pcp-pisca 2s ease-in-out infinite; }
@keyframes pcp-pisca { 50% { opacity: .35; } }
@keyframes pcp-pulsa { 50% { box-shadow: 0 0 0 4px rgba(var(--danger-rgb), .18); } }
@media (prefers-reduced-motion: reduce) { .pcp-al.ruim i, .pcp-parada-g { animation: none; } }
.pcp-card.pcp-card-alerta { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger), var(--shadow-sm); }
.pcp-card tbody tr.pcp-barra-l td { border-top: 0; padding: 0 10px 8px; background: var(--warning-light); box-shadow: inset 3px 0 0 var(--warning); }
.pcp-card tbody tr.pcp-parada-l td { background: var(--danger-light); color: var(--danger-text); font-weight: 600; font-size: var(--fs-xs); box-shadow: inset 3px 0 0 var(--danger); }
.pcp-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-2xs); color: var(--text-secondary); }
.pcp-barra-trilho { position: relative; flex: 1; height: 6px; border-radius: var(--radius-xs); background: var(--border-color); overflow: hidden; min-width: 80px; }
.pcp-barra-trilho i { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-xs); background: var(--success); }
.pcp-barra-trilho b { position: absolute; top: 0; bottom: 0; left: 66.67%; width: 2px; background: var(--text-primary); opacity: .45; }
.pcp-barra.al .pcp-barra-trilho i { background: var(--warning); }
.pcp-barra.ruim .pcp-barra-trilho i { background: var(--danger); }
.pcp-barra.al span strong { color: var(--warning-text); }
.pcp-barra.ruim span strong { color: var(--danger-text); }
.pcp-barra span { white-space: nowrap; }
.pcp-barra.g { margin-top: 10px; font-size: var(--fs-lg); color: var(--text-primary); }
.pcp-barra.g .pcp-barra-trilho { height: 14px; border-radius: 7px; }
.pcp-agora.al { border-color: var(--warning); }
.pcp-agora.ruim { background: var(--danger-light); border-color: var(--danger); border-left-color: var(--danger); }
.pcp-agora.ruim span { color: var(--danger-text); }
.pcp-parada-g { display: flex; flex-direction: column; gap: 4px; background: var(--danger); color: #fff; border-radius: var(--radius-lg); padding: 16px 20px; font-size: 26px; font-weight: 700; margin-bottom: 12px; animation: pcp-pulsa 2s ease-in-out infinite; }
.pcp-parada-g small { font-size: var(--fs-md); font-weight: 500; opacity: .95; }
/* PCP: dia do QAP, prévia, PackFlow e acessos */
.pcp-dia-sel { display: inline-flex; border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow-sm); }
.pcp-dia-sel button { border: 0; background: none; color: var(--text-primary); padding: 7px 14px; cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 600; }
.pcp-dia-sel button + button { border-left: 1px solid var(--border-color); }
.pcp-dia-sel button small { font-weight: 400; color: var(--text-secondary); margin-left: 4px; }
.pcp-dia-sel button.ativo { background: var(--primary); color: #fff; }
.pcp-dia-sel button.ativo small { color: rgba(255,255,255,.85); }
.pcp-card tbody tr.pcp-previa td { background: var(--bg-hover); padding: 8px 10px; }
.pcp-prev-tit { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); margin-bottom: 6px; }
.pcp-prev { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pcp-prev-dia { min-width: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 5px 8px; display: flex; flex-direction: column; gap: 1px; }
.pcp-prev-dia b { font-size: var(--fs-xs); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcp-prev-dia small { font-size: var(--fs-2xs); color: var(--text-secondary); }
.pcp-prev-dia span { font-size: var(--fs-2xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pcp-prev-dia.livre { background: transparent; border-style: dashed; }
.pcp-prev-carga { display: block; height: 4px; border-radius: 2px; background: var(--border-color); overflow: hidden; margin: 2px 0 1px; }
.pcp-prev-carga i { display: block; height: 100%; background: var(--success); }
.pcp-prev-carga.al i { background: var(--warning); }
.pcp-prev-carga.ruim i { background: var(--danger); }
.pcp-previa-g { background: var(--bg-hover); border-radius: var(--radius-lg); padding: 12px 14px; margin-top: 12px; }
.pcp-previa-g .pcp-prev-tit { font-size: var(--fs-sm); }
.pcp-previa-g .pcp-prev-dia { padding: 8px 12px; }
.pcp-previa-g .pcp-prev-dia b { font-size: var(--fs-lg); }
.pcp-previa-g .pcp-prev-dia small, .pcp-previa-g .pcp-prev-dia span { font-size: var(--fs-md); }
.pcp-pf { background: var(--bg-card); border: 1px solid var(--border-color); border-left: 4px solid var(--purple); border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 14px; box-shadow: var(--shadow-sm); color: var(--text-primary); }
.pcp-pf > div:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pcp-pf > div:first-child i { color: var(--purple); }
.pcp-pf-lista { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; font-size: var(--fs-xs); color: var(--text-secondary); }
.pcp-ace td { vertical-align: middle; }
.pcp-ace select { min-width: 190px; }
.pcp-ace-set { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-xs); max-width: 360px; }
.pcp-ace-set label { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
@media (max-width: 640px) { .pcp-plano-grade { grid-template-columns: 1fr; } .pcp-rotulo { flex-direction: column; align-items: stretch; } }
/* tela da máquina (computador na produção) */
.pcp-maq h2 { font-size: 30px; margin: 12px 0; color: var(--text-primary); }
.pcp-maq h2 small { font-size: var(--fs-md); font-weight: 400; color: var(--text-secondary); }
.pcp-maq h3 { font-size: var(--fs-xl); margin: 20px 0 8px; color: var(--text-primary); }
.pcp-agora { display: flex; flex-direction: column; gap: 4px; background: var(--warning-light); border: 1px solid var(--warning); border-left: 6px solid var(--warning); border-radius: var(--radius-lg); padding: 16px 20px; color: var(--text-primary); }
.pcp-agora span { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--warning-text); }
.pcp-agora b { font-size: 28px; }
.pcp-agora small { font-size: var(--fs-lg); color: var(--text-secondary); }
.pcp-agora.pcp-livre { background: var(--bg-card); border-color: var(--border-color); border-left-color: var(--text-secondary); }
.pcp-agora.pcp-livre span { color: var(--text-secondary); }
.pcp-aviso-g { background: var(--danger-light); color: var(--danger-text); font-size: var(--fs-xl); font-weight: 700; padding: 12px 16px; border-radius: var(--radius); }
.pcp-tab-g { width: 100%; border-collapse: collapse; font-size: 19px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }
.pcp-tab-g th { text-align: left; font-size: var(--fs-sm); text-transform: uppercase; color: var(--text-secondary); padding: 10px 12px; }
.pcp-tab-g td { border-top: 1px solid var(--border-color); padding: 12px; color: var(--text-primary); }
.pcp-tab-g .num { text-align: right; font-variant-numeric: tabular-nums; }
.pcp-tab-g td small { display: block; font-size: var(--fs-md); color: var(--text-secondary); }
@media screen and (max-width: 700px) { .pcp-grade { grid-template-columns: 1fr; } .pcp-leg { margin-left: 0; } }
@media print {
    body.pcp-imprimindo * { visibility: hidden; }
    #view-pcp.active, #view-pcp.active * { visibility: visible; }
    #view-pcp.active { position: absolute; inset: 0; }
    #view-pcp .pcp-acoes, #view-pcp .pcp-ico { display: none !important; }
    .pcp-grade { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .pcp-card { box-shadow: none; break-inside: avoid; }
    .pcp-card table { font-size: 9px; }
    @page { size: A3 landscape; margin: 8mm; }
}

/* ------------------------------------------------------------------ sombras e alinhamento do menu (09/10) */
/* profundidade: barra lateral e topo com sombra suave; cartões sobem um pouco ao passar o mouse */
.sidebar { box-shadow: 2px 0 16px rgba(15,23,42,0.06); }
[data-theme="dark"] .sidebar { box-shadow: 2px 0 18px rgba(0,0,0,0.35); }
.topbar { box-shadow: 0 1px 0 var(--border-color), 0 6px 16px -10px rgba(15,23,42,0.18); border-bottom-color: transparent; }
[data-theme="dark"] .topbar { box-shadow: 0 1px 0 var(--border-color), 0 8px 18px -10px rgba(0,0,0,0.6); }
.pcp-card { box-shadow: var(--shadow); transition: box-shadow .2s ease, transform .2s ease; }
.pcp-card:hover { box-shadow: var(--shadow-md); }
.pcp-kpi, .pcp-dia-sel, .pcp-al { box-shadow: var(--shadow); }
.pcp-alerta, .pcp-urg, .pcp-pf, .pcp-trava-box { box-shadow: var(--shadow-sm); }
.pcp-cg-tip { box-shadow: var(--shadow-lg); }
.nav-item.active { box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 6px 16px rgba(var(--primary-rgb), 0.35); }
.nav-subitem.active { box-shadow: inset 2px 0 0 var(--primary); }
@media (prefers-reduced-motion: reduce) { .pcp-card { transition: none; } }

/* menu: títulos das seções na mesma linha dos ícones; setinha dos grupos sempre na direita
   (o número escondido não empurra mais a setinha do PackFlow para perto do texto) */
.nav-secao { padding-left: 24px; padding-right: 24px; }
.nav-grupo .badge[style*="display:none"] + .nav-seta, .nav-grupo .badge[style*="display: none"] + .nav-seta { margin-left: auto; }
.nav-grupo .nav-seta { width: 12px; text-align: center; flex: none; }
.nav-subitem { min-height: 32px; line-height: 1.25; }
.nav-subitem i { flex: none; }
.nav-subitem .badge { flex: none; padding: 1px 8px; border-radius: var(--radius); font-size: var(--fs-3xs); font-weight: 600; }

/* ===== Administrativo → Faturamento → Fretes (assets/js/crm/fretes.js) ===== */
#view-faturamento .frt-filtros { margin-bottom: 12px; }
/* cartões: largura mínima que cabe "− R$ 1.234.567,89"; se não couber, o valor quebra a linha (nunca passa por cima do vizinho) */
/* todos os cartões numa linha só (a tela larga reparte o espaço; a estreita rola para o lado em vez de quebrar em outra linha) */
.frt-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(128px, 1fr); gap: 8px; margin: 4px 0 6px; overflow-x: auto; padding-bottom: 4px; }
.frt-cards .frt-card { padding: 10px 11px; }
.frt-cards .frt-card span { font-size: var(--fs-3xs); letter-spacing: .3px; }
.frt-cards .frt-card b { font-size: var(--fs-lg); letter-spacing: -.2px; }
.frt-cards .frt-card small { font-size: var(--fs-3xs); }
.frt-card { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; text-align: left; font: inherit; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 12px 14px; }
.frt-card span { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); line-height: 1.3; }
.frt-card b { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.3px; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.frt-card small { font-size: var(--fs-2xs); color: var(--text-secondary); line-height: 1.35; overflow-wrap: anywhere; }
.frt-conta { margin: 6px 0 4px; font-size: var(--fs-xs); line-height: 1.6; color: var(--text-secondary); }
.frt-conta b { color: var(--text-primary); font-variant-numeric: tabular-nums; } .frt-conta em { font-style: normal; opacity: .8; }
.frt-conta span { white-space: normal; }
.frt-card-dif.pos b { color: var(--success-text); } .frt-card-dif.neg b { color: var(--danger-text); }
[data-theme="dark"] .frt-card-dif.pos b { color: #34d399; } [data-theme="dark"] .frt-card-dif.neg b { color: #f87171; }
.frt-tab tfoot td { font-weight: 600; border-top: 2px solid var(--border-color); border-bottom: 0; }
.frt-tab-wrap { max-height: 70vh; overflow: auto; }
.frt-tab-wrap .frt-tab thead th { position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
.frt-canvas { position: relative; margin-top: 8px; }
.frt-acessos select { width: auto; min-width: 160px; }
.frt-card-desp { border-left: 4px solid var(--danger); }
.frt-card-conf { border-left: 4px solid var(--warning); cursor: pointer; }
.frt-card-conf:hover { background: var(--bg-hover); }
.frt-dif.pos { color: var(--success-text); } .frt-dif.neg { color: var(--danger-text); }
[data-theme="dark"] .frt-dif.pos { color: #34d399; } [data-theme="dark"] .frt-dif.neg { color: #f87171; }
.frt-tab tbody tr[data-frt-id] { cursor: pointer; }
.frt-tab tbody tr[data-frt-id]:hover, .frt-tab tbody tr[data-frt-id]:focus-visible { background: var(--bg-hover); outline: none; }
.frt-tab td small { display: block; font-size: var(--fs-2xs); color: var(--text-secondary); }
.frt-cte b { font-variant-numeric: tabular-nums; }
.frt-classif { font-size: var(--fs-xs); font-weight: 600; } .frt-classif.desp { color: var(--danger-text); }
.frt-st-ok { background: rgba(16,185,129,.15); color: #059669; }
.frt-st-acima { background: rgba(239,68,68,.14); color: #dc2626; }
.frt-st-sem { background: var(--bg-hover); color: var(--text-secondary); }
.frt-st-conferir { background: rgba(245,158,11,.18); color: #b45309; }
.frt-st-vinculo { background: rgba(99,102,241,.16); color: #4f46e5; }
.frt-sug-dica { color: #4f46e5; }
.frt-sug { margin: 14px 0; padding: 12px 14px; border: 1px solid rgba(99,102,241,.4); background: rgba(99,102,241,.07); border-radius: var(--radius); }
.frt-sug h4 { margin: 0 0 4px; font-size: var(--fs-md); }
.frt-sug p { margin: 0 0 8px; font-size: var(--fs-xs); color: var(--text-secondary); }
.frt-sug-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-color); }
.frt-sug-item small { display: block; color: var(--text-secondary); font-size: var(--fs-xs); }
.frt-sug-valor { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 600; }
@media (max-width: 640px) { .frt-sug-item { flex-direction: column; align-items: flex-start; } }
.frt-corr { color: var(--primary) !important; } .frt-corr i { font-size: var(--fs-3xs); margin-right: 2px; }
.frt-teste { display: inline-block !important; margin-left: 4px; padding: 0 6px; border-radius: var(--radius-sm); background: rgba(139,92,246,.13); color: #7c3aed !important; font-weight: 600; }
.frt-erro { margin: 8px 0; padding: 8px 12px; border-radius: var(--radius); background: var(--danger-light); color: var(--danger-text); font-size: var(--fs-sm); }
.frt-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; margin-top: 10px; }
.frt-res-bloco { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 12px 14px; min-width: 0; overflow-x: auto; }
.frt-res-bloco h3 { margin: 0; font-size: var(--fs-md); } .frt-res-bloco h3 small { font-weight: 400; color: var(--text-secondary); margin-left: 6px; }
.frt-res-bloco .pf2-tab { margin-top: 8px; }
.frt-form .frt-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.frt-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin-bottom: 0; } .frt-campo.larg { grid-column: 1 / -1; }
.frt-campo > span { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); letter-spacing: .02em; }
.frt-campo textarea { min-height: 60px; }
.frt-campo :disabled { opacity: .75; cursor: not-allowed; }
/* cargo sem comercial (Produção/Financeiro): sem atalhos do comercial no topo */
body.so-packflow .btn-topo-novo, body.so-packflow .mobile-drawer-btn { display: none !important; }
.frt-campo small { font-size: var(--fs-2xs); color: var(--text-secondary); }
.frt-hist { margin: 12px 0 0; font-size: var(--fs-xs); color: var(--text-secondary); }
@media (max-width: 600px) {
    .frt-form .frt-grade { grid-template-columns: 1fr; }
    .frt-resumo { grid-template-columns: 1fr; }
    .frt-card b { font-size: var(--fs-lg); }
}
/* Faturamento → Fretes: visão geral (gráficos em cima, lançamentos embaixo) */
.frt-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.frt-topo .painel-abas { margin-bottom: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.frt-topo .painel-abas button { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 520px) { .frt-topo .painel-abas { gap: 2px; } .frt-topo .painel-abas button { padding: 7px 8px; font-size: var(--fs-sm); } .frt-topo .painel-abas i { display: none; } .frt-topo .painel-abas { width: 100%; } .frt-topo .painel-abas button { flex: 1 0 auto; } }
.frt-filtros-dir { display: inline-flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.frt-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; margin: 14px 0 6px; }
.frt-graf-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px 16px 12px; min-width: 0; }
.frt-graf-card.larg { grid-column: 1 / -1; }
.frt-graf-tit { display: flex; flex-direction: column; gap: 2px; }
.frt-graf-tit h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.frt-graf-tit small { font-size: var(--fs-xs); color: var(--text-secondary); }
.frt-numeros { margin: 4px 0 6px; }
.frt-numeros > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); padding: 6px 0; list-style-position: inside; }
.frt-numeros > summary i { margin-right: 4px; }
.frt-res-bloco h4 { margin: 0; font-size: var(--fs-sm); }
.frt-res-bloco .frt-tab td:first-child { white-space: normal; }   /* nome longo de transportadora quebra a linha em vez de cortar a Diferença */
.frt-acao { width: 1%; text-align: right; }
.frt-excluir { border: 0; background: none; color: var(--text-secondary); width: 30px; height: 30px; border-radius: var(--radius); cursor: pointer; font-size: var(--fs-md); }
.frt-excluir:hover, .frt-excluir:focus-visible { color: var(--danger); background: var(--danger-light); outline: none; }
.frt-bt-excluir { color: var(--danger-text) !important; }
.frt-bt-excluir:hover { border-color: var(--danger) !important; background: var(--danger-light) !important; }
.frt-manual { color: var(--text-secondary) !important; } .frt-manual i { font-size: var(--fs-3xs); margin-right: 2px; }
.frt-card span i { margin-right: 3px; opacity: .8; }
.frt-tab td:first-child, .frt-tab .frt-cte b, .frt-tab td.num { white-space: nowrap; }
.frt-tab .frt-cte small { min-width: 9em; max-width: 15em; }
.frt-tab td { padding-top: 7px; padding-bottom: 7px; }
.frt-tab th, .frt-tab td { padding-left: 8px; padding-right: 8px; }
.frt-form .frt-grade + .frt-grade { margin-top: 10px; }
.frt-orcs { margin-top: 14px; border: 1px solid var(--border-color); border-radius: var(--radius); padding: 10px 12px; background: var(--bg-hover); }
.frt-orcs h4 { margin: 0; font-size: var(--fs-sm); } .frt-orcs h4 i { margin-right: 4px; color: var(--primary); }
.frt-orcs .pf2-tab { margin-top: 6px; font-size: var(--fs-xs); }
.frt-orcs-dica { display: block; margin-top: 6px; font-size: var(--fs-2xs); color: var(--text-secondary); }

/* =====================================================================
   Leveza (10/10/2026): cantos mais arredondados, campos com acabamento, menu lateral claro,
   sombras e pesos de letra mais leves. O modo escuro continua escuro (só herda os cantos e os campos).
   ===================================================================== */
:root {
    /* ESCALAS (única fonte; o plataforma.css só ajusta o que é exclusivo da tela). Raios: xs 4 · sm 6 · md 8 · lg 12 · xl 14. Fontes: 10 · 11 · 12 · 13 · 14 · 16 · 20 · 24 (10 e 11 só para etiquetas densas dos cartões) */
    --radius-xs: 4px; --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 14px; --radius-campo: 8px;
    --fs-3xs: 10px; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px;
}
:root:not([data-theme="dark"]) {
    --bg-primary: #f6f8fb;
    --border-color: #e6ebf2;
    --shadow: 0 1px 2px rgba(15,23,42,0.03), 0 2px 8px rgba(15,23,42,0.04);
    --shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
    --shadow-md: 0 2px 6px rgba(15,23,42,0.04), 0 8px 20px rgba(15,23,42,0.06);
    /* menu lateral claro */
    --bg-sidebar: #ffffff;
    --text-sidebar: #475569;
    --text-sidebar-active: #0f172a;
    --text-sidebar-muted: #94a3b8;
    --border-sidebar: #edf1f6;
    --bg-sidebar-hover: #f1f5f9;
    --modal-overlay: rgba(15, 23, 42, 0.32);
}

/* menu lateral claro (só no tema claro) */
:root:not([data-theme="dark"]) .sidebar { border-right: 1px solid var(--border-sidebar); box-shadow: none; }
:root:not([data-theme="dark"]) .sidebar-overlay { background: rgba(15, 23, 42, 0.3); }
:root:not([data-theme="dark"]) .sidebar-header h2 { color: var(--text-primary); }
:root:not([data-theme="dark"]) .nav-item.active { background: #eaf2ff; color: var(--primary-deeper); box-shadow: none; }
:root:not([data-theme="dark"]) .nav-item.active .icon { color: var(--primary); }
:root:not([data-theme="dark"]) .nav-item .badge { background: var(--bg-hover); color: var(--text-secondary); }
:root:not([data-theme="dark"]) .nav-item.active .badge { background: var(--primary); color: #fff; }
:root:not([data-theme="dark"]) .nav-item .badge.badge-alerta { background: var(--danger); color: #fff; }
:root:not([data-theme="dark"]) .theme-toggle { background: var(--bg-hover); }
:root:not([data-theme="dark"]) .theme-toggle:hover { background: #e8eef5; }
:root:not([data-theme="dark"]) .sidebar-atalho { background: var(--bg-primary); }
:root:not([data-theme="dark"]) .sidebar-atalho kbd { background: #fff; border: 1px solid var(--border-color); }
:root:not([data-theme="dark"]) .nav-subitem.active { background: #eaf2ff; color: var(--primary-deeper); box-shadow: none; }

/* campos: filtros e formulários com cantos arredondados (antes ficavam com o visual cru do navegador) */
.form-control, .form-group input, .form-group select, .form-group textarea {
    border-radius: var(--radius-campo);
}
.form-control {
    padding: 8px 12px; min-height: 36px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary);
    font: var(--fs-sm) var(--font); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-control:hover { border-color: var(--border-strong); }
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); background: var(--bg-card); }
.form-control::placeholder { color: var(--text-tertiary); }
select.form-control, .form-group select {
    appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center; background-size: 12px;
}
input[type=search].form-control { padding-left: 12px; }

/* botões, cartões, abas e tabelas mais suaves */
.btn { border-radius: var(--radius-campo); }
.btn-sm { border-radius: var(--radius); }
.pf2 { border-radius: var(--radius-xl); }
.frt-card, .frt-res-bloco { border-radius: var(--radius-xl); }
.frt-graf-card { border-radius: var(--radius-xl); }
.painel-abas { border-radius: var(--radius-lg); }
.painel-abas button { border-radius: var(--radius); }
.pf2-tab th { font-weight: 600; color: var(--text-tertiary); }
.pf2-tab th, .pf2-tab td { border-bottom-color: var(--border-color); }

/* letras: valores e títulos um pouco menos pesados */
.topbar h1, .page-header h1 { font-weight: 600; }
.kpi-value, .pf2-val, .dash-val, .frt-card b, .seller-stat-value, .csv-stat-value, .pe-valor, .pcom-d-val, .modal-header h2 { font-weight: 600; }

/* ---------------------------------------------------------------------
   QAP mais leve (10/10/2026): menu "Mais" para configurações, avisos discretos, seletor de dia em pílula,
   números como etiquetas e quadros com um sinal de cor por linha (a bolinha), sem faixas e barras laterais.
   --------------------------------------------------------------------- */
.pcp-topo { align-items: center; margin-bottom: 16px; }
.pcp-tit { font-size: var(--fs-lg); font-weight: 600; }
.pcp-tit span { font-weight: 500; color: var(--text-secondary); }
.pcp-acoes { align-items: center; }
.pcp-mais { position: relative; }
.pcp-mais > summary { list-style: none; cursor: pointer; }
.pcp-mais > summary::-webkit-details-marker { display: none; }
.pcp-mais[open] > summary { background: var(--bg-hover); }
.pcp-mais-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; display: flex; flex-direction: column; gap: 2px;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 6px; }
.pcp-mais-item { display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left; padding: 9px 12px; border-radius: var(--radius);
    font: inherit; font-size: var(--fs-sm); color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.pcp-mais-item i { width: 16px; text-align: center; color: var(--text-secondary); }
.pcp-mais-item:hover, .pcp-mais-item:focus-visible { background: var(--bg-hover); outline: none; }

/* avisos: faixas finas, sem borda nem sombra */
.pcp-alerta, .pcp-urg { border: 0; box-shadow: none; border-radius: var(--radius-lg); padding: 10px 14px; font-size: var(--fs-sm); }
.pcp-alerta { background: color-mix(in srgb, var(--primary) 6%, var(--bg-card)); }
.pcp-urg { background: color-mix(in srgb, var(--warning) 10%, var(--bg-card)); color: var(--text-primary); }
.pcp-urg > i { color: var(--warning-text); }
.pcp-urg b { font-weight: 600; }
.pcp-pf, .pcp-trava-box { box-shadow: none; }
.pcp-pf { border-left-width: 3px; }

/* resumo: dia em pílula (como as abas do Portal) e números como etiquetas */
.pcp-resumo { gap: 8px; margin-bottom: 18px; }
.pcp-dia-sel { border: 0; box-shadow: none; background: var(--bg-hover); padding: 4px; gap: 4px; border-radius: var(--radius-lg); }
.pcp-dia-sel button { border-radius: var(--radius); padding: 6px 14px; color: var(--text-secondary); }
.pcp-dia-sel button + button { border-left: 0; }
.pcp-dia-sel button.ativo { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 3px rgba(15,23,42,.10); }
.pcp-dia-sel button.ativo small { color: var(--text-secondary); }
.pcp-kpi { border: 0; box-shadow: none; background: var(--bg-hover); border-radius: 999px; padding: 6px 14px; }
.pcp-kpi b { font-size: var(--fs-md); font-weight: 600; }
.pcp-kpi.risco { background: color-mix(in srgb, var(--danger) 10%, var(--bg-card)); }
.pcp-kpi.alerta { background: color-mix(in srgb, var(--warning) 12%, var(--bg-card)); }
.pcp-leg { font-size: var(--fs-2xs); gap: 14px; color: var(--text-tertiary); }

/* quadros das máquinas */
.pcp-grade { gap: 16px; }
.pcp-card { border-radius: var(--radius-xl); box-shadow: none; }
.pcp-card header { padding: 14px 16px 10px; border-bottom: 0; }
.pcp-card h3 { font-size: var(--fs-md); font-weight: 600; }
.pcp-ico { border: 0; background: var(--bg-hover); border-radius: var(--radius); }
.pcp-ico:hover { background: var(--primary-light); color: var(--primary); }
.pcp-card th { font-size: var(--fs-3xs); color: var(--text-tertiary); padding: 6px 12px; border-bottom: 1px solid var(--border-color); }
.pcp-card td { padding: 9px 12px; border-top: 0; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent); }
.pcp-card tbody tr, .pcp-card tbody tr.pcp-aberto, .pcp-card tbody tr.pcp-concluido, .pcp-prontas tr.pcp-pronta-prev { box-shadow: none; }
.pcp-card tbody tr.pcp-produzindo { background: color-mix(in srgb, var(--warning) 8%, transparent); box-shadow: none; }
.pcp-card tfoot td { background: transparent; border-bottom: 0; color: var(--text-secondary); font-weight: 600; }
.pcp-aviso td { background: color-mix(in srgb, var(--danger) 7%, transparent); font-weight: 500; }
.pcp-card tbody tr.pcp-imp-l td { background: color-mix(in srgb, var(--warning) 9%, transparent); box-shadow: none; }
.pcp-card tbody tr.pcp-imp-l.parada td, .pcp-card tbody tr.pcp-janela-l.tambor td { background: color-mix(in srgb, var(--danger) 8%, transparent); box-shadow: none; }
.pcp-prev-dia { border-radius: var(--radius); }
.pcp-prontas { border-top: 0; }
.pcp-card tbody tr.pcp-previa td { background: transparent; }
.pcp-prev-dia { background: var(--bg-primary); border-color: transparent; }
.pcp-prev-dia.livre { background: transparent; border-color: var(--border-color); }
.pcp-mais-menu.esq { right: auto; left: 0; }

/* ---------------------------------------------------------------------
   Menu por macroárea e setor (10/10/2026): setores ainda sem tela aparecem apagados, com "em breve"
   --------------------------------------------------------------------- */
.nav-breve { display: flex; align-items: center; gap: 12px; margin: 1px 10px; padding: 7px 14px; border-radius: var(--radius); font-size: var(--fs-sm); color: var(--text-sidebar-muted); cursor: default; user-select: none; }
.nav-breve .icon { width: 22px; text-align: center; font-size: var(--fs-md); opacity: .7; flex: none; }
.nav-breve > span:not(.icon) { flex: 1; min-width: 0; line-height: 1.25; }
.nav-breve em { flex: none; font-style: normal; font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .02em; padding: 1px 7px; border-radius: 999px; background: var(--bg-sidebar-hover); color: var(--text-sidebar-muted); }
.nav-grupo > .nav-item > span:not(.icon):not(.badge) { flex: 1; min-width: 0; line-height: 1.25; text-align: left; }
.nav-sub .nav-subitem[data-view] .badge { margin-left: auto; }
.nav-grupo > .nav-item { gap: 10px; padding-left: 12px; padding-right: 12px; font-size: var(--fs-sm); }
.nav-breve { gap: 10px; padding-left: 12px; padding-right: 12px; }
.nav-breve { font-size: var(--fs-xs); }
.nav-breve em { font-size: 9.5px; padding: 1px 6px; }

/* ---------------------------------------------------------------------
   Permissões por setor (10/10/2026): setor que não é da pessoa some do menu; grade em Configurações
   --------------------------------------------------------------------- */
.sem-setor { display: none !important; }
.perm-lista { display: flex; flex-direction: column; }
.perm-linha { display: grid; grid-template-columns: minmax(160px, 1.1fr) 120px minmax(0, 2.4fr) auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--border-color); }
.perm-linha:last-child { border-bottom: 0; }
.perm-quem b { display: block; font-size: var(--fs-sm); }
.perm-quem small, .perm-topo small { display: block; font-size: var(--fs-2xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perm-perfil { justify-self: start; font-size: var(--fs-2xs); font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--bg-hover); color: var(--text-secondary); }
.perm-perfil.pf-administrador { background: color-mix(in srgb, var(--danger) 12%, var(--bg-card)); color: var(--danger-text); }
.perm-perfil.pf-diretoria { background: color-mix(in srgb, var(--purple) 14%, var(--bg-card)); color: var(--purple); }
.perm-perfil.pf-maquina { background: color-mix(in srgb, var(--warning) 14%, var(--bg-card)); color: var(--warning-text); }
.perm-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.perm-chip { font-size: var(--fs-2xs); padding: 2px 9px; border-radius: 999px; background: var(--bg-hover); color: var(--text-secondary); white-space: nowrap; }
.perm-chip b { font-weight: 600; color: var(--text-primary); }
.perm-chip.p-gerente { background: color-mix(in srgb, var(--primary) 12%, var(--bg-card)); }
.perm-chip.todos { background: color-mix(in srgb, var(--success) 12%, var(--bg-card)); color: var(--success-text); }
.perm-chip.vazio { font-style: italic; }
.perm-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.perm-perfil-campo { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); min-width: 200px; }
.perm-dica { margin: 8px 0 4px; font-size: var(--fs-xs); color: var(--text-secondary); }
.perm-aviso { margin: 6px 0; font-size: var(--fs-xs); color: var(--warning-text); }
.perm-setores { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.perm-setores.perm-todos { opacity: .45; pointer-events: none; }
.perm-setores fieldset { border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: 8px 12px 10px; margin: 0; min-width: 0; }
.perm-setores legend { font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); padding: 0 6px; }
.perm-setor { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: var(--fs-sm); }
.perm-setor em { font-style: normal; font-size: var(--fs-3xs); color: var(--text-tertiary); background: var(--bg-hover); border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.perm-setor .perm-sel { width: 160px; min-height: 32px; padding-top: 5px; padding-bottom: 5px; font-size: var(--fs-xs); }
.perm-legenda { margin-top: 12px; font-size: var(--fs-xs); color: var(--text-secondary); }
.perm-legenda summary { cursor: pointer; font-weight: 600; }
.perm-legenda ul { margin: 6px 0 0; padding-left: 18px; }
.perm-chip.ia { background: color-mix(in srgb, var(--primary) 10%, var(--bg-card)); color: var(--primary); }
.perm-chip.ia i { font-size: var(--fs-3xs); margin-right: 2px; }
.perm-ia { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-xl); cursor: pointer; }
.perm-ia input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--primary); flex: none; }
.perm-ia span { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.perm-ia b i { color: var(--primary); margin-right: 4px; }
.perm-ia small { font-size: var(--fs-xs); color: var(--text-secondary); }
.perm-ia:has(input:disabled) { opacity: .6; cursor: default; }
@media (max-width: 700px) {
    .perm-linha { grid-template-columns: 1fr auto; }
    .perm-linha .perm-chips { grid-column: 1 / -1; }
    .perm-setor .perm-sel { width: 140px; }
}
/* Financeiro > Custo de Facas (facas-custo.js): linha fora do total e mes selecionado na tabela Resultado */
.frt-fora td { opacity: .6; }
.frt-tab tbody tr.frt-sel td { background: var(--bg-hover, rgba(42,120,214,.08)); }