/* CONTROLPRO V132 - Polimento, Config.app e Próximos Blocos originais 30-33 da V131. Ordem interna preservada. */ /* ===================================================================== CONTROLPRO V125 — iOS REFINADO V2 SOMENTE APARÊNCIA. Nenhuma lógica, Firebase, Push ou pagamento. Base visual: V123, descartando o exagero visual da V124. ===================================================================== */ body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, system-ui, sans-serif !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--bg-main) 96%, #f4f7fb 4%), var(--bg-main) ) !important; } /* --------------------------------------------------------------- Cards: contraste real, sombra curta e borda fina estilo iOS --------------------------------------------------------------- */ .card-item, .card-form, .servico-card, .stat-card, .admin-stat-card, .user-item, .user-list-modal-item, .client-portal-card, .client-portal-hero, .cp-v64-item, .cp-v64-panel, .cp-v64-timeline-item, .cp-v79-provider-card, .cp-v79-provider-choice, .cp-message-row-v68, .cp-campaign-management-card, .cp-campaign-detail-info, .client-renew-summary { background: linear-gradient( 180deg, color-mix(in srgb, var(--card-bg) 99%, white 1%), color-mix(in srgb, var(--card-bg) 97%, var(--filter-btn-bg) 3%) ) !important; border: 1px solid color-mix(in srgb, var(--card-border) 78%, transparent) !important; box-shadow: 0 1px 2px rgba(15,23,42,.025), 0 7px 22px rgba(15,23,42,.055) !important; } .card-item, .servico-card, .user-item, .client-portal-card, .client-portal-hero { border-radius: 20px !important; } .card-form, .modal-box { border-radius: 22px !important; } #clientListContainer { gap: 11px !important; } #clientListContainer .card-item { padding: 14px 14px 13px !important; margin-bottom: 0 !important; box-shadow: 0 1px 2px rgba(15,23,42,.025), 0 8px 24px rgba(15,23,42,.06) !important; } #clientListContainer .card-item:active { transform: scale(.993) !important; box-shadow: 0 4px 15px rgba(15,23,42,.055) !important; } /* --------------------------------------------------------------- Busca e filtros: menos “bolha”, mais controle iOS --------------------------------------------------------------- */ #pageListaClientes .search-container input { min-height: 46px !important; border-radius: 17px !important; background: var(--card-bg) !important; border: 1px solid color-mix(in srgb, var(--card-border) 82%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 5px 14px rgba(15,23,42,.045) !important; font-weight: 560 !important; } #pageListaClientes > #filterBar { gap: 7px !important; } #pageListaClientes > #filterBar > .filter-btn { min-height: 36px !important; border-radius: 15px !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--filter-btn-bg) 97%, white 3%), var(--filter-btn-bg) ) !important; border: 1px solid color-mix(in srgb, var(--card-border) 72%, transparent) !important; box-shadow: 0 1px 1px rgba(15,23,42,.02), 0 4px 10px rgba(15,23,42,.045) !important; font-weight: 740 !important; } #pageListaClientes > #filterBar > .filter-btn.active-filter:not(#btnProximos) { background: linear-gradient( 180deg, color-mix(in srgb, var(--filter-active-bg) 91%, white 9%), var(--filter-active-bg) ) !important; border-color: transparent !important; box-shadow: 0 5px 13px color-mix(in srgb, var(--filter-active-bg) 16%, transparent) !important; } /* --------------------------------------------------------------- Botões: menores, mais firmes e com “salto” sutil --------------------------------------------------------------- */ .action-row { gap: 7px !important; margin-top: 10px !important; } .action-row button, .btn-small, .btn-editar, .btn-renovar, .btn-gerar-cp, .btn-excluir, .btn-wa, .btn-wa-simples, .btn-premiar { min-height: 34px !important; padding: 7px 11px !important; border-radius: 12px !important; font-size: 11.5px !important; font-weight: 760 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 4px 10px rgba(15,23,42,.075) !important; transition: transform .14s ease, box-shadow .14s ease, filter .14s ease !important; } .btn-action, .btn-login, .btn-confirm, .btn-cancel, .back-btn { border-radius: 13px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 5px 13px rgba(15,23,42,.07) !important; } .action-row button:hover, .btn-small:hover, .btn-action:hover, .btn-cancel:hover, .btn-editar:hover, .btn-renovar:hover, .btn-gerar-cp:hover, .btn-wa:hover, .btn-wa-simples:hover { transform: translateY(-1px) !important; filter: brightness(1.015) saturate(1.02) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 7px 15px rgba(15,23,42,.09) !important; } .action-row button:active, .btn-small:active, .btn-action:active, .btn-cancel:active, .btn-editar:active, .btn-renovar:active, .btn-gerar-cp:active, .btn-wa:active, .btn-wa-simples:active { transform: translateY(1px) scale(.982) !important; box-shadow: inset 0 1px 2px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.055) !important; } button:disabled, .btn-editar:disabled { opacity: .52 !important; color: var(--text-muted) !important; background: color-mix(in srgb, var(--filter-btn-bg) 96%, transparent) !important; border-color: color-mix(in srgb, var(--card-border) 70%, transparent) !important; box-shadow: none !important; filter: none !important; } /* --------------------------------------------------------------- Inputs e modais --------------------------------------------------------------- */ input, select, textarea, .select-trigger { border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 7px rgba(15,23,42,.03) !important; } .modal-box { background: var(--card-bg) !important; border: 1px solid color-mix(in srgb, var(--card-border) 78%, transparent) !important; box-shadow: 0 18px 55px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.05) !important; } /* --------------------------------------------------------------- Foto dos clientes: um pouco menor e moldura menos pesada --------------------------------------------------------------- */ #clientListContainer .cp-client-card-main-v50 { grid-template-columns: minmax(0,1fr) 80px !important; gap: 11px !important; min-height: 80px !important; } #clientListContainer .cp-client-card-avatar-v50 { width: 80px !important; height: 80px !important; padding: 4px !important; border-radius: 17px !important; border: 1.5px solid color-mix(in srgb, var(--text-main) 68%, var(--card-border)) !important; background: var(--card-bg) !important; box-shadow: 0 5px 14px rgba(15,23,42,.085), inset 0 0 0 1px rgba(255,255,255,.22) !important; } #clientListContainer .cp-client-card-avatar-v50.is-default { padding: 5px !important; } @media (max-width: 420px) { #clientListContainer .cp-client-card-main-v50 { grid-template-columns: minmax(0,1fr) 72px !important; gap: 9px !important; min-height: 72px !important; } #clientListContainer .cp-client-card-avatar-v50 { width: 72px !important; height: 72px !important; border-radius: 15px !important; padding: 3px !important; } } /* --------------------------------------------------------------- PRÓXIMOS Verde real no fundo, borda colorida fluindo. A lógica V123 continua decidindo QUANDO o efeito aparece. --------------------------------------------------------------- */ #btnProximos.cp-v72-upcoming-neon, #btnProximos.cp-v72-upcoming-neon.active-filter { position: relative !important; overflow: hidden !important; color: #ffffff !important; text-shadow: 0 1px 1px rgba(0,0,0,.10) !important; border: 2px solid transparent !important; background: linear-gradient(180deg, #34d66b, #18b953) padding-box, linear-gradient( 90deg, #00e5ff, #5b8cff, #9d6cff, #ff54a6, #ff9a3d, #ffe14d, #25d880, #00e5ff ) border-box !important; background-size: 100% 100%, 360% 100% !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 7px 17px rgba(24,185,83,.22) !important; filter: none !important; transform: none !important; animation: cpV125UpcomingGreenPulse 1.85s ease-in-out infinite, cpV125UpcomingBorderFlow 4s linear infinite !important; } #btnProximos.cp-v72-upcoming-neon::before, #btnProximos.cp-v72-upcoming-neon::after { content: none !important; display: none !important; } @keyframes cpV125UpcomingGreenPulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 6px 15px rgba(24,185,83,.18); filter: brightness(1); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 9px 21px rgba(24,185,83,.31); filter: brightness(1.045); } } @keyframes cpV125UpcomingBorderFlow { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 360% 50%; } } @media (prefers-reduced-motion: reduce) { #btnProximos.cp-v72-upcoming-neon { animation: none !important; } } /* ===================================================================== controlpro-v126-config-app-style Extraído do index V129 na separação V131 ===================================================================== */ /* ================================================================ CONTROLPRO V126 — Config.app global + ações coloridas Escopo: aparência + configuração global de aparência. ================================================================ */ /* Modal Ações: cada card/botão em uma cor */ .cp-v126-quick-grid-colored { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } .cp-v126-quick-grid-colored > button { min-height: 74px !important; border-radius: 20px !important; font-size: 15px !important; font-weight: 800 !important; box-shadow: 0 8px 20px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.35) !important; border-width: 1px !important; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important; } .cp-v126-quick-grid-colored > button:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.45) !important; } .cp-v126-quick-grid-colored > button[data-a="renew"] { background: linear-gradient(180deg, #4f93ff, #2f6fde) !important; color: #fff !important; border-color: #2b66cc !important; } .cp-v126-quick-grid-colored > button[data-a="history"] { background: linear-gradient(180deg, #f4f6fb, #e7ecf5) !important; color: #1f2937 !important; border-color: #d8dfeb !important; } .cp-v126-quick-grid-colored > button[data-a="access"] { background: linear-gradient(180deg, #f4efff, #ebe0ff) !important; color: #6d28d9 !important; border-color: #d6c1ff !important; } .cp-v126-quick-grid-colored > button[data-a="copy"] { background: linear-gradient(180deg, #eefbfd, #daf5fb) !important; color: #0f766e !important; border-color: #b5eaf6 !important; } .cp-v126-quick-grid-colored > button[data-a="wa"] { background: linear-gradient(180deg, #2fdb6c, #1db954) !important; color: #fff !important; border-color: #13a848 !important; } .cp-v126-quick-grid-colored > button[data-a="delete"] { background: linear-gradient(180deg, #fff5f5, #fee8e8) !important; color: #dc2626 !important; border-color: #f1c1c1 !important; } .cp-v126-quick-grid-colored + .modal-actions .cp-v64-close { min-height: 74px !important; border-radius: 20px !important; font-size: 16px !important; font-weight: 800 !important; } /* Admin Config.app */ #adminSectionAppConfig .card-form { margin-bottom: 20px; } .cp-v126-config-subtitle { font-size: 13px; color: #64748b; line-height: 1.45; margin: 2px 0 14px; } .cp-v126-config-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px; } .cp-v126-config-live-badge { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; font-size:12px; font-weight:700; background: color-mix(in srgb, var(--filter-btn-bg) 92%, white 8%); border:1px solid color-mix(in srgb, var(--card-border) 75%, transparent); color: var(--text-main); } .cp-v126-config-grid { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:10px; margin:10px 0 18px; } .cp-v126-choice-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px 13px; border-radius:18px; border:1px solid color-mix(in srgb, var(--card-border) 82%, transparent); background: var(--card-bg); box-shadow: 0 6px 18px rgba(15,23,42,.045); cursor:pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; text-align:left; } .cp-v126-choice-card:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(15,23,42,.08); } .cp-v126-choice-card.active { border-color: color-mix(in srgb, var(--btn-primary-bg) 44%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn-primary-bg) 18%, transparent), 0 10px 22px rgba(15,23,42,.08); } .cp-v126-choice-card strong { font-size: 13px; line-height: 1.2; } .cp-v126-choice-card span { font-size: 11px; color:#64748b; line-height: 1.35; } .cp-v126-theme-swatches, .cp-v126-style-swatches { display:flex; gap:6px; width:100%; margin-top:2px; } .cp-v126-theme-swatches i, .cp-v126-style-swatches i { display:block; width:100%; height:10px; border-radius:999px; border:1px solid rgba(15,23,42,.06); } .cp-v126-preview-wrap { padding: 14px; border-radius: 24px; border:1px solid color-mix(in srgb, var(--card-border) 78%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--filter-btn-bg) 86%, white 14%), color-mix(in srgb, var(--bg-body) 97%, white 3%)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55); margin-top: 6px; } .cp-v126-preview-topline { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; } .cp-v126-preview-topline strong { font-size: 15px; } .cp-v126-preview-topline span { font-size: 12px; color:#64748b; } .cp-v126-preview-stage { padding: 16px; border-radius: 22px; background: var(--bg-body, #edf2f7); border: 1px solid rgba(15,23,42,.05); } .cp-v126-preview-scope { --bg-body:#e2e8f0; --text-main:#1e293b; --card-bg:#ffffff; --card-border:#dbe4ef; --filter-btn-bg:#f1f5f9; --filter-active-bg:#3b82f6; --btn-primary-bg:#3b82f6; --btn-primary-text:#ffffff; color: var(--text-main); } .cp-v126-preview-shell { display:grid; grid-template-columns: 1.15fr .85fr; gap:12px; } .cp-v126-preview-card { background: var(--card-bg); border:1px solid color-mix(in srgb, var(--card-border) 90%, transparent); border-radius: 20px; padding: 14px; min-height: 140px; } .cp-v126-preview-card h4 { margin:0 0 8px; font-size:15px; } .cp-v126-preview-card p { margin:0; font-size:12px; line-height:1.45; color: color-mix(in srgb, var(--text-main) 70%, #64748b 30%); } .cp-v126-preview-pill { display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 12px; border-radius:999px; font-size:11px; font-weight:700; background: color-mix(in srgb, var(--filter-active-bg) 16%, white 84%); color: var(--filter-active-bg); border:1px solid color-mix(in srgb, var(--filter-active-bg) 22%, transparent); margin-bottom:10px; } .cp-v126-preview-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; } .cp-v126-preview-btn { appearance:none; border:none; min-height:40px; padding:0 14px; border-radius:14px; font-size:12px; font-weight:800; background: var(--filter-btn-bg); color: var(--text-main); border:1px solid color-mix(in srgb, var(--card-border) 82%, transparent); } .cp-v126-preview-btn.primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: transparent; } .cp-v126-preview-kpis { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; margin-top:10px; } .cp-v126-preview-kpi { padding:10px; border-radius:16px; background: var(--card-bg); border:1px solid color-mix(in srgb, var(--card-border) 86%, transparent); text-align:center; } .cp-v126-preview-kpi small { display:block; font-size:10px; color:#64748b; margin-bottom:4px; } .cp-v126-preview-kpi strong { font-size:18px; } .cp-v126-config-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; } .cp-v126-config-status { margin-top:10px; font-size:12px; color:#64748b; line-height:1.45; } /* Card styles (global no body + preview scope) */ :is(body,.cp-v126-preview-scope).cp-card-style-soft .card-item, :is(body,.cp-v126-preview-scope).cp-card-style-soft .card-form, :is(body,.cp-v126-preview-scope).cp-card-style-soft .servico-card, :is(body,.cp-v126-preview-scope).cp-card-style-soft .stat-card, :is(body,.cp-v126-preview-scope).cp-card-style-soft .admin-stat-card, :is(body,.cp-v126-preview-scope).cp-card-style-soft .user-item, :is(body,.cp-v126-preview-scope).cp-card-style-soft .client-portal-card, :is(body,.cp-v126-preview-scope).cp-card-style-soft .cp-v126-preview-card, :is(body,.cp-v126-preview-scope).cp-card-style-soft .cp-v126-preview-kpi { border-radius: 22px !important; box-shadow: 0 8px 22px rgba(15,23,42,.055) !important; } :is(body,.cp-v126-preview-scope).cp-card-style-outline .card-item, :is(body,.cp-v126-preview-scope).cp-card-style-outline .card-form, :is(body,.cp-v126-preview-scope).cp-card-style-outline .servico-card, :is(body,.cp-v126-preview-scope).cp-card-style-outline .stat-card, :is(body,.cp-v126-preview-scope).cp-card-style-outline .admin-stat-card, :is(body,.cp-v126-preview-scope).cp-card-style-outline .user-item, :is(body,.cp-v126-preview-scope).cp-card-style-outline .client-portal-card, :is(body,.cp-v126-preview-scope).cp-card-style-outline .cp-v126-preview-card, :is(body,.cp-v126-preview-scope).cp-card-style-outline .cp-v126-preview-kpi { border-radius: 18px !important; border-width: 1.5px !important; box-shadow: none !important; } :is(body,.cp-v126-preview-scope).cp-card-style-glass .card-item, :is(body,.cp-v126-preview-scope).cp-card-style-glass .card-form, :is(body,.cp-v126-preview-scope).cp-card-style-glass .servico-card, :is(body,.cp-v126-preview-scope).cp-card-style-glass .stat-card, :is(body,.cp-v126-preview-scope).cp-card-style-glass .admin-stat-card, :is(body,.cp-v126-preview-scope).cp-card-style-glass .user-item, :is(body,.cp-v126-preview-scope).cp-card-style-glass .client-portal-card, :is(body,.cp-v126-preview-scope).cp-card-style-glass .cp-v126-preview-card, :is(body,.cp-v126-preview-scope).cp-card-style-glass .cp-v126-preview-kpi { background: color-mix(in srgb, var(--card-bg) 82%, rgba(255,255,255,.55) 18%) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 24px !important; box-shadow: 0 10px 26px rgba(15,23,42,.07) !important; } :is(body,.cp-v126-preview-scope).cp-card-style-float .card-item, :is(body,.cp-v126-preview-scope).cp-card-style-float .card-form, :is(body,.cp-v126-preview-scope).cp-card-style-float .servico-card, :is(body,.cp-v126-preview-scope).cp-card-style-float .stat-card, :is(body,.cp-v126-preview-scope).cp-card-style-float .admin-stat-card, :is(body,.cp-v126-preview-scope).cp-card-style-float .user-item, :is(body,.cp-v126-preview-scope).cp-card-style-float .client-portal-card, :is(body,.cp-v126-preview-scope).cp-card-style-float .cp-v126-preview-card, :is(body,.cp-v126-preview-scope).cp-card-style-float .cp-v126-preview-kpi { border-radius: 20px !important; box-shadow: 0 16px 34px rgba(15,23,42,.10), 0 3px 7px rgba(15,23,42,.04) !important; transform: translateY(-1px); } :is(body,.cp-v126-preview-scope).cp-card-style-contrast .card-item, :is(body,.cp-v126-preview-scope).cp-card-style-contrast .card-form, :is(body,.cp-v126-preview-scope).cp-card-style-contrast .servico-card, :is(body,.cp-v126-preview-scope).cp-card-style-contrast .stat-card, :is(body,.cp-v126-preview-scope).cp-card-style-contrast .admin-stat-card, :is(body,.cp-v126-preview-scope).cp-card-style-contrast .user-item, :is(body,.cp-v126-preview-scope).cp-card-style-contrast .client-portal-card, :is(body,.cp-v126-preview-scope).cp-card-style-contrast .cp-v126-preview-card, :is(body,.cp-v126-preview-scope).cp-card-style-contrast .cp-v126-preview-kpi { background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 99%, white 1%), color-mix(in srgb, var(--card-bg) 90%, var(--filter-btn-bg) 10%)) !important; border-radius: 19px !important; border-color: color-mix(in srgb, var(--text-main) 10%, var(--card-border)) !important; box-shadow: 0 10px 24px rgba(15,23,42,.075) !important; } /* Button styles (global + preview) */ :is(body,.cp-v126-preview-scope).cp-button-style-soft .filter-btn, :is(body,.cp-v126-preview-scope).cp-button-style-soft .btn-action, :is(body,.cp-v126-preview-scope).cp-button-style-soft .btn-cancel, :is(body,.cp-v126-preview-scope).cp-button-style-soft .btn-confirm, :is(body,.cp-v126-preview-scope).cp-button-style-soft .btn-small, :is(body,.cp-v126-preview-scope).cp-button-style-soft .back-btn, :is(body,.cp-v126-preview-scope).cp-button-style-soft .refresh-btn, :is(body,.cp-v126-preview-scope).cp-button-style-soft .cp-v126-preview-btn { border-radius: 999px !important; box-shadow: 0 6px 14px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.28) !important; } :is(body,.cp-v126-preview-scope).cp-button-style-soft .btn-action, :is(body,.cp-v126-preview-scope).cp-button-style-soft .btn-confirm, :is(body,.cp-v126-preview-scope).cp-button-style-soft .cp-v126-preview-btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--btn-primary-bg) 88%, white 12%), var(--btn-primary-bg)) !important; } :is(body,.cp-v126-preview-scope).cp-button-style-outline .filter-btn, :is(body,.cp-v126-preview-scope).cp-button-style-outline .btn-action, :is(body,.cp-v126-preview-scope).cp-button-style-outline .btn-cancel, :is(body,.cp-v126-preview-scope).cp-button-style-outline .btn-confirm, :is(body,.cp-v126-preview-scope).cp-button-style-outline .btn-small, :is(body,.cp-v126-preview-scope).cp-button-style-outline .cp-v126-preview-btn { border-radius: 14px !important; border: 1.5px solid color-mix(in srgb, var(--card-border) 90%, transparent) !important; box-shadow: none !important; background: var(--card-bg) !important; color: var(--text-main) !important; } :is(body,.cp-v126-preview-scope).cp-button-style-outline .btn-action, :is(body,.cp-v126-preview-scope).cp-button-style-outline .btn-confirm, :is(body,.cp-v126-preview-scope).cp-button-style-outline .cp-v126-preview-btn.primary { border-color: color-mix(in srgb, var(--btn-primary-bg) 40%, transparent) !important; color: var(--btn-primary-bg) !important; background: color-mix(in srgb, var(--btn-primary-bg) 9%, white 91%) !important; } :is(body,.cp-v126-preview-scope).cp-button-style-glass .filter-btn, :is(body,.cp-v126-preview-scope).cp-button-style-glass .btn-action, :is(body,.cp-v126-preview-scope).cp-button-style-glass .btn-cancel, :is(body,.cp-v126-preview-scope).cp-button-style-glass .btn-confirm, :is(body,.cp-v126-preview-scope).cp-button-style-glass .btn-small, :is(body,.cp-v126-preview-scope).cp-button-style-glass .cp-v126-preview-btn { border-radius: 16px !important; background: color-mix(in srgb, var(--card-bg) 70%, rgba(255,255,255,.55) 30%) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 18px rgba(15,23,42,.065) !important; } :is(body,.cp-v126-preview-scope).cp-button-style-glass .btn-action, :is(body,.cp-v126-preview-scope).cp-button-style-glass .btn-confirm, :is(body,.cp-v126-preview-scope).cp-button-style-glass .cp-v126-preview-btn.primary { background: color-mix(in srgb, var(--btn-primary-bg) 78%, rgba(255,255,255,.22) 22%) !important; color: var(--btn-primary-text) !important; } :is(body,.cp-v126-preview-scope).cp-button-style-dark .filter-btn, :is(body,.cp-v126-preview-scope).cp-button-style-dark .btn-action, :is(body,.cp-v126-preview-scope).cp-button-style-dark .btn-cancel, :is(body,.cp-v126-preview-scope).cp-button-style-dark .btn-confirm, :is(body,.cp-v126-preview-scope).cp-button-style-dark .btn-small, :is(body,.cp-v126-preview-scope).cp-button-style-dark .cp-v126-preview-btn { border-radius: 14px !important; background: #111827 !important; color: #f8fafc !important; border-color: #111827 !important; box-shadow: 0 8px 18px rgba(17,24,39,.18) !important; } :is(body,.cp-v126-preview-scope).cp-button-style-dark .btn-cancel, :is(body,.cp-v126-preview-scope).cp-button-style-dark .cp-v126-preview-btn:not(.primary) { background: #e5e7eb !important; color: #111827 !important; border-color: #d5dae1 !important; box-shadow: 0 6px 14px rgba(15,23,42,.05) !important; } :is(body,.cp-v126-preview-scope).cp-button-style-pop .filter-btn, :is(body,.cp-v126-preview-scope).cp-button-style-pop .btn-action, :is(body,.cp-v126-preview-scope).cp-button-style-pop .btn-cancel, :is(body,.cp-v126-preview-scope).cp-button-style-pop .btn-confirm, :is(body,.cp-v126-preview-scope).cp-button-style-pop .btn-small, :is(body,.cp-v126-preview-scope).cp-button-style-pop .cp-v126-preview-btn { border-radius: 18px !important; box-shadow: 0 10px 22px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.26) !important; } :is(body,.cp-v126-preview-scope).cp-button-style-pop .btn-action, :is(body,.cp-v126-preview-scope).cp-button-style-pop .btn-confirm, :is(body,.cp-v126-preview-scope).cp-button-style-pop .cp-v126-preview-btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--btn-primary-bg) 84%, white 16%), color-mix(in srgb, var(--btn-primary-bg) 95%, black 5%)) !important; color: var(--btn-primary-text) !important; } @media (max-width: 920px) { .cp-v126-config-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .cp-v126-preview-shell { grid-template-columns: 1fr; } } @media (max-width: 640px) { .cp-v126-config-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .cp-v126-quick-grid-colored { grid-template-columns: 1fr 1fr; gap: 12px; } .cp-v126-quick-grid-colored > button { min-height: 66px !important; font-size: 14px !important; } } @media (max-width: 480px) { .cp-v126-config-grid { grid-template-columns: 1fr; } } /* ===================================================================== controlpro-v127-config-app-premium-ui Extraído do index V129 na separação V131 ===================================================================== */ /* ================================================================ CONTROLPRO V127 — Config.app premium UI APENAS VISUAL. Lógica V126 preservada integralmente. ================================================================ */ #adminSectionAppConfig > .card-form { padding: 18px !important; overflow: visible !important; background: radial-gradient(circle at 92% -5%, color-mix(in srgb,var(--btn-primary-bg) 10%,transparent), transparent 30%), var(--card-bg) !important; } .cp-v127-config-hero { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; padding:15px; border:1px solid color-mix(in srgb,var(--card-border) 76%,transparent); border-radius:22px; background:linear-gradient(145deg,color-mix(in srgb,var(--filter-btn-bg) 72%,var(--card-bg)),var(--card-bg)); box-shadow:0 7px 22px rgba(15,23,42,.05); margin-bottom:16px; } .cp-v127-config-hero-icon { width:48px;height:48px;border-radius:16px;display:grid;place-items:center; background:linear-gradient(145deg,color-mix(in srgb,var(--btn-primary-bg) 82%,white 18%),var(--btn-primary-bg)); color:var(--btn-primary-text);font-size:18px; box-shadow:0 9px 20px color-mix(in srgb,var(--btn-primary-bg) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.25); } .cp-v127-config-hero-copy{min-width:0} .cp-v127-config-hero-copy small{display:block;font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--btn-primary-bg);margin-bottom:2px} .cp-v127-config-hero-copy h3{margin:0!important;font-size:22px!important;letter-spacing:-.035em!important} .cp-v127-config-hero-copy p{margin:3px 0 0;font-size:11.5px;line-height:1.4;color:#64748b} .cp-v127-live-badge{white-space:nowrap} .cp-v127-config-step,.cp-v127-preview-section{ padding:14px; border:1px solid color-mix(in srgb,var(--card-border) 70%,transparent); border-radius:20px; background:color-mix(in srgb,var(--card-bg) 97%,var(--filter-btn-bg) 3%); margin-bottom:12px; } .cp-v127-step-head{display:flex;align-items:center;gap:10px;margin-bottom:11px} .cp-v127-step-head>span{ flex:0 0 28px;width:28px;height:28px;border-radius:10px;display:grid;place-items:center; background:color-mix(in srgb,var(--btn-primary-bg) 12%,var(--card-bg)); color:var(--btn-primary-bg);font-size:11px;font-weight:900; border:1px solid color-mix(in srgb,var(--btn-primary-bg) 18%,transparent); } .cp-v127-step-head>div{min-width:0}.cp-v127-step-head strong{display:block;font-size:13px}.cp-v127-step-head small{display:block;margin-top:2px;font-size:10.5px;color:#64748b;line-height:1.35} #adminSectionAppConfig .cp-v126-config-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0} #adminSectionAppConfig .cp-v126-choice-card{ min-height:122px;padding:11px;border-radius:16px;overflow:hidden; background:var(--card-bg);box-shadow:0 4px 13px rgba(15,23,42,.04); } #adminSectionAppConfig .cp-v126-choice-card::after{ content:'✓';position:absolute;right:8px;top:8px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center; font-size:10px;font-weight:900;background:var(--btn-primary-bg);color:var(--btn-primary-text); opacity:0;transform:scale(.65);transition:.16s ease; } #adminSectionAppConfig .cp-v126-choice-card.active::after{opacity:1;transform:scale(1)} #adminSectionAppConfig .cp-v126-choice-card strong{font-size:12px;padding-right:20px} #adminSectionAppConfig .cp-v126-choice-card span{font-size:9.8px;line-height:1.28} #adminSectionAppConfig .cp-v126-choice-card.active{ transform:translateY(-1px); box-shadow:0 0 0 2px color-mix(in srgb,var(--btn-primary-bg) 18%,transparent),0 9px 19px rgba(15,23,42,.075); } /* thumbnails realmente diferentes */ .cp-v127-theme-grid .cp-v126-choice-card{justify-content:flex-end;padding-top:52px!important} .cp-v127-theme-grid .cp-v126-choice-card::before{ content:'';position:absolute;left:10px;right:10px;top:10px;height:34px;border-radius:11px; border:1px solid rgba(15,23,42,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.32); } .cp-v127-theme-grid [data-value="theme-light"]::before{background:linear-gradient(135deg,#fff 0 48%,#3b82f6 48% 65%,#e2e8f0 65%)} .cp-v127-theme-grid [data-value="theme-dark"]::before{background:linear-gradient(135deg,#0f172a 0 48%,#2563eb 48% 65%,#1f2937 65%)} .cp-v127-theme-grid [data-value="theme-azul"]::before{background:linear-gradient(135deg,#eaf6fd 0 48%,#1e6f9f 48% 65%,#b8d9ec 65%)} .cp-v127-theme-grid [data-value="theme-verde"]::before{background:linear-gradient(135deg,#edf9f2 0 48%,#2e7d5e 48% 65%,#bddfce 65%)} .cp-v127-theme-grid [data-value="theme-lilas"]::before{background:linear-gradient(135deg,#f6f2ff 0 48%,#8b5cf6 48% 65%,#ddd0ff 65%)} .cp-v127-theme-grid .cp-v126-theme-swatches{display:none} .cp-v127-card-grid .cp-v126-choice-card{justify-content:flex-end;padding-top:55px!important} .cp-v127-card-grid .cp-v126-choice-card::before{ content:'';position:absolute;left:13px;right:13px;top:12px;height:34px;background:#fff;border:1px solid #dfe6ef; } .cp-v127-card-grid [data-value="soft"]::before{border-radius:14px;box-shadow:0 7px 16px rgba(15,23,42,.09)} .cp-v127-card-grid [data-value="outline"]::before{border-radius:10px;border:2px solid #b9c4d2;box-shadow:none} .cp-v127-card-grid [data-value="glass"]::before{border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(219,234,254,.65));box-shadow:0 7px 18px rgba(59,130,246,.09)} .cp-v127-card-grid [data-value="float"]::before{border-radius:12px;box-shadow:0 12px 22px rgba(15,23,42,.16);transform:translateY(-2px)} .cp-v127-card-grid [data-value="contrast"]::before{border-radius:10px;background:linear-gradient(180deg,#fff,#eef1f5);border-color:#9aa7b8;box-shadow:0 6px 14px rgba(15,23,42,.10)} .cp-v127-card-grid .cp-v126-style-swatches{display:none} .cp-v127-button-grid .cp-v126-choice-card{justify-content:flex-end;padding-top:55px!important} .cp-v127-button-grid .cp-v126-choice-card::before{ content:'Botão';position:absolute;left:14px;right:14px;top:13px;height:31px;display:grid;place-items:center;font-size:9px;font-weight:850; } .cp-v127-button-grid [data-value="soft"]::before{border-radius:999px;background:#3b82f6;color:#fff;box-shadow:0 6px 12px rgba(59,130,246,.20)} .cp-v127-button-grid [data-value="outline"]::before{border-radius:10px;background:#fff;color:#2563eb;border:1.5px solid #93c5fd} .cp-v127-button-grid [data-value="glass"]::before{border-radius:13px;background:linear-gradient(135deg,#dbeafe,#ede9fe);color:#334155;border:1px solid #c7d2fe;box-shadow:0 7px 14px rgba(99,102,241,.12)} .cp-v127-button-grid [data-value="dark"]::before{border-radius:10px;background:#111827;color:#fff;box-shadow:0 6px 13px rgba(17,24,39,.20)} .cp-v127-button-grid [data-value="pop"]::before{border-radius:14px;background:linear-gradient(180deg,#60a5fa,#2563eb);color:#fff;box-shadow:0 9px 17px rgba(37,99,235,.25)} .cp-v127-button-grid .cp-v126-style-swatches{display:none} .cp-v127-preview-wrap{margin:0!important;padding:12px!important;background:color-mix(in srgb,var(--filter-btn-bg) 66%,var(--card-bg))!important} .cp-v127-device-frame{ width:min(100%,620px);margin:0 auto;padding:8px;border-radius:28px;background:#111827; box-shadow:0 17px 40px rgba(15,23,42,.18);border:1px solid rgba(255,255,255,.12) } .cp-v127-device-speaker{width:54px;height:5px;border-radius:999px;background:#374151;margin:1px auto 7px} .cp-v127-device-screen{overflow:hidden;border-radius:21px;background:#e7edf4} .cp-v127-device-screen .cp-v126-preview-scope{padding:10px;background:var(--bg-body);min-height:260px} .cp-v127-mini-topbar{height:35px;border-radius:12px;background:var(--card-bg);border:1px solid var(--card-border);display:flex;align-items:center;gap:7px;padding:0 9px;margin-bottom:9px;box-shadow:0 4px 12px rgba(15,23,42,.05)} .cp-v127-mini-topbar strong{font-size:10px}.cp-v127-mini-logo{width:22px;height:22px;border-radius:8px;display:grid;place-items:center;background:var(--btn-primary-bg);color:var(--btn-primary-text);font-size:8px;font-weight:900}.cp-v127-mini-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:#22c55e} .cp-v127-mini-row{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:7px;font-size:11px}.cp-v127-mini-row strong{color:#16a34a;font-size:9px;text-transform:uppercase} .cp-v127-publish-bar{ position:sticky;bottom:10px;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px; padding:12px 13px;margin-top:13px;border-radius:20px; background:color-mix(in srgb,var(--card-bg) 92%,rgba(255,255,255,.72) 8%); border:1px solid color-mix(in srgb,var(--card-border) 78%,transparent); box-shadow:0 14px 32px rgba(15,23,42,.13); backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px) } .cp-v127-publish-copy{min-width:0;flex:1}.cp-v127-publish-copy strong{display:block;font-size:12px}.cp-v127-publish-copy span{display:block;margin-top:2px;font-size:9.8px;color:#64748b;line-height:1.3} .cp-v127-config-actions{margin:0!important;flex:0 0 auto}.cp-v127-config-actions button{min-height:38px!important;border-radius:13px!important;font-size:10.5px!important;white-space:nowrap} @media(max-width:900px){#adminSectionAppConfig .cp-v126-config-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:620px){ #adminSectionAppConfig>.card-form{padding:12px!important} .cp-v127-config-hero{grid-template-columns:auto 1fr;padding:12px}.cp-v127-live-badge{grid-column:1/-1;justify-self:start} #adminSectionAppConfig .cp-v126-config-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px} #adminSectionAppConfig .cp-v126-choice-card{min-height:112px} .cp-v127-publish-bar{bottom:7px;align-items:stretch;flex-direction:column}.cp-v127-config-actions{width:100%;display:grid!important;grid-template-columns:.8fr 1.2fr}.cp-v127-config-actions button{width:100%} .cp-v127-device-frame{border-radius:24px}.cp-v127-device-screen{border-radius:18px} } @media(max-width:390px){#adminSectionAppConfig .cp-v126-config-grid{grid-template-columns:1fr 1fr}.cp-v127-config-step,.cp-v127-preview-section{padding:10px}} /* ===================================================================== controlpro-v128-upcoming-readable-state Extraído do index V129 na separação V131 ===================================================================== */ /* V128: Próximos nunca pode ficar texto branco em fundo branco. Quando há pendência, V125/V123 mantém o verde animado. Quando NÃO há pendência, o estado normal/selecionado continua legível. */ #pageListaClientes > #filterBar > #btnProximos:not(.cp-v72-upcoming-neon) { color: var(--text-main) !important; background: var(--filter-btn-bg) !important; border-color: color-mix(in srgb, var(--card-border) 76%, transparent) !important; text-shadow: none !important; box-shadow: 0 4px 10px rgba(15,23,42,.045) !important; filter: none !important; } #pageListaClientes > #filterBar > #btnProximos.active-filter:not(.cp-v72-upcoming-neon) { color: #ffffff !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--filter-active-bg) 88%, white 12%), var(--filter-active-bg) ) !important; border-color: color-mix(in srgb, var(--filter-active-bg) 62%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px color-mix(in srgb, var(--filter-active-bg) 18%, transparent) !important; } #pageListaClientes > #filterBar > #btnProximos.cp-v72-upcoming-neon, #pageListaClientes > #filterBar > #btnProximos.cp-v72-upcoming-neon.active-filter { color: #ffffff !important; } /* ===================================================================== controlpro-v129-upcoming-black-text Extraído do index V129 na separação V131 ===================================================================== */ /* V129: texto do botão Próximos sempre preto, inclusive com fundo verde/neon. */ #pageListaClientes > #filterBar > #btnProximos, #pageListaClientes > #filterBar > #btnProximos.active-filter, #pageListaClientes > #filterBar > #btnProximos.cp-v72-upcoming-neon, #pageListaClientes > #filterBar > #btnProximos.cp-v72-upcoming-neon.active-filter { color: #111827 !important; text-shadow: none !important; } /* Botão Restaurar padrão do Config.app */ #cpRestoreDefaultAppearanceV129 { color: #7c2d12 !important; background: linear-gradient(180deg, #fff7ed, #ffedd5) !important; border: 1px solid #fed7aa !important; box-shadow: 0 5px 13px rgba(124,45,18,.06) !important; } #cpRestoreDefaultAppearanceV129:hover { background: linear-gradient(180deg, #fffaf5, #ffe7c2) !important; } /* ===================================================================== CONTROLPRO V195 — CONTORNO VERDE SUAVE EM PRÓXIMOS NÃO NOTIFICADOS O JS existente mantém o estado cp-v72-upcoming-neon baseado exclusivamente no ACK de envio do WhatsApp deste ciclo (não no recebimento de Push). Somente a borda pulsa: sem efeitos de fundo, sem RGB, sem brilho externo. ===================================================================== */ #pageListaClientes > #filterBar > #btnProximos.cp-v72-upcoming-neon, #pageListaClientes > #filterBar > #btnProximos.cp-v72-upcoming-neon.active-filter { position: relative !important; border: 1px solid rgba(15, 199, 105, .72) !important; outline: none !important; background: var(--filter-btn-bg) !important; background-size: 100% 100% !important; color: #111827 !important; text-shadow: none !important; box-shadow: 0 4px 10px rgba(15, 23, 42, .045) !important; animation: cpV195UpcomingGreenOutline 3.7s ease-in-out infinite !important; transform: none !important; filter: none !important; } #pageListaClientes > #filterBar > #btnProximos.cp-v72-upcoming-neon.active-filter { /* Estado selecionado preserva a cor estática do tema, sem animar o fundo. */ background: linear-gradient(180deg, color-mix(in srgb, var(--filter-active-bg) 88%, white 12%), var(--filter-active-bg)) !important; } #pageListaClientes > #filterBar > #btnProximos.cp-v72-upcoming-neon::before, #pageListaClientes > #filterBar > #btnProximos.cp-v72-upcoming-neon::after { content: none !important; display: none !important; } @keyframes cpV195UpcomingGreenOutline { 0%, 100% { border-color: rgba(15, 199, 105, .48); } 50% { border-color: rgba(14, 224, 113, .96); } } @media (prefers-reduced-motion: reduce) { #pageListaClientes > #filterBar > #btnProximos.cp-v72-upcoming-neon, #pageListaClientes > #filterBar > #btnProximos.cp-v72-upcoming-neon.active-filter { animation: none !important; border-color: rgba(15, 199, 105, .78) !important; } }