/* ═══════════════════════════════════════════ Lusoseg Dashboard — Styles Design system: Navy + Gold + Cream ═══════════════════════════════════════════ */ /* ── Inter (self-hosted, subset latino — cobre acentos PT) ── SIL Open Font License 1.1. font-src 'self' já permitido na CSP. Antes a fonte 'Inter' nunca era carregada → caía para Segoe UI. */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter-400.woff2') format('woff2'); } @font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter-500.woff2') format('woff2'); } @font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter-600.woff2') format('woff2'); } @font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/inter-700.woff2') format('woff2'); } :root { --navy: #21234D; --navy-light: #344A9A; --gold: #CA9E67; --gold-dark: #B8894F; --gold-text: #946B33; /* A-02: dourado legivel como TEXTO sobre branco (~4,8:1 AA). NAO usar como fundo/marca. */ --cream: #FFFEF3; --cream-mid: #F8F5E8; --white: #FFFFFF; --text-dark: #21234D; --text-body: #4A4C6A; --text-muted: #6B6D88; /* A-02: escurecido de #7B7D9A para ~4,8:1 (AA texto normal sobre branco) */ --border: rgba(33,35,77,0.08); --shadow: 0 2px 8px rgba(33,35,77,0.06); --shadow-md: 0 4px 20px rgba(33,35,77,0.08); --radius: 10px; --radius-lg: 14px; --sidebar-w: 240px; --topbar-h: 60px; /* === Apple-style tokens === */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; /* Shadow stack (layered, soft - replaces hard borders gradually) */ --shadow-1: 0 1px 2px rgba(33,35,77,0.04), 0 1px 1px rgba(33,35,77,0.02); --shadow-2: 0 2px 6px rgba(33,35,77,0.05), 0 1px 2px rgba(33,35,77,0.03); --shadow-3: 0 6px 18px rgba(33,35,77,0.07), 0 2px 5px rgba(33,35,77,0.04); --shadow-4: 0 16px 40px rgba(33,35,77,0.1), 0 4px 12px rgba(33,35,77,0.06); --shadow-5: 0 28px 64px rgba(33,35,77,0.16), 0 8px 24px rgba(33,35,77,0.08); /* Materials (translucent backdrops - Apple HIG) */ --material-thin: rgba(255, 254, 243, 0.55); --material-regular: rgba(255, 254, 243, 0.72); --material-thick: rgba(255, 254, 243, 0.86); --material-ultra-thick: rgba(255, 254, 243, 0.96); --material-blur: blur(24px) saturate(180%); --material-blur-strong: blur(40px) saturate(200%); /* Motion curves (Apple-style springs/eases) */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot subtle */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* fast start, smooth end */ --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 150ms; --duration-base: 240ms; --duration-slow: 400ms; /* === iOS System Colors (light) === */ --ios-red: #FF3B30; --ios-orange: #FF9500; --ios-yellow: #FFCC00; --ios-green: #34C759; --ios-mint: #00C7BE; --ios-teal: #30B0C7; --ios-cyan: #32ADE6; --ios-blue: #007AFF; --ios-indigo: #5856D6; --ios-purple: #AF52DE; --ios-pink: #FF2D55; --ios-brown: #A2845E; --ios-gray: #8E8E93; /* iOS tinted backgrounds (sobre branco) */ --ios-red-bg: rgba(255,59,48,0.12); --ios-orange-bg: rgba(255,149,0,0.14); --ios-yellow-bg: rgba(255,204,0,0.18); --ios-green-bg: rgba(52,199,89,0.14); --ios-mint-bg: rgba(0,199,190,0.14); --ios-blue-bg: rgba(0,122,255,0.12); --ios-indigo-bg: rgba(88,86,214,0.14); --ios-purple-bg: rgba(175,82,222,0.14); --ios-pink-bg: rgba(255,45,85,0.14); --ios-gray-bg: rgba(142,142,147,0.16); /* iOS darker tints for solid pill text on tinted bg (better contrast) */ --ios-red-text: #C0382B; --ios-orange-text: #C76D00; --ios-green-text: #1F8E3D; --ios-blue-text: #0058B0; --ios-purple-text: #8038A8; --ios-gray-text: #6C6C70; } /* Dark mode: shadows mais densas, materials sobre navy */ [data-theme="dark"] { --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2); --shadow-2: 0 2px 6px rgba(0,0,0,0.5); --shadow-3: 0 8px 24px rgba(0,0,0,0.55); --shadow-4: 0 16px 40px rgba(0,0,0,0.65); --shadow-5: 0 28px 64px rgba(0,0,0,0.75); --material-thin: rgba(33, 35, 77, 0.55); --material-regular: rgba(33, 35, 77, 0.72); --material-thick: rgba(33, 35, 77, 0.86); --material-ultra-thick: rgba(33, 35, 77, 0.96); /* iOS System Colors (dark variants - mais saturadas/luminosas) */ --ios-red: #FF453A; --ios-orange: #FF9F0A; --ios-yellow: #FFD60A; --ios-green: #32D74B; --ios-mint: #66D4CF; --ios-teal: #40C8E0; --ios-cyan: #64D2FF; --ios-blue: #0A84FF; --ios-indigo: #5E5CE6; --ios-purple: #BF5AF2; --ios-pink: #FF375F; --ios-gray: #98989F; --ios-red-bg: rgba(255,69,58,0.18); --ios-orange-bg: rgba(255,159,10,0.18); --ios-yellow-bg: rgba(255,214,10,0.18); --ios-green-bg: rgba(50,215,75,0.18); --ios-blue-bg: rgba(10,132,255,0.18); --ios-indigo-bg: rgba(94,92,230,0.18); --ios-purple-bg: rgba(191,90,242,0.18); --ios-pink-bg: rgba(255,55,95,0.18); --ios-gray-bg: rgba(152,152,159,0.2); --ios-red-text: #FF6B5E; --ios-orange-text: #FFB048; --ios-green-text: #4ADE80; --ios-blue-text: #5EAFFF; --ios-purple-text: #D08AFF; --ios-gray-text: #B5B5BA; } * { margin: 0; padding: 0; box-sizing: border-box; } .skip-link{position:absolute;top:-100%;left:16px;z-index:10001;padding:8px 16px;background:var(--gold);color:#fff;font-weight:700;border-radius:0 0 var(--radius) var(--radius);font-size:0.85rem;text-decoration:none;transition:top 0.2s} .skip-link:focus{top:0} :focus-visible{outline:2px solid var(--gold);outline-offset:2px} .btn:focus-visible,.nav-item:focus-visible,.modal-close:focus-visible,.theme-toggle:focus-visible,.topbar-btn:focus-visible,.filter-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--radius)} .form-group input:focus-visible,.form-group select:focus-visible,.form-group textarea:focus-visible,.filter-input:focus-visible,.note-form textarea:focus-visible{outline:2px solid var(--gold);outline-offset:0} body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--text-body); background: var(--cream-mid); line-height: 1.6; font-size: 0.9rem; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: -0.005em; } h1, h2, h3, h4, h5, h6 { letter-spacing: -0.018em; line-height: 1.2; } h1 { letter-spacing: -0.025em; } .fw-700, .fw-800, strong, b { letter-spacing: -0.012em; } /* Numerals tabular - alinhamento perfeito em colunas de valores */ .stat-number, .fs-13, .fs-14, .fs-11, .fs-1, code { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } a { color: var(--navy-light); text-decoration: none; } a:hover { color: var(--gold); } /* ═══ LAYOUT ═══ */ .panel-layout { display: flex; min-height: 100vh; } /* ═══ SIDEBAR ═══ */ .sidebar { width: var(--sidebar-w); background: linear-gradient(180deg, var(--navy) 0%, #1a1c3f 100%); color: var(--cream); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; transition: transform 0.3s var(--ease-out-cubic); box-shadow: var(--shadow-2); } .sidebar-header { height: var(--topbar-h); padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; box-sizing: border-box; } .sidebar-logo { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 700; color: var(--cream); letter-spacing: -0.022em; transition: transform var(--duration-fast) var(--ease-out-cubic); } .sidebar-logo:hover { transform: translateY(-1px); } .sidebar-logo img { height: 36px; width: auto; max-width: 200px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); } /* Icone-only do leao (lion-glow) para estado collapsed. lion-glow.svg ja tem fill gold nativo (#c49a5a), nao precisa de filtro. */ .sidebar-logo-icon { display: none; } .sidebar-nav { flex: 1; padding: 14px 10px; overflow-y: auto; } .sidebar-section-title { font-size: 0.66rem; font-weight: 700; color: rgba(255,254,243,0.35); text-transform: uppercase; letter-spacing: 0.08em; padding: 12px 14px 6px; } .nav-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 14px; border-radius: var(--radius-sm); color: rgba(255,254,243,0.6); font-size: 0.85rem; font-weight: 500; margin-bottom: 2px; letter-spacing: -0.005em; transition: background var(--duration-fast) var(--ease-out-cubic), color var(--duration-fast) var(--ease-out-cubic), transform var(--duration-fast) var(--ease-out-cubic); } .nav-item:hover { background: rgba(255,255,255,0.06); color: var(--cream); } .nav-item:active { transform: scale(0.97); } /* Sidebar SVG icons SF Symbols-style (rounded line caps + slightly bolder when active) */ .sidebar-nav svg, .sidebar-footer svg { stroke-linecap: round; stroke-linejoin: round; transition: stroke-width var(--duration-fast) var(--ease-out-cubic); } .nav-item.active svg { stroke-width: 2.4; } .nav-item.active svg { filter: drop-shadow(0 1px 2px rgba(33,35,77,0.25)); } .nav-item.active { background: linear-gradient(180deg, #DDB078 0%, var(--gold) 50%, #B8894F 100%); color: var(--navy); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.06); } .nav-item.active::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: var(--cream); box-shadow: 0 0 8px rgba(255,254,243,0.5); } .nav-item.active svg { stroke: var(--navy); } .nav-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 12px 14px; } .sidebar-footer { padding: 12px 10px; border-top: 1px solid rgba(255,255,255,0.06); } .nav-logout:hover { background: rgba(255,59,48,0.15); color: #FF6B5E; } /* ═══ MAIN ═══ */ .main-content { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; } /* ═══ TOPBAR (Liquid Glass) ═══ */ .topbar { height: var(--topbar-h); background: var(--cream); border-bottom: 1px solid transparent; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 50; transition: background var(--duration-base) var(--ease-out-cubic), box-shadow var(--duration-base) var(--ease-out-cubic), border-bottom-color var(--duration-base) var(--ease-out-cubic); } .topbar-title { font-size: 1.2rem; font-weight: 700; color: var(--navy); letter-spacing: -0.022em; } .topbar-actions { display: flex; align-items: center; gap: 14px; } .topbar-btn { position: relative; color: var(--text-muted); padding: 8px; background: none; border: none; cursor: pointer; border-radius: var(--radius-sm); transition: background var(--duration-fast) var(--ease-out-cubic), color var(--duration-fast) var(--ease-out-cubic); } .topbar-btn:hover { color: var(--navy); background: rgba(33,35,77,0.05); } .notif-badge { position: absolute; top: 2px; right: 2px; background: #FF3B30; color: white; font-size: 0.62rem; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 0 0 2px var(--cream-mid), 0 2px 4px rgba(255,59,48,0.4); animation: ls-notif-pulse 2.4s ease-in-out infinite; } .notif-badge[hidden] { display: none !important; } /* sobrepor display:flex acima */ @keyframes ls-notif-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--cream-mid), 0 0 0 0 rgba(255,59,48,0.4); } 50% { box-shadow: 0 0 0 2px var(--cream-mid), 0 0 0 6px rgba(255,59,48,0); } } .topbar-user { text-align: right; line-height: 1.2; } .topbar-user-name { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy); letter-spacing: -0.012em; } .topbar-user-role { display: block; font-size: 0.7rem; color: var(--text-muted); font-weight: 500; } /* Theme toggle icons (sun/moon swap by data-theme) */ .theme-toggle .theme-icon-light { display: none; } .theme-toggle .theme-icon-dark { display: block; } [data-theme="dark"] .theme-toggle .theme-icon-light { display: block; } [data-theme="dark"] .theme-toggle .theme-icon-dark { display: none; } /* Topbar user avatar (gradient ring + initials) */ .topbar-user-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; color: var(--navy); background: linear-gradient(135deg, var(--cream) 0%, var(--cream-mid) 100%); box-shadow: 0 0 0 2px var(--gold), 0 2px 6px rgba(33,35,77,0.12), inset 0 0.5px 0 rgba(255,255,255,0.6); letter-spacing: -0.01em; transition: transform var(--duration-fast) var(--ease-out-cubic), box-shadow var(--duration-base) var(--ease-out-cubic); cursor: pointer; flex-shrink: 0; } .topbar-user-avatar:hover { transform: scale(1.05); box-shadow: 0 0 0 2px var(--gold-dark), 0 4px 12px rgba(33,35,77,0.18); } .topbar-user-avatar:active { transform: scale(0.96); } .menu-btn { display: none; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; } /* ═══ PAGE CONTENT ═══ */ .page-content { padding: 24px; flex: 1; } /* ═══ STATS GRID ═══ */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .stat-card { background: var(--white); border-radius: var(--radius-md); padding: 20px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow-1), 0 0 0 0.5px var(--border); transition: transform var(--duration-fast) var(--ease-out-cubic), box-shadow var(--duration-base) var(--ease-out-cubic); } .stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2), 0 0 0 0.5px var(--border); } .stat-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.4); } .stat-primary .stat-icon { background: linear-gradient(135deg, rgba(52,74,154,0.16) 0%, rgba(52,74,154,0.06) 100%); color: var(--navy-light); } .stat-new .stat-icon { background: linear-gradient(135deg, rgba(52,152,219,0.16) 0%, rgba(52,152,219,0.06) 100%); color: #3498DB; } .stat-proposal .stat-icon { background: linear-gradient(135deg, rgba(155,89,182,0.16) 0%, rgba(155,89,182,0.06) 100%); color: #9B59B6; } .stat-won .stat-icon { background: linear-gradient(135deg, rgba(39,174,96,0.16) 0%, rgba(39,174,96,0.06) 100%); color: #27AE60; } .stat-number { font-size: 1.85rem; font-weight: 700; color: var(--navy); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .stat-label { font-size: 0.76rem; color: var(--text-muted); letter-spacing: -0.005em; font-weight: 500; } .stat-info { display: flex; flex-direction: column; gap: 2px; } /* ═══ DASHBOARD GRID ═══ */ .dashboard-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin-bottom: 20px; } .dash-card { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-1), 0 0 0 0.5px var(--border); overflow: hidden; transition: box-shadow var(--duration-base) var(--ease-out-cubic); } .dash-card:hover { box-shadow: var(--shadow-2), 0 0 0 0.5px var(--border); } .dash-card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .dash-card-header h3 { font-size: 0.92rem; font-weight: 700; color: var(--navy); } .dash-card-link { font-size: 0.78rem; color: var(--gold-dark); font-weight: 600; } .dash-card-body { padding: 16px 20px; } /* ═══ ALERTS (iOS notification feel) ═══ */ .alert { padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: 20px; font-size: 0.86rem; border: 1px solid transparent; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-1); } .alert-error { background: rgba(253,236,234,0.85); color: #C0392B; border-color: rgba(245,198,203,0.6); } .alert-warning { background: rgba(255,248,225,0.85); color: #B8860B; border-color: rgba(255,236,179,0.6); } .alert-success { background: rgba(232,245,233,0.85); color: #1E8449; border-color: rgba(200,230,201,0.6); } .alert a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } /* ═══ BADGES (iOS tinted pills) ═══ */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; background: var(--ios-gray-bg); color: var(--ios-gray-text); letter-spacing: -0.005em; border: none; white-space: nowrap; } .badge-sm { font-size: 0.68rem; padding: 2px 8px; } /* Solid badge variant (for cases where filled bg is desired) */ .badge-solid { color: white; box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.2); } /* ═══ TABLES ═══ */ .table-responsive { overflow-x: auto; } /* border-collapse: separate (nao collapse) para o thead sticky tapar correctamente as linhas ao scroll. Com 'collapse' o fundo do fixo nao oculta as linhas por baixo (bug conhecido sticky + border-collapse) -> cabecalho sobre os dados. */ .table { width: 100%; border-collapse: separate; border-spacing: 0; } .table th { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); /* Branco puro - sticky precisa de background OPACO; rgba transparente deixava ver linhas por baixo. */ background: #FFFFFF; } /* Fase 3 (Sprint 5): sticky thead em desktop. Mantem cabecalhos visiveis ao scroll em listagens com 100+ linhas (clientes, apolices, recibos). */ @media (min-width: 769px) { .table thead th { position: sticky; top: var(--topbar-h); z-index: 5; background: #FFFFFF; box-shadow: 0 1px 0 var(--border), 0 4px 8px -6px rgba(33,35,77,0.18); } [data-theme="dark"] .table thead th { background: var(--dark-card); } /* CAUSA-RAIZ do cabecalho sticky por cima das linhas (clientes/cobrancas/ sinistros): o overflow-x:auto do .table-responsive cria um scroll container e o position:sticky do thead deixa de se fixar a viewport, sobrepondo as linhas. As listagens data-grid sao compactas e cabem em desktop -> dispensam scroll horizontal, e o sticky volta a funcionar. Tabelas-relatorio largas (sem .table-grid) mantem o overflow/scroll. */ .table-responsive:has(.table-grid) { overflow: visible; } } /* Fase 3 (Sprint 5): indicadores de ordenacao acessiveis. th[aria-sort] = "ascending" | "descending" | "none". Servidor renderiza o atributo conforme a coluna em uso (functions.php sortLink helper). */ .table th[aria-sort] { cursor: pointer; } .table th[aria-sort="ascending"]::after { content: ' ▲'; opacity: 0.7; } .table th[aria-sort="descending"]::after { content: ' ▼'; opacity: 0.7; } .table th[aria-sort="none"]::after { content: ' ⇅'; opacity: 0.3; } .table td { padding: 13px 14px; border-bottom: 1px solid var(--border); font-size: 0.86rem; } .table tbody tr { transition: background var(--duration-fast) var(--ease-out-cubic); } .table-hover tbody tr:hover { background: rgba(202,158,103,0.06); } .table tbody tr:last-child td { border-bottom: none; } /* ── Quick win D-05: números tabulares + alinhamento financeiro ── Reutilizável: pôr class="num" em / numéricos, "col-money" em valores €. */ .table { font-variant-numeric: tabular-nums; } @media (min-width: 769px) { .table td.num, .table th.num { text-align: right; } } .table .col-money { white-space: nowrap; font-weight: 600; } .cell-meta { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; } /* ═══ DATA-GRID: célula de entidade (barra de tier + nome forte + meta discreta) ═══ Reutilizável em listagens. A cor do tier vem de --tier-color (herdada da , definida pelo handler data-tier-color em csp-helpers.js). */ .cell-primary { font-weight: 600; color: var(--text-dark); line-height: 1.3; } .tier-mini { display: inline-block; min-width: 17px; height: 17px; padding: 0 4px; margin-right: 5px; border-radius: 5px; font-size: 0.64rem; font-weight: 700; line-height: 17px; text-align: center; color: #fff; vertical-align: 1px; background: var(--tier-color, var(--gold)); } .cell-flags { display: inline-flex; gap: 4px; vertical-align: middle; } .flag { display: inline-block; font-size: 0.66rem; padding: 1px 7px; border-radius: var(--r-pill, 999px); font-weight: 600; line-height: 1.5; white-space: nowrap; } .flag-claim { background: var(--ios-red-bg); color: var(--ios-red-text); } .flag-renew { background: var(--ios-orange-bg); color: var(--ios-orange-text); } /* Barra de tier à esquerda da célula (só desktop; em mobile a já tem barra própria) */ @media (min-width: 769px) { .cell-client { position: relative; padding-left: 20px; } .cell-client::before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 4px; height: 60%; min-height: 22px; border-radius: 2px; background: var(--tier-color, var(--gold)); } /* Densidade estável: altura mínima de linha mata o efeito "aos saltos" */ .table-grid tbody tr td { height: 52px; } } .table-grid tbody tr:nth-child(even):not(:hover) { background: var(--surface-2, rgba(33,35,77,0.022)); } /* Fase 3 (Sprint 6): breadcrumbs */ .breadcrumb { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 8px; line-height: 1.4; } .breadcrumb a { color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted transparent; transition: border-bottom-color var(--duration-fast); } .breadcrumb a:hover { border-bottom-color: var(--gold); color: var(--navy); } .breadcrumb-current { color: var(--navy); font-weight: 500; } .breadcrumb-sep { margin: 0 6px; opacity: 0.5; } /* Fase 3 (Sprint 6): agrupamento da sidebar (Operacao / Analise / Sistema) */ .nav-group-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); padding: 14px 16px 6px; margin-top: 4px; } .nav-group-label:first-child { margin-top: 0; padding-top: 8px; } /* Fase 3 (Sprint 5): bulk actions row */ .bulk-actions-bar { position: sticky; bottom: 12px; z-index: 6; display: none; align-items: center; gap: 12px; padding: 12px 16px; margin-top: 12px; background: var(--navy); color: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-3); } .bulk-actions-bar.active { display: flex; } .bulk-actions-bar .bulk-count { font-weight: 700; } .bulk-actions-bar .btn { background: var(--white); color: var(--navy); } .clickable-row { cursor: pointer; } .clickable-row:active td { background: rgba(202,158,103,0.12); } /* A-01: foco visivel quando a linha e navegada por teclado (outline inset numa ) */ .clickable-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; background: rgba(202,158,103,0.08); } code { background: rgba(33,35,77,0.06); padding: 2px 7px; border-radius: var(--radius-xs); font-size: 0.78rem; color: var(--navy); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-feature-settings: 'tnum' 1; } .text-sm { font-size: 0.8rem; } .text-muted { color: var(--text-muted); } /* iOS Segmented Control (substituto bonito para tab bars / page-tabs simples) */ .segmented-control { display: inline-flex; padding: 2px; background: transparent; border-radius: var(--radius-sm); gap: 2px; } .segmented-control > * { flex: 1; padding: 6px 14px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); border-radius: calc(var(--radius-sm) - 2px); text-align: center; cursor: pointer; border: none; background: transparent; transition: all var(--duration-fast) var(--ease-out-cubic); text-decoration: none; } .segmented-control > *:hover { color: var(--navy); } .segmented-control > .active, .segmented-control > [aria-selected="true"] { background: var(--white); color: var(--navy); box-shadow: var(--shadow-1), 0 0 0 0.5px rgba(0,0,0,0.04); } /* iOS-style scrollbars (thin, fade in on hover) */ * { scrollbar-width: thin; scrollbar-color: rgba(33,35,77,0.2) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(33,35,77,0.18); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: rgba(33,35,77,0.32); background-clip: padding-box; border: 2px solid transparent; } [data-theme="dark"] *::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); background-clip: padding-box; border: 2px solid transparent; } /* Focus ring iOS-style global (azul/gold halo subtil) */ *:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(202,158,103,0.25), 0 0 0 1px var(--gold); border-radius: var(--radius-xs); } button:focus-visible, .btn:focus-visible { box-shadow: 0 0 0 4px rgba(202,158,103,0.25); } /* ═══ BUTTONS (Apple-style: spring tap, layered shadows) ═══ */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; border: 1.5px solid transparent; cursor: pointer; font-family: inherit; letter-spacing: -0.005em; transition: background var(--duration-fast) var(--ease-out-cubic), border-color var(--duration-fast) var(--ease-out-cubic), color var(--duration-fast) var(--ease-out-cubic), box-shadow var(--duration-fast) var(--ease-out-cubic), transform var(--duration-fast) var(--ease-out-cubic); } .btn:active { transform: scale(0.96); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-gold { background: linear-gradient(180deg, #D6AB76 0%, var(--gold) 50%, #C29655 100%); color: var(--navy); border-color: rgba(202,158,103,0.85); box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.04); text-shadow: 0 0.5px 0 rgba(255,255,255,0.2); } .btn-gold:hover { background: linear-gradient(180deg, #CA9E67 0%, var(--gold-dark) 50%, #AA7E45 100%); border-color: var(--gold-dark); color: var(--navy); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,0.3); } .btn-outline { background: var(--material-thin); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--navy); border-color: var(--border); } .btn-outline:hover { border-color: var(--gold); color: var(--gold-dark); background: var(--material-regular); } .btn-navy { background: linear-gradient(180deg, #2E315A 0%, var(--navy) 50%, #1A1C3F 100%); color: var(--cream); border-color: rgba(33,35,77,0.85); box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.12); } .btn-navy:hover { color: var(--cream); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,0.18); } .btn-sm { padding: 6px 14px; font-size: 0.78rem; } .btn-block { width: 100%; justify-content: center; } .btn-whatsapp { background: linear-gradient(180deg, #2EE076 0%, #25D366 50%, #1FB855 100%); color: #fff; border-color: #25D366; box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.2); } .btn-whatsapp:hover { background: linear-gradient(180deg, #25D366 0%, #1FB855 50%, #199948 100%); color: #fff; box-shadow: var(--shadow-3); } /* Loading state (use aria-busy="true" or .is-loading) */ .btn[aria-busy="true"], .btn.is-loading { color: transparent !important; pointer-events: none; position: relative; } .btn[aria-busy="true"] > *, .btn.is-loading > * { visibility: hidden; } .btn[aria-busy="true"]::after, .btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: ls-spin 0.7s linear infinite; color: var(--navy); visibility: visible; } .btn-gold[aria-busy="true"]::after, .btn-gold.is-loading::after { color: var(--navy); } .btn-navy[aria-busy="true"]::after, .btn-navy.is-loading::after { color: var(--cream); } .btn-whatsapp[aria-busy="true"]::after, .btn-whatsapp.is-loading::after { color: #fff; } /* ═══ FORMS (iOS-style: inset bg, rounded, focus ring glow) ═══ */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; letter-spacing: -0.005em; text-transform: none; } .form-group input, .form-group select, .form-group textarea, .filter-input, .filter-select { width: 100%; padding: 11px 14px; background: var(--cream-mid); border: 1px solid transparent; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.9rem; color: var(--text-dark); transition: background var(--duration-fast) var(--ease-out-cubic), border-color var(--duration-fast) var(--ease-out-cubic), box-shadow var(--duration-fast) var(--ease-out-cubic); -webkit-appearance: none; appearance: none; } .form-group select, .filter-select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237B7D9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; padding-right: 36px; } .form-group input:hover, .form-group select:hover, .form-group textarea:hover, .filter-input:hover, .filter-select:hover { background: var(--cream); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus, .filter-input:focus, .filter-select:focus { background: var(--white); border-color: var(--gold); outline: none; box-shadow: 0 0 0 4px rgba(202,158,103,0.15); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.5; cursor: not-allowed; } /* Fase 3 (Sprint 5): estados de erro inline */ .form-group input[aria-invalid="true"], .form-group select[aria-invalid="true"], .form-group textarea[aria-invalid="true"], .filter-input[aria-invalid="true"], .filter-select[aria-invalid="true"] { border-color: var(--ios-red); background: rgba(255,59,48,0.04); } .form-error { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--ios-red); line-height: 1.3; } .form-error::before { content: '⚠ '; opacity: 0.8; } .form-group textarea { resize: vertical; min-height: 72px; line-height: 1.5; } .form-group input::placeholder, .form-group textarea::placeholder, .filter-input::placeholder { color: var(--text-muted); opacity: 0.7; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .filter-input, .filter-select { padding: 8px 14px; font-size: 0.85rem; } .filter-select { padding-right: 32px; } /* QW10: garantir que TODOS os */ .ios-switch { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: var(--radius-pill); background: rgba(120,120,128,0.16); position: relative; cursor: pointer; transition: background var(--duration-fast) var(--ease-out-cubic); } .ios-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.05); transition: transform var(--duration-base) var(--ease-spring); } .ios-switch:checked { background: #34C759; } .ios-switch:checked::after { transform: translateX(18px); } /* Checkbox/radio iOS-feel (subtle round corners + gold check) */ input[type="checkbox"]:not(.ios-switch), input[type="radio"] { accent-color: var(--gold); width: 18px; height: 18px; cursor: pointer; } /* ═══ PAGE TABS (iOS segmented control style) ═══ */ .page-tabs { display: inline-flex; gap: 2px; background: rgba(120,120,128,0.12); padding: 3px; border-radius: var(--radius-md); margin-bottom: 24px; } .page-tab { padding: 7px 16px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); border-radius: calc(var(--radius-md) - 3px); transition: color var(--duration-fast) var(--ease-out-cubic), background var(--duration-fast) var(--ease-out-cubic), box-shadow var(--duration-base) var(--ease-out-cubic), transform var(--duration-fast) var(--ease-out-cubic); text-decoration: none; white-space: nowrap; } .page-tab:hover { color: var(--navy); } .page-tab:active { transform: scale(0.97); } .page-tab.active { color: var(--navy); background: var(--white); box-shadow: var(--shadow-1), 0 0 0 0.5px rgba(0,0,0,0.04); } /* ═══ PAGE ACTIONS ═══ */ .page-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } /* ═══ MODALS ═══ */ .modal-overlay { position: fixed; inset: 0; background: rgba(33, 35, 77, 0.32); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.active { display: flex; animation: ls-modal-fade var(--duration-base) var(--ease-out-cubic); } @keyframes ls-modal-fade { from { opacity: 0; } to { opacity: 1; } } .modal-card { background: var(--material-ultra-thick); backdrop-filter: var(--material-blur-strong); -webkit-backdrop-filter: var(--material-blur-strong); border-radius: var(--radius-xl); padding: 28px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-5); border: 1px solid rgba(255,255,255,0.4); animation: ls-modal-pop var(--duration-slow) var(--ease-spring); } [data-theme="dark"] .modal-card { border-color: rgba(255,255,255,0.08); } @keyframes ls-modal-pop { from { opacity: 0; transform: scale(0.95) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .modal-header h3 { font-size: 1.1rem; color: var(--navy); } .modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--text-muted); padding: 4px; } .modal-close:hover { color: var(--navy); } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } /* ═══ LEAD DETAIL ═══ */ .lead-header { margin-bottom: 24px; } .back-link { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 12px; display: inline-block; } .back-link:hover { color: var(--gold); } .lead-header-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .lead-header-info h2 { font-size: 1.3rem; color: var(--navy); margin-bottom: 6px; } .lead-ref { font-size: 0.82rem; vertical-align: middle; } .lead-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.82rem; } .lead-actions-top { display: flex; gap: 8px; } .lead-grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px; } /* ═══ INFO CARD ═══ */ .info-card { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-1), 0 0 0 0.5px var(--border); padding: 20px; margin-bottom: 16px; } .info-card h4 { font-size: 0.88rem; color: var(--navy); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .info-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.84rem; gap: 12px; } .info-row span:first-child { color: var(--text-muted); flex-shrink: 0; } .info-row strong, .info-row a { text-align: right; word-break: break-word; overflow-wrap: break-word; } /* ═══ NOTE FORM ═══ */ .note-form { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: 16px; margin-bottom: 20px; } .note-form-top { display: flex; gap: 8px; margin-bottom: 10px; } .note-form textarea { width: 100%; padding: 11px 14px; background: var(--cream-mid); border: 1px solid transparent; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.88rem; resize: vertical; line-height: 1.5; transition: background var(--duration-fast) var(--ease-out-cubic), border-color var(--duration-fast) var(--ease-out-cubic), box-shadow var(--duration-fast) var(--ease-out-cubic); } .note-form textarea:focus { background: var(--white); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(202,158,103,0.15); outline: none; } /* ═══ TIMELINE ═══ */ .timeline { position: relative; padding-left: 24px; } .timeline::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--border); } .timeline-item { position: relative; padding-bottom: 20px; } .timeline-dot { position: absolute; left: -20px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--white); box-shadow: 0 0 0 1px rgba(202,158,103,0.2); } .dot-status { background: var(--navy-light); } .timeline-content { background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow-1); padding: 12px 16px; } .timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 0.82rem; } .timeline-type { font-size: 0.7rem; color: var(--gold-dark); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .timeline-content p { font-size: 0.85rem; margin-top: 4px; } /* ═══ FOLLOWUP LIST ═══ */ .followup-list { display: flex; flex-direction: column; gap: 6px; } .followup-item { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--white); box-shadow: var(--shadow-1); font-size: 0.84rem; transition: background var(--duration-fast) var(--ease-out-cubic), box-shadow var(--duration-base) var(--ease-out-cubic), transform var(--duration-fast) var(--ease-out-cubic); } .followup-item:hover { background: rgba(202,158,103,0.04); box-shadow: var(--shadow-2); transform: translateY(-1px); color: inherit; } /* ═══ EMPTY STATE ═══ */ .empty-state { text-align: center; color: var(--text-muted); padding: 24px; font-size: 0.88rem; } /* ═══ LOGIN (Apple glass + gradient bg + animated orbs) ═══ */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; position: relative; background: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(202,158,103,0.18) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(52,74,154,0.32) 0%, transparent 60%), linear-gradient(135deg, #1A1C3F 0%, var(--navy) 50%, #2A2C5C 100%); overflow: hidden; } .login-page::before { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(202,158,103,0.22) 0%, transparent 70%); top: -120px; left: -120px; filter: blur(60px); animation: ls-orb-float 16s ease-in-out infinite; pointer-events: none; } .login-page::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(52,74,154,0.35) 0%, transparent 70%); bottom: -100px; right: -100px; filter: blur(60px); animation: ls-orb-float 18s ease-in-out infinite reverse; pointer-events: none; } @keyframes ls-orb-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -20px) scale(1.05); } 66% { transform: translate(-20px, 25px) scale(0.95); } } .login-container { width: 100%; max-width: 400px; position: relative; z-index: 1; } .login-card { background: rgba(255, 254, 243, 0.86); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255,255,255,0.5); border-radius: var(--radius-xl); padding: 44px 36px; box-shadow: var(--shadow-5); animation: ls-login-pop 0.5s var(--ease-spring); } @keyframes ls-login-pop { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .login-logo { text-align: center; margin-bottom: 28px; } .login-logo h1 { font-size: 1.6rem; color: var(--navy); margin-top: 8px; letter-spacing: -0.022em; } .login-logo p { color: var(--text-muted); font-size: 0.9rem; letter-spacing: -0.005em; margin-top: 6px; } .login-logo img { height: 50px; width: auto; max-width: 280px; filter: drop-shadow(0 4px 12px rgba(33,35,77,0.15)); } .login-card .form-group { margin-bottom: 18px; } .btn-login { width: 100%; padding: 13px; background: linear-gradient(180deg, #DDB078 0%, var(--gold) 50%, #B8894F 100%); color: var(--navy); border: 1.5px solid rgba(202,158,103,0.85); border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.05); text-shadow: 0 0.5px 0 rgba(255,255,255,0.2); letter-spacing: -0.005em; transition: background var(--duration-fast) var(--ease-out-cubic), box-shadow var(--duration-base) var(--ease-out-cubic), transform var(--duration-fast) var(--ease-out-cubic); } .btn-login:hover { background: linear-gradient(180deg, #CA9E67 0%, var(--gold-dark) 50%, #AA7E45 100%); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,0.3); } .btn-login:active { transform: scale(0.98); } .login-footer { text-align: center; margin-top: 20px; } .login-footer a { font-size: 0.82rem; color: var(--text-muted); transition: color var(--duration-fast) var(--ease-out-cubic); } .login-footer a:hover { color: var(--gold-dark); } /* ═══ THEME TOGGLE ═══ */ .theme-toggle{background:none;border:none;cursor:pointer;color:var(--text-muted);line-height:1;transition:background var(--duration-fast) var(--ease-out-cubic),color var(--duration-fast) var(--ease-out-cubic);padding:8px;border-radius:var(--radius-sm)} .theme-toggle:hover{color:var(--navy);background:rgba(33,35,77,0.05)} /* ═══ RESPONSIVE ═══ */ /* Sidebar overlay */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; } .sidebar-overlay.active { display: block; } /* ═══ TABLET (max 1024px) ═══ */ @media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .dashboard-grid { grid-template-columns: 1fr !important; } .lead-grid { grid-template-columns: 1fr !important; } /* Grids inline com 2 colunas em vez de mais */ [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; } [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2,1fr) !important; } } /* ═══ MOBILE (max 768px) ═══ */ @media (max-width: 768px) { /* FORCAR: sem scroll horizontal */ html, body { overflow-x: hidden !important; max-width: 100vw; } .panel-layout { overflow-x: hidden; max-width: 100vw; } .main-content { overflow-x: hidden; margin-left: 0 !important; max-width: 100vw; } .page-content { overflow-x: hidden; padding: 12px !important; max-width: 100%; } /* Sidebar hamburger */ .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } /* Topbar compact */ .topbar { padding: 0 12px; height: 52px; } .topbar-title { font-size: 0.95rem; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-user-name, .topbar-user-role { display: none; } .topbar-user { display: none; } .topbar-user-avatar { width: 32px; height: 32px; font-size: 0.72rem; } .topbar-actions { gap: 6px; } /* Stats: 2 colunas compactas */ .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-bottom: 14px !important; } .stat-card { padding: 12px 10px !important; gap: 8px; } .stat-icon { width: 34px; height: 34px; } .stat-icon svg { width: 16px; height: 16px; } .stat-number { font-size: 1.05rem !important; } .stat-label { font-size: 0.67rem !important; } .stat-primary { border-left: 3px solid var(--gold) !important; } /* Page actions + filtros: empilhar + colapsavel */ .page-actions { flex-direction: column; align-items: stretch; gap: 10px; } .filter-bar { flex-direction: column; width: 100%; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease; margin: 0; } .filter-bar.filters-open { max-height: 600px; opacity: 1; margin-top: 0; } .filter-input, .filter-select { width: 100% !important; } .filter-bar .btn { width: 100%; justify-content: center; } .filter-toggle { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 0.82rem; font-weight: 600; color: var(--navy); cursor: pointer; font-family: inherit; width: 100%; justify-content: center; } .filter-toggle svg { transition: transform 0.2s; } .filter-toggle.open svg { transform: rotate(180deg); } .filter-toggle .filter-count { background: var(--gold); color: var(--white); font-size: 0.65rem; padding: 1px 6px; border-radius: 8px; margin-left: 4px; } /* Forms */ .form-grid { grid-template-columns: 1fr !important; } /* ═══ TABELAS → CARDS MOBILE ═══ */ .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .table thead { display: none; } .table, .table tbody { display: block; width: 100%; } .table tr { display: block; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; } .table td { display: flex; flex-direction: column; padding: 3px 0; border-bottom: none; font-size: 0.84rem; word-break: break-word; overflow-wrap: break-word; } .table td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 1px; } .table td:first-child { font-weight: 600; font-size: 0.88rem; padding-bottom: 4px; } .table td:first-child::before { display: none; } .table td:last-child { padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--border); flex-direction: row; gap: 6px; flex-wrap: wrap; } .table td:last-child::before { display: none; } .table td .badge { align-self: flex-start; } .table td strong { word-break: break-word; } .table td .btn { width: auto; min-height: 34px; font-size: 0.75rem; padding: 4px 12px; } /* ═══ LEADS AGRUPADAS - MOBILE ═══ */ /* Os cards de leads têm inline widths fixos - forçar wrap */ .page-content a[style*="display:flex"][style*="border-left:3px"] { flex-wrap: wrap !important; gap: 6px 10px !important; padding: 10px 12px !important; } /* Esconder colunas secundárias em mobile */ .page-content a[style*="border-left:3px"] > div[style*="width:110px"], .page-content a[style*="border-left:3px"] > div[style*="width:80px"], .page-content a[style*="border-left:3px"] > div[style*="width:70px"] { display: none !important; } /* Nome e tipo ocupam toda a largura */ .page-content a[style*="border-left:3px"] > div[style*="flex:1"] { min-width: 0 !important; flex: 1 1 60% !important; } .page-content a[style*="border-left:3px"] > div[style*="width:130px"] { width: auto !important; flex: 0 0 auto !important; } /* Avatar comercial */ .page-content a[style*="border-left:3px"] > div[style*="width:28px"] { width: 24px !important; position: absolute; right: 12px; top: 10px; } .page-content a[style*="border-left:3px"] { position: relative; padding-right: 40px !important; } /* ═══ LEADS LISTA - MOBILE ═══ */ /* Esconder colunas menos importantes na vista lista */ .table td[data-label="Sub-produto"], .table td[data-label="Marca"], .table td[data-label="Detalhe"], .table td[data-label="Follow-up"], .table td[data-label="Contacto"], .table td[data-label="Ref"], .table td[data-label="Origem"] { display: none !important; } /* ═══ LEAD/CLIENT DETAIL ═══ */ .lead-grid { grid-template-columns: 1fr !important; gap: 14px; } .lead-sidebar { order: 2; } .lead-main { order: 1; } .lead-header-info { flex-direction: column; } .client-header { flex-direction: column; gap: 10px; } .lead-actions-top { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; } .lead-actions-top .btn { justify-content: center; min-width: 0; font-size: 0.78rem; padding: 8px 6px; } /* Info card */ .info-card { padding: 14px; } .info-row { flex-direction: column; gap: 1px; padding: 6px 0; } .info-row span:first-child { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.3px; } .info-row strong, .info-row a { font-size: 0.84rem; text-align: left !important; word-break: break-all; } /* ═══ CONTA CORRENTE CARDS ═══ */ /* Cards resumo inline → stack vertical */ .page-content > .dash-card > .dash-card-body > div[style*="display:flex"][style*="flex-wrap:wrap"] { flex-direction: column !important; } .page-content div[style*="flex:1;min-width:100px"] { min-width: 0 !important; flex: 1 1 100% !important; } /* Resumo por ano - scroll horizontal */ .page-content div[style*="display:flex"][style*="gap:6px"][style*="flex-wrap:wrap"]:has(> div[style*="min-width:120px"]) { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } /* ═══ DASHBOARD ═══ */ .dashboard-grid { grid-template-columns: 1fr !important; gap: 14px; } .dash-card-body { padding: 10px 12px; } .dash-card-header { padding: 12px 14px; flex-wrap: wrap; gap: 6px; } .dash-card-header h3 { font-size: 0.85rem; } /* Followup items */ .followup-item { flex-direction: column; align-items: flex-start; gap: 3px; font-size: 0.82rem; padding: 8px 10px; } /* ═══ PRODUCAO / COMISSOES GRIDS ═══ */ /* Grids inline com 4 colunas → 2 colunas */ div[style*="repeat(4,1fr)"], div[style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* Grids 2 colunas inline → 1 coluna */ .lead-grid[style*="1fr 1fr"] { grid-template-columns: 1fr !important; } div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } /* ═══ MODAIS → BOTTOM SHEET ═══ */ .modal-overlay { padding: 0; align-items: flex-end; } .modal-card { padding: 20px 16px; max-height: 85vh; max-width: 100%; width: 100%; border-radius: 16px 16px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } .modal-header { position: sticky; top: 0; background: var(--white); z-index: 1; padding-bottom: 12px; } .modal-header::before { content: ''; display: block; width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 12px; } .modal-actions { flex-wrap: wrap; gap: 8px; position: sticky; bottom: 0; background: var(--white); padding: 12px 0; } .modal-actions .btn { flex: 1; min-width: 0; justify-content: center; } /* ═══ NOTE FORM ═══ */ .note-form { padding: 12px; } .note-form-top { flex-direction: column; gap: 6px; } .note-form-top .btn { width: 100%; justify-content: center; } .note-form-top .filter-select { width: 100%; } /* ═══ TIMELINE ═══ */ .timeline { padding-left: 18px; } .timeline-content { padding: 10px 12px; } .timeline-header { flex-direction: column; align-items: flex-start; gap: 2px; } /* ═══ PAGE TABS ═══ */ .page-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0; scrollbar-width: none; } .page-tabs::-webkit-scrollbar { display: none; } .page-tab { white-space: nowrap; padding: 10px 14px; font-size: 0.82rem; flex-shrink: 0; } /* ═══ TYPOGRAPHY MOBILE ═══ */ body { font-size: 1rem; } .stat-label { font-size: 0.7rem !important; } .badge { font-size: 0.7rem; padding: 3px 8px; } .badge-sm { font-size: 0.65rem; } /* ═══ BOTOES TOUCH-FRIENDLY (min 44px) ═══ */ .btn { min-height: 44px; } .btn-sm { min-height: 40px; padding: 8px 14px; } .menu-btn { padding: 10px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .topbar-btn { padding: 10px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .theme-toggle { padding: 10px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .modal-close { padding: 10px; min-width: 44px; min-height: 44px; font-size: 1.5rem; } .filter-toggle { min-height: 44px; } .pagination a, .pagination span { min-width: 42px; height: 42px; } /* ═══ FORM INPUTS TOUCH-FRIENDLY ═══ */ .form-group input, .form-group select, .form-group textarea { padding: 12px 14px; min-height: 44px; } .filter-input, .filter-select { padding: 10px 12px; min-height: 44px; } /* ═══ SEARCH RESULTS MOBILE ═══ */ .global-search-results { max-height: 60vh !important; } .gsr-item { min-height: 44px; padding: 12px 14px !important; } /* ═══ TABS AGRUPADO/LISTA ═══ */ div[style*="border:1px solid var(--border)"][style*="border-radius:var(--radius)"][style*="overflow:hidden"] { flex-shrink: 0; } div[style*="border:1px solid var(--border)"][style*="overflow:hidden"] > a { padding: 8px 12px !important; font-size: 0.75rem !important; } /* ═══ ALERTS ═══ */ .alert { font-size: 0.8rem; padding: 10px 12px; } /* ═══ BACK LINK ═══ */ .back-link { font-size: 0.78rem; padding: 6px 0; display: block; } /* ═══ BADGES ═══ */ .badge { font-size: 0.68rem; } .lead-meta { font-size: 0.78rem; } /* ═══ GENERIC INLINE OVERRIDES ═══ */ /* Flex containers com widths fixos dentro */ [style*="display:flex"][style*="gap:12px"] { flex-wrap: wrap !important; } /* Cards com min-width inline */ div[style*="min-width:140px"] { min-width: 0 !important; } div[style*="min-width:120px"] { min-width: 0 !important; } div[style*="min-width:180px"] { min-width: 0 !important; } div[style*="min-width:155px"] { min-width: 0 !important; } div[style*="min-width:160px"] { min-width: 0 !important; } div[style*="min-width:200px"] { min-width: 0 !important; } div[style*="min-width:280px"] { min-width: 0 !important; flex: 1 1 100% !important; } /* Safe area iPhone */ .page-content { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; } .sidebar { padding-bottom: env(safe-area-inset-bottom, 0px); } /* iOS zoom prevention */ input, select, textarea { font-size: 16px !important; } } /* ═══ SMALL MOBILE (max 480px) ═══ */ @media (max-width: 480px) { .page-content { padding: 8px !important; } .stats-grid { gap: 6px !important; } .stat-card { padding: 10px 8px !important; } .stat-number { font-size: 0.92rem !important; } .stat-label { font-size: 0.65rem !important; } .stat-icon { display: none; } .modal-card { padding: 16px 12px; } .login-card { padding: 24px 16px; } .login-container { max-width: 100%; padding: 0 8px; } .topbar-title { font-size: 0.88rem; max-width: 40vw; } .info-card { padding: 10px; } .table tr { padding: 10px; } .table td { font-size: 0.8rem; } .table td .btn { min-height: 38px; font-size: 0.72rem; padding: 6px 10px; } .dash-card-header h3 { font-size: 0.82rem; } .lead-header-info h2 { font-size: 1rem !important; } /* Leads agrupadas - ainda mais compacto */ .page-content a[style*="border-left:3px"] > div[style*="width:130px"] { display: none !important; } /* Lead actions - 1 coluna */ .lead-actions-top { grid-template-columns: 1fr !important; } /* Stats 2 colunas tight */ .stat-card { flex-direction: column; text-align: center; align-items: center; } /* Producao min-width fix */ div[style*="min-width:280px"] { min-width: 0 !important; flex: 1 1 100% !important; } div[style*="min-width:200px"] { min-width: 0 !important; } } /* ═══ TABLET LANDSCAPE (min 769, max 1024) ═══ */ @media (min-width: 769px) and (max-width: 1024px) { .sidebar { width: 200px; } .main-content { margin-left: 200px; } .page-content { padding: 18px; } .stats-grid { grid-template-columns: repeat(3, 1fr) !important; } .lead-grid { grid-template-columns: 280px 1fr !important; } .form-grid { grid-template-columns: 1fr 1fr; } /* Leads agrupadas - esconder valor */ .page-content a[style*="border-left:3px"] > div[style*="width:70px"] { display: none !important; } /* Modais centrados mas menores */ .modal-card { max-width: 540px; } } /* ═══ CALENDAR MOBILE FIX ═══ */ @media (max-width: 768px) { /* Renovacoes: calendario NÃO deve virar card layout */ table[style*="table-layout:fixed"] { display: table !important; } table[style*="table-layout:fixed"] thead { display: table-header-group !important; } table[style*="table-layout:fixed"] tbody { display: table-row-group !important; } table[style*="table-layout:fixed"] tr { display: table-row !important; padding: 0 !important; margin: 0 !important; border: none !important; background: none !important; } table[style*="table-layout:fixed"] td { display: table-cell !important; height: 52px !important; padding: 2px !important; font-size: 0.7rem !important; } table[style*="table-layout:fixed"] td::before { display: none !important; } table[style*="table-layout:fixed"] th { font-size: 0.6rem !important; padding: 4px 2px !important; } /* Evento dentro do calendario */ table[style*="table-layout:fixed"] td a { font-size: 0.55rem !important; padding: 1px 2px !important; } /* Container do calendario scroll horizontal se nao couber */ .dash-card:has(table[style*="table-layout:fixed"]) .dash-card-body { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* Renovacoes: grid lateral → empilhar */ .lead-grid[style*="1fr 320px"] { grid-template-columns: 1fr !important; } /* ═══ CHARTS MOBILE ═══ */ /* Barras de comissoes/producao - reduzir altura */ div[style*="height:160px"] { height: 120px !important; } div[style*="height:200px"] { height: 140px !important; } div[style*="height:140px"][style*="display:flex"][style*="gap:2px"] { height: 100px !important; } div[style*="height:180px"][style*="display:flex"][style*="gap:2px"] { height: 120px !important; } /* Barras individuais mais finas */ div[style*="width:12px"][style*="background:#"] { width: 8px !important; } div[style*="width:12px"][style*="background:var(--gold)"] { width: 8px !important; } div[style*="width:12px"][style*="background:#27AE60"] { width: 8px !important; } div[style*="width:12px"][style*="background:#D5D0C0"] { width: 8px !important; } /* Labels meses mais pequenos */ div[style*="flex:1"][style*="flex-direction:column"][style*="align-items:center"] > span[style*="font-size:0.65rem"] { font-size: 0.55rem !important; } /* ═══ PROGRESS BARS MOBILE ═══ */ div[style*="height:6px"][style*="background:var(--cream-mid)"] { height: 8px !important; } /* ═══ COMISSOES / PRODUCAO GRIDS ═══ */ .lead-grid[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } /* Comissoes/producao stats */ .stats-grid[style*="minmax(155px"] { grid-template-columns: 1fr 1fr !important; } .stats-grid[style*="minmax(160px"] { grid-template-columns: 1fr 1fr !important; } .stats-grid[style*="minmax(180px"] { grid-template-columns: 1fr 1fr !important; } .stats-grid[style*="minmax(140px"] { grid-template-columns: 1fr 1fr !important; } /* ═══ PRODUCAO OBJECTIVES 4-COL → 2-COL ═══ */ div[style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* ═══ CLIENTE-DETAIL MOBILE ═══ */ /* Conta corrente resumo cards */ .dash-card-body > div[style*="display:flex"][style*="gap:12px"][style*="flex-wrap"] { flex-direction: column !important; } /* Resumo anual horizontal scroll */ div[style*="display:flex"][style*="gap:6px"][style*="flex-wrap:wrap"] { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } div[style*="min-width:120px"][style*="background:var(--white)"] { min-width: 140px !important; flex-shrink: 0 !important; } /* Apolices table header com saldo */ .dash-card > div[style*="padding:0"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* ═══ CONVERSAS PAGE ═══ */ .cv-stats { grid-template-columns: 1fr 1fr !important; } .cv-toolbar { flex-direction: column !important; max-width: 100% !important; } /* ═══ DASHBOARD SPECIFIC ═══ */ /* Receitas/vencidos widget items */ .followup-list .followup-item { font-size: 0.8rem !important; } /* ═══ ADMIN-USERS / EQUIPA ═══ */ .table td[data-label="Email"] { word-break: break-all !important; } .table td[data-label="Telefone"] { font-variant-numeric: tabular-nums; } } /* ═══ SMALL MOBILE CHART FIX ═══ */ @media (max-width: 480px) { /* Calendario ainda mais compacto */ table[style*="table-layout:fixed"] td { height: 42px !important; } table[style*="table-layout:fixed"] td a { display: none !important; } table[style*="table-layout:fixed"] td > div:first-child { font-size: 0.68rem !important; } /* Mostrar indicador em vez de links */ table[style*="table-layout:fixed"] td:has(a)::after { content: ''; display: block; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; margin: 2px auto 0; } /* Charts mais compactos */ div[style*="height:160px"] { height: 90px !important; } div[style*="height:200px"] { height: 100px !important; } div[style*="height:140px"][style*="gap:2px"] { height: 70px !important; } div[style*="height:180px"][style*="gap:2px"] { height: 80px !important; } div[style*="width:12px"][style*="background:#"], div[style*="width:12px"][style*="background:var(--gold)"], div[style*="width:12px"][style*="background:#27AE60"], div[style*="width:12px"][style*="background:#D5D0C0"] { width: 6px !important; } /* Objectivos 2 → 1 col */ div[style*="repeat(2, 1fr)"], div[style*="repeat(2,1fr)"] { grid-template-columns: 1fr !important; } } /* ═══ EXTRA MOBILE FIXES - ALL PAGES ═══ */ @media (max-width: 768px) { /* ═══ DASHBOARD FOLLOWUP ITEMS ═══ */ /* Valor a direita pode overflow - permitir wrap */ .followup-item a[style*="display:flex"] { flex-wrap: wrap !important; gap: 4px !important; } .followup-item a[style*="display:flex"] > div[style*="flex-shrink:0"] { flex-shrink: 1 !important; text-align: left !important; width: 100% !important; border-top: 1px solid var(--border); padding-top: 4px; margin-top: 2px; } .followup-item a[style*="display:flex"] > div:first-child { width: 100% !important; } /* WhatsApp button no aniversário */ .followup-item .btn-whatsapp { width: 100% !important; margin-top: 6px; } /* ═══ DASHBOARD OBJECTIVES ═══ */ /* 3 valores em flex-between overflow */ div[style*="justify-content:space-between"][style*="font-size:0.72rem"] { flex-wrap: wrap !important; gap: 2px !important; } /* ═══ SINISTROS DATE INPUTS ═══ */ input[style*="max-width:140px"] { max-width: 100% !important; width: 100% !important; } /* ═══ SINISTRO-DETAIL TABS ═══ */ div[style*="display:flex"][style*="gap:4px"][style*="margin-bottom:20px"] { flex-wrap: wrap !important; } div[style*="display:flex"][style*="gap:4px"][style*="margin-bottom:20px"] .btn { flex: 1 !important; min-width: 0 !important; font-size: 0.72rem !important; padding: 6px 8px !important; text-align: center !important; justify-content: center !important; } /* ═══ CLIENTES TABLE - esconder colunas menos uteis ═══ */ .table td[data-label="NIF"], .table td[data-label="Tipo"], .table td[data-label="Desde"] { display: none !important; } /* ═══ COBRANCAS TABLE - esconder colunas ═══ */ .table td[data-label="Produto"], .table td[data-label="Pago"] { display: none !important; } /* ═══ SINISTROS TABLE - esconder colunas ═══ */ .table td[data-label="N. Processo"], .table td[data-label="Indemnizacao"] { display: none !important; } /* ═══ MODAL MAX-WIDTH OVERRIDE ═══ */ .modal-card[style*="max-width:700px"], .modal-card[style*="max-width:800px"] { max-width: 100% !important; } /* ═══ GRID-COLUMN SPAN ═══ */ .form-group[style*="grid-column:1/-1"] { grid-column: 1 !important; } /* ═══ CLIENTE-DETAIL SECTIONS ═══ */ /* Apolices/sinistros/docs section headers with flex */ .dash-card-header div[style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap !important; gap: 6px !important; } /* Expandable type sections */ div[style*="cursor:pointer"][style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap !important; } /* Financial product transactions table */ .dash-card > div[style*="padding:0"] > table { font-size: 0.78rem !important; } /* ═══ CLIENTES MODAL - TYPE STEP ═══ */ div[style*="display:flex"][style*="gap:16px"][style*="justify-content:center"] { flex-direction: column !important; gap: 10px !important; } div[style*="display:flex"][style*="gap:16px"][style*="justify-content:center"] > button { max-width: 100% !important; } /* ═══ ALL FLEX-BETWEEN CONTAINERS ═══ */ /* Prevenir overflow em qualquer flex-between */ div[style*="display:flex"][style*="justify-content:space-between"] { gap: 4px; } /* ═══ TOPBAR REFINEMENTS ═══ */ .topbar { position: sticky; top: 0; z-index: 50; } /* ═══ GENERAL OVERFLOW PREVENTION ═══ */ strong, span, a, div, td, p { overflow-wrap: break-word; word-wrap: break-word; } .page-content img { max-width: 100% !important; } /* ═══ TOUCH IMPROVEMENTS ═══ */ .followup-item { min-height: 44px; } .nav-item { min-height: 44px; } .clickable-row td { cursor: pointer; } /* Smooth scroll para containers scroll */ * { -webkit-overflow-scrolling: touch; } /* ═══ SIDEBAR REFINEMENTS ═══ */ .sidebar { width: 260px; } .sidebar-nav .nav-item { padding: 12px 16px; font-size: 0.88rem; } .sidebar-header { padding: 0 16px; } /* ═══ SINISTROS PAGE ═══ */ /* Progress bar steps - wrap em 2 linhas */ div[style*="display:flex"][style*="gap:4px"][style*="margin-bottom:20px"]:has(> div[style*="flex:1"][style*="text-align:center"]) { flex-wrap: wrap !important; } div[style*="display:flex"][style*="gap:4px"][style*="margin-bottom:20px"] > div[style*="flex:1"][style*="text-align:center"] { flex: 0 0 30% !important; min-width: 0 !important; } div[style*="flex:1"][style*="text-align:center"] > span[style*="font-size:0.68rem"] { font-size: 0.6rem !important; display: block; } /* Sinistro header - badges wrap */ .lead-header-info h2 { font-size: 1.1rem !important; line-height: 1.6; } .lead-header-info h2 .badge { display: inline-block; margin-top: 4px; vertical-align: baseline !important; } /* Analytics table - esconder colunas menos uteis */ .table td[data-label="Recusados"], .table td[data-label="Tempo Medio"], .table td[data-label="Taxa Aprovacao"] { display: none !important; } /* Sinistro-detail modal actions - eliminar + cancelar/guardar */ .modal-actions[style*="justify-content:space-between"] { flex-direction: column !important; gap: 10px !important; } .modal-actions[style*="justify-content:space-between"] > div { display: flex !important; gap: 8px !important; width: 100% !important; } .modal-actions[style*="justify-content:space-between"] > div .btn { flex: 1 !important; } .modal-actions[style*="justify-content:space-between"] > .btn { width: 100% !important; } /* Document checklist items */ div[style*="font-size:0.82rem"][style*="padding:3px"] { padding: 6px 0 !important; font-size: 0.8rem !important; } /* Page actions buttons wrap */ div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] { width: 100% !important; } div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > .btn, div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > a { flex: 1 !important; text-align: center !important; justify-content: center !important; } } @media (max-width: 480px) { /* Followup items mais compactos */ .followup-item { padding: 8px !important; font-size: 0.78rem !important; } /* Sinistro progress steps - 2 per row */ div[style*="display:flex"][style*="gap:4px"][style*="margin-bottom:20px"] > div[style*="flex:1"][style*="text-align:center"] { flex: 0 0 45% !important; } /* Sinistro-detail tabs empilhar completamente */ div[style*="display:flex"][style*="gap:4px"][style*="margin-bottom:20px"]:not(:has(> div[style*="text-align:center"])) { flex-direction: column !important; } div[style*="display:flex"][style*="gap:4px"][style*="margin-bottom:20px"]:not(:has(> div[style*="text-align:center"])) .btn { width: 100% !important; } } /* ═══════════════════════════════════════════ NOVO: Paginação ═══════════════════════════════════════════ */ .pagination{display:inline-flex;align-items:center;justify-content:center;gap:2px;margin:20px auto;flex-wrap:wrap;padding:3px;background:rgba(120,120,128,0.1);border-radius:var(--radius-md)} .pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:32px;padding:0 12px;border-radius:calc(var(--radius-md) - 3px);font-size:0.82rem;font-weight:600;text-decoration:none;border:none;color:var(--text-muted);background:transparent;transition:background var(--duration-fast) var(--ease-out-cubic),color var(--duration-fast) var(--ease-out-cubic);letter-spacing:-0.005em;font-variant-numeric:tabular-nums} .pagination a:hover{color:var(--navy);background:rgba(33,35,77,0.06)} .pagination .pg-active{background:linear-gradient(180deg,#DDB078 0%,var(--gold) 50%,#B8894F 100%);color:var(--navy);box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,0.3)} .pagination .pg-disabled{opacity:0.3;pointer-events:none} .pagination .pg-dots{background:none;color:var(--text-muted);min-width:24px;padding:0} .pagination-info{text-align:center;font-size:0.78rem;color:var(--text-muted);margin-top:8px} [data-theme="dark"] .pagination{background:rgba(255,255,255,0.08)} [data-theme="dark"] .pagination a:hover{background:rgba(255,255,255,0.08);color:var(--cream)} /* ═══════════════════════════════════════════ NOVO: Utility classes (substituem inline styles) ═══════════════════════════════════════════ */ .flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-between{justify-content:space-between}.flex-center{align-items:center}.flex-col{flex-direction:column} .gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px} .m-0{margin:0}.mb-0{margin-bottom:0}.mb-2{margin-bottom:2px}.mb-3{margin-bottom:3px}.mb-4{margin-bottom:4px}.mb-6{margin-bottom:6px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-14{margin-bottom:14px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px} .mt-2{margin-top:2px}.mt-3{margin-top:3px}.mt-4{margin-top:4px}.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}.mt-16{margin-top:16px}.mt-20{margin-top:20px} .ml-2{margin-left:2px}.ml-4{margin-left:4px}.ml-6{margin-left:6px}.ml-8{margin-left:8px} .mr-4{margin-right:4px}.mr-8{margin-right:8px}.mr-12{margin-right:12px} .p-0{padding:0}.p-4{padding:4px}.p-6{padding:6px}.p-8{padding:8px}.p-10{padding:10px}.p-12{padding:12px}.p-14{padding:14px}.p-16{padding:16px}.p-20{padding:20px} .px-8{padding-left:8px;padding-right:8px}.px-12{padding-left:12px;padding-right:12px} .py-2{padding-top:2px;padding-bottom:2px}.py-4{padding-top:4px;padding-bottom:4px}.py-6{padding-top:6px;padding-bottom:6px}.py-8{padding-top:8px;padding-bottom:8px}.py-12{padding-top:12px;padding-bottom:12px} .pt-3{padding-top:3px}.pb-3{padding-bottom:3px}.pl-12{padding-left:12px}.pr-12{padding-right:12px} .text-center{text-align:center}.text-right{text-align:right} .fw-600{font-weight:600}.fw-700{font-weight:700} .fs-xs{font-size:0.68rem}.fs-sm{font-size:0.72rem}.fs-md{font-size:0.78rem}.fs-base{font-size:0.84rem}.fs-lg{font-size:0.95rem}.fs-1{font-size:1rem} .color-green{color:var(--ios-green-text)}.color-red{color:var(--ios-red-text)}.color-orange{color:var(--ios-orange-text)}.color-navy{color:var(--navy)}.color-gold-dark{color:var(--gold-text)}.color-muted{color:var(--text-muted)}.color-white{color:#fff} .bg-green{background:var(--ios-green)}.bg-red{background:var(--ios-red)}.bg-gold{background:var(--gold)}.bg-navy{background:var(--navy)}.bg-white{background:var(--white)} .bg-green-light{background:var(--ios-green-bg)}.bg-red-light{background:var(--ios-red-bg)}.bg-orange-light{background:var(--ios-orange-bg)}.bg-cream{background:var(--cream-mid)} .rounded{border-radius:var(--radius)}.rounded-sm{border-radius:4px}.rounded-md{border-radius:6px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-pill{border-radius:10px} .border{border:1px solid var(--border)}.border-gold{border:1px dashed var(--gold)} .w-full{width:100%}.flex-1{flex:1}.flex-1-min{flex:1;min-width:0} .d-none{display:none}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex} .inline-block{display:inline-block} .relative{position:relative}.absolute{position:absolute}.position-relative{position:relative} .cursor-pointer{cursor:pointer} .text-uppercase{text-transform:uppercase} .whitespace-nowrap{white-space:nowrap} .word-break{word-break:break-all} .overflow-x-auto{overflow-x:auto} .grid-col-full{grid-column:1/-1} .btn-danger-outline{color:#c0392b;border-color:#c0392b} .btn-danger-bg{background:#E74C3C;color:#fff;border-color:#E74C3C} .tx-info-box{background:var(--cream-mid);border-radius:var(--radius);padding:12px;margin-bottom:16px;font-size:0.85rem} .section-heading{margin:14px 0 8px;color:var(--navy);font-size:0.95rem} .box-stat{flex:1;min-width:100px;background:var(--cream-mid);border-radius:var(--radius-md);padding:12px 16px;text-align:center} .tracking-wide{letter-spacing:0.04em}.tracking-wider{letter-spacing:0.05em} .line-through{text-decoration:line-through} .color-purple{color:var(--ios-purple-text)}.color-info{color:var(--ios-blue-text)}.color-orange-dark{color:var(--ios-orange-text)}.color-warning{color:var(--ios-orange-text)}.color-danger{color:var(--ios-red-text)}.color-444{color:#444}.color-666{color:#666}.color-888{color:#888} .bg-purple{background:var(--ios-purple)} .fs-xxs{font-size:0.6rem}.fs-07{font-size:0.7rem}.fs-075{font-size:0.75rem}.fs-09{font-size:0.9rem}.fs-088{font-size:0.88rem}.fs-11{font-size:1.1rem}.fs-13{font-size:1.3rem} .my-8{margin:8px 0} .fw-400{font-weight:400} .flex-shrink-0{flex-shrink:0} .border-bottom{border-bottom:1px solid var(--border)} .line-through{text-decoration:line-through} .pl-20{padding-left:20px} .mw-720{max-width:720px}.mw-700{max-width:700px}.mh-60vh{max-height:60vh} .fmw-140-200{min-width:140px;max-width:200px} .grid-auto-fit-110{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))} .grid-auto-fit-120{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))} .grid-auto-fit-140{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} .grid-auto-fit-150{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .grid-auto-fit-155{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))} .grid-auto-fit-160{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .grid-auto-fit-180{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .grid-auto-fit-110 .stat-card,.grid-auto-fit-120 .stat-card,.grid-auto-fit-150 .stat-card,.grid-auto-fit-155 .stat-card,.grid-auto-fit-160 .stat-card{padding:12px 14px;gap:10px} .grid-auto-fit-110 .stat-number,.grid-auto-fit-120 .stat-number,.grid-auto-fit-150 .stat-number,.grid-auto-fit-155 .stat-number,.grid-auto-fit-160 .stat-number{font-size:1.4rem} .grid-auto-fit-120 .stat-icon,.grid-auto-fit-150 .stat-icon,.grid-auto-fit-155 .stat-icon,.grid-auto-fit-160 .stat-icon{width:34px;height:34px} .rel-del-btn{padding:2px 8px;min-height:28px;color:#E74C3C;border-color:#E74C3C;font-size:0.7rem} .rel-del-btn-sm{padding:2px 6px;color:#E74C3C;border-color:#E74C3C;font-size:0.7rem} .rel-search-row{padding:8px 12px;cursor:pointer;font-size:0.84rem;border-bottom:1px solid var(--border)} .rel-search-row:hover{background:var(--cream-mid)} .rel-results{border:1px solid var(--border);border-radius:var(--radius);max-height:180px;overflow-y:auto;display:none;margin-top:4px} .row-card{border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:6px;background:var(--white);box-shadow:var(--shadow-1)} .alert-danger-soft{background:var(--ios-red-bg);border:1px solid rgba(255,59,48,0.25);border-radius:var(--radius-md);padding:12px 16px;margin-bottom:16px;font-size:0.82rem;color:var(--ios-red-text);box-shadow:var(--shadow-1)} .alert-warning-soft{background:var(--ios-orange-bg);border:1px solid rgba(255,149,0,0.25);color:var(--ios-orange-text);border-radius:var(--radius-md);box-shadow:var(--shadow-1)} .ocr-box{background:linear-gradient(135deg,#f8f6ef 0%,#fffef3 100%);border:1px dashed var(--gold);border-radius:8px;padding:12px 14px;margin-bottom:14px} .filter-pill{background:var(--cream-mid);border:1px solid transparent;border-radius:var(--radius-sm);padding:7px 12px;font-size:0.78rem;min-width:120px;transition:background var(--duration-fast) var(--ease-out-cubic),border-color var(--duration-fast) var(--ease-out-cubic)} .filter-pill:hover{background:var(--cream)} .filter-pill:focus{background:var(--white);border-color:var(--gold);outline:none} .badge-purple-soft{background:var(--ios-purple-bg);color:var(--ios-purple-text);border-color:rgba(175,82,222,0.25)} .hint-success-soft{display:none;margin-bottom:12px;padding:10px 14px;background:var(--ios-green-bg);border-radius:var(--radius-sm);font-size:0.82rem;color:var(--ios-green-text);font-weight:500} .hint-cream{display:none;margin-top:8px;padding:8px 12px;background:var(--cream-mid);border-radius:var(--radius);font-weight:600;font-size:0.88rem} .box-stat-success{flex:1;min-width:100px;background:var(--ios-green-bg);border-radius:var(--radius-md);padding:12px 16px;text-align:center} .section-label{font-size:0.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px} .section-gold-label{font-size:0.7rem;color:var(--gold-dark);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;font-weight:700} .renew-status-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:6px 10px;background:rgba(255,255,255,0.6);border-radius:4px} .ocrspin{animation:ocrspin 1s linear infinite} @keyframes ocrspin{to{transform:rotate(360deg)}} /* Status colors — iOS tinted pills (bg = systemColor 12-18% opacity, text = darker variant) */ .bg-policy-active, .bg-receipt-paid, .bg-claim-resolvido { background: var(--ios-green-bg) !important; color: var(--ios-green-text) !important; } .bg-policy-pending, .bg-receipt-partial, .bg-claim-em_analise, .bg-claim-peritagem { background: var(--ios-orange-bg) !important; color: var(--ios-orange-text) !important; } .bg-policy-cancelled, .bg-receipt-overdue, .bg-claim-recusado { background: var(--ios-red-bg) !important; color: var(--ios-red-text) !important; } .bg-policy-expired, .bg-policy-draft, .bg-receipt-cancelled, .bg-claim-desistido { background: var(--ios-gray-bg) !important; color: var(--ios-gray-text) !important; } .bg-policy-proposal, .bg-claim-documentacao { background: var(--ios-purple-bg) !important; color: var(--ios-purple-text) !important; } .bg-claim-aberto, .bg-receipt-pending { background: var(--ios-blue-bg) !important; color: var(--ios-blue-text) !important; } .bg-tier-A { background: var(--ios-green-bg) !important; color: var(--ios-green-text) !important; } .bg-tier-B { background: var(--ios-blue-bg) !important; color: var(--ios-blue-text) !important; } .bg-tier-C { background: var(--ios-orange-bg) !important; color: var(--ios-orange-text) !important; } .bg-tier-D { background: var(--ios-gray-bg) !important; color: var(--ios-gray-text) !important; } /* Client type stays solid (semantic Lusoseg) */ .client-type-empresa{background:var(--gold);color:var(--navy)} .client-type-particular{background:var(--navy);color:var(--cream)} .box-stat-overdue{flex:1;min-width:100px;background:var(--ios-red-bg);border-radius:var(--radius-md);padding:12px 16px;text-align:center} .box-stat-warning{flex:1;min-width:100px;background:var(--ios-orange-bg);border-radius:var(--radius-md);padding:12px 16px;text-align:center} .text-overdue{font-size:1rem;font-weight:700;color:var(--ios-red-text)} .text-pending-amount{font-size:1rem;font-weight:700;color:var(--ios-orange-text)} .urgent-renew{font-weight:700;color:var(--ios-red-text);font-size:0.82rem;flex-shrink:0} .upcoming-renew{font-weight:700;color:var(--ios-orange-text);font-size:0.82rem;flex-shrink:0} .row-overdue{color:var(--ios-red-text);font-weight:700} .amount-positive{font-weight:600;color:var(--ios-red-text)} .amount-zero{font-weight:600;color:var(--ios-green-text)} .tx-resgate{font-weight:600;color:var(--ios-red-text)} .tx-aplicacao{font-weight:600;color:var(--ios-green-text)} .diff-up{color:var(--ios-red-text)}.diff-down{color:var(--ios-green-text)}.diff-eq{color:var(--ios-gray-text)} .asset-status-pill{font-size:0.68rem;padding:2px 9px;border-radius:var(--radius-pill);font-weight:600;letter-spacing:-0.005em} .asset-status-ativo{background:var(--ios-green-bg);color:var(--ios-green-text)} .asset-status-vendido{background:var(--ios-gray-bg);color:var(--ios-gray-text)} .asset-status-transferido{background:var(--ios-orange-bg);color:var(--ios-orange-text)} .asset-status-outro{background:var(--ios-gray-bg);color:var(--ios-gray-text)} .evolution-cell{border-radius:var(--radius-sm);padding:8px 12px;text-align:center} .evolution-cell-active{background:var(--ios-green-bg);color:var(--ios-green-text);border:1px solid rgba(52,199,89,0.25)} .evolution-cell-inactive{background:var(--cream-mid);border:1px solid var(--border)} .badge-tier{font-size:0.7rem;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill);vertical-align:middle;margin-left:4px;letter-spacing:-0.005em} .history-type-criacao .timeline-dot{background:var(--ios-green)} .history-type-criacao .timeline-type{color:var(--ios-green-text);background:transparent} .history-type-transferencia .timeline-dot{background:var(--ios-purple)} .history-type-transferencia .timeline-type{color:var(--ios-purple-text)} .history-type-estado .timeline-dot{background:var(--ios-red)} .history-type-estado .timeline-type{color:var(--ios-red-text)} .history-type-edicao .timeline-dot{background:var(--gold)} .history-type-edicao .timeline-type{color:var(--gold-dark)} /* Mais utilities para Fase D */ .color-purple-dark{color:var(--ios-purple-text)}.color-blue-dark{color:var(--ios-blue-text)}.color-body{color:var(--text-body)}.color-inherit{color:inherit} .info-pill{background:var(--cream-mid);padding:6px 12px;border-radius:var(--radius-pill);font-size:0.82rem} .bar-track{height:6px;background:var(--cream-mid);border-radius:3px;overflow:hidden} .bar-track-flex{flex:1;height:6px;background:var(--cream-mid);border-radius:3px} .bar-fill{height:100%;border-radius:3px} .bar-fill-gold{background:var(--gold)}.bar-fill-navy{background:var(--navy)}.bar-fill-green{background:#27AE60} .w-30{width:30px} .min-w-100{min-width:100px}.min-w-120{min-width:120px}.min-w-140{min-width:140px}.min-w-200{min-width:200px} .max-w-140{max-width:140px}.max-w-200{max-width:200px} .alert-success-soft{background:#E8F5E9;color:#2E7D32;border:1px solid #C8E6C9} .grid-2col{grid-template-columns:1fr 1fr} .border-left-gold{border-left:3px solid var(--gold)}.border-left-green{border-left:3px solid #27AE60}.border-left-blue{border-left:3px solid #3498DB}.border-left-orange{border-left:3px solid #F39C12}.border-left-purple{border-left:3px solid #9B59B6}.border-left-red{border-left:3px solid #E74C3C}.border-left-navy{border-left:3px solid var(--navy)} .stat-box-bordered{text-align:center;flex:1;min-width:100px;background:var(--white);border-radius:8px;padding:12px;border:1px solid var(--border)} .fs-088{font-size:0.88rem} .my-20{margin:20px 0}.my-8{margin:8px 0} .section-label-base{margin:0 0 12px;font-size:0.82rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px} .px-10{padding-left:10px;padding-right:10px}.py-4{padding-top:4px;padding-bottom:4px} .bar-fill{height:100%;background:var(--gold);border-radius:3px} .bar-fill-rounded{border-radius:4px} .transition-width{transition:width 0.4s} .w-28{width:28px}.w-80{width:80px}.w-85{width:85px}.w-90{width:90px}.w-110{width:110px}.w-120{width:120px}.w-130{width:130px}.w-140{width:140px}.w-200{width:200px} .gap-10{gap:10px}.gap-24{gap:24px} .ml-16{margin-left:16px} .fs-085{font-size:0.85rem} .fs-3{font-size:3rem} .grid-4col{grid-template-columns:repeat(4,1fr)} .my-section{margin:16px 0 8px} .form-section-label{font-size:0.78rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px} .form-section-label-sm{font-size:0.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px} .details-summary{cursor:pointer;font-size:0.82rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;padding:8px 0} .btn-on-dark{color:var(--cream-mid);border-color:rgba(255,255,255,0.3)} .bg-red-tint{background:rgba(231,76,60,0.08)} .badge-mini-color{font-size:0.65rem;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);color:#fff;white-space:nowrap;display:inline-block;letter-spacing:-0.005em} .pw-toggle-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px} .type-card-btn{flex:1;max-width:200px;padding:24px 16px;border:2px solid var(--border);border-radius:var(--radius-lg);background:var(--white);cursor:pointer;transition:all 0.2s} .max-w-280{max-width:280px} .pt-16{padding-top:16px}.border-top{border-top:1px solid var(--border)} .color-meta{color:#7B7D9A}.color-meta-light{color:#B0B3C6} .fs-2{font-size:2rem}.fs-xxs{font-size:0.6rem} .logo-36{height:36px;width:auto;max-width:200px}.logo-50{height:50px;width:auto;max-width:280px} /* Search bar global - icone absoluto */ .search-icon-abs{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none} .global-search-input-wrap{position:relative} .global-search-input-wrap > svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none} .global-search-input-wrap > input{padding-left:38px} .otp-input{text-align:center;font-size:1.4rem;letter-spacing:8px;font-weight:700} .info-box-sm{background:var(--cream-mid);border-radius:var(--radius);padding:12px;margin-bottom:16px;font-size:0.78rem} .info-box-base{background:var(--cream-mid);border-radius:var(--radius);padding:12px;margin-bottom:16px;font-size:0.82rem} .alert-cream-gold{background:var(--cream-mid);border:1px solid var(--gold)} .alert-cream-gold-sm{background:var(--cream-mid);border:1px solid var(--gold);font-size:0.82rem} .color-gold{color:var(--gold)}.color-green-var{color:var(--green)}.color-red-var{color:var(--red)} .mw-300{max-width:300px} .bg-danger-dark{background:#C0392B}.bg-warning{background:#F39C12} .color-danger{color:#C0392B}.border-danger{border-color:#C0392B}.border-red{border-color:#E74C3C} .p-14{padding:14px}.bg-border{background:var(--border)} .my-16{margin:16px 0}.my-section-sm{margin:6px 0 12px} .notif-unread{background:rgba(202,158,103,0.06)} .session-current{background:rgba(39,174,96,0.04);border-color:rgba(39,174,96,0.2)} .text-decoration-none{text-decoration:none} .opacity-50{opacity:0.5} .channel-info-box{padding:10px 14px;border-radius:6px;font-size:0.85rem} /* cobrancas */ .aging-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:12px} .aging-card-total{display:flex;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px dashed var(--border);font-size:1.1rem;font-weight:700;color:#21234D} .aging-card-label{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px} .aging-card-amount{font-size:1.1rem;font-weight:800;color:var(--navy)} .grid-aging{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;padding:8px 0} .bulk-bar{display:none;padding:10px 16px;background:var(--navy);color:var(--cream-mid);border-radius:var(--radius);margin-bottom:8px;align-items:center;gap:10px;flex-wrap:wrap} .bar-track-thin{height:4px;background:var(--cream-mid);border-radius:2px;margin-top:6px;overflow:hidden} .mt-10{margin-top:10px}.pt-10{padding-top:10px} /* sinistros */ .row-warning{border-color:#FADBD8;background:rgba(231,76,60,0.03)} .dot-color{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px} .card-footer-meta{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);display:flex;gap:12px;flex-wrap:wrap;font-size:0.75rem;color:var(--text-muted)} .card-footer-line{padding:10px 16px;font-size:0.75rem;color:var(--text-muted);border-top:1px solid var(--border)} .py-16{padding-top:16px;padding-bottom:16px} .ml-10{margin-left:10px} /* 2fa-setup */ .qr-box{background:linear-gradient(180deg,var(--cream) 0%,var(--cream-mid) 100%);border-radius:var(--radius-md);padding:24px;text-align:center;margin-bottom:16px;box-shadow:var(--shadow-1),0 0 0 0.5px var(--border)} .qr-img{border-radius:var(--radius-sm);background:#fff;padding:8px;box-shadow:var(--shadow-2);border:1px solid var(--border)} .grid-2col-300{display:grid;grid-template-columns:1fr 1fr;max-width:300px} .mx-auto{margin-left:auto;margin-right:auto} .code-pill{font-size:1.05rem;font-weight:700;color:var(--navy);background:var(--white);padding:8px 14px;border-radius:var(--radius-sm);box-shadow:var(--shadow-1),0 0 0 0.5px var(--border);font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:0.04em;text-align:center} .letter-spaced{letter-spacing:0.18em} .hint-box{margin-top:10px;background:var(--cream-mid);padding:14px 16px;border-radius:var(--radius-sm);text-align:center;box-shadow:var(--shadow-1)} .mw-600{max-width:600px}.mw-420{max-width:420px}.mw-440{max-width:440px} /* iOS-style OTP input (visual segmented) */ .otp-input,.otp-input-2fa{text-align:center;font-size:1.6rem;font-weight:700;max-width:280px;margin:0 auto;display:block;letter-spacing:0.5em;padding:14px 14px 14px 28px;background:var(--cream-mid);border:1px solid transparent;border-radius:var(--radius-md);font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;color:var(--navy);transition:background var(--duration-fast) var(--ease-out-cubic),border-color var(--duration-fast) var(--ease-out-cubic),box-shadow var(--duration-fast) var(--ease-out-cubic)} .otp-input:focus,.otp-input-2fa:focus{background:var(--white);border-color:var(--gold);outline:none;box-shadow:0 0 0 4px rgba(202,158,103,0.18)} .otp-input::placeholder,.otp-input-2fa::placeholder{color:var(--text-muted);opacity:0.5;letter-spacing:0.5em} [data-theme="dark"] .otp-input,[data-theme="dark"] .otp-input-2fa{background:rgba(255,255,255,0.06);color:var(--cream);border-color:transparent} [data-theme="dark"] .otp-input:focus,[data-theme="dark"] .otp-input-2fa:focus{background:rgba(255,255,255,0.1);border-color:var(--gold);box-shadow:0 0 0 4px rgba(202,158,103,0.22)} .btn-no-border{border:none} .btn-mini-danger{font-size:0.7rem;padding:4px 10px;background:#E74C3C;color:#fff;border:none;border-radius:4px;cursor:pointer} /* lead-detail */ .recovery-past-box{background:rgba(202,158,103,0.12);border:1px solid var(--gold);border-radius:var(--radius);padding:10px 12px;margin-bottom:12px;font-size:0.82rem} .recovery-future-box{background:rgba(39,174,96,0.06);border:1px solid rgba(39,174,96,0.2);border-radius:var(--radius);padding:10px 12px;margin-bottom:12px;font-size:0.82rem} .lost-box{background:rgba(231,76,60,0.06);border:1px solid rgba(231,76,60,0.15);border-radius:var(--radius);padding:10px 12px;margin-bottom:12px;font-size:0.82rem} .cream-box{background:var(--cream-mid);padding:10px 12px;border-radius:var(--radius);border:1px solid var(--border)} .lead-score-pill{font-size:0.7rem;font-weight:700;padding:3px 10px;border-radius:12px;color:#fff;vertical-align:middle;margin-left:4px} .reply-margin{margin:4px 0 8px 24px} .resize-vertical{resize:vertical} .px-20{padding-left:20px;padding-right:20px} /* renovacoes */ .btn-ghost-mini{background:none;border:none;cursor:pointer;font-size:0.7rem;padding:0} .grid-1fr-320{grid-template-columns:1fr 320px} .grid-auto-fit-180{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .cal-cell-empty{padding:4px;min-height:90px;height:auto;vertical-align:top;background:var(--cream-mid);border:1px solid var(--border)} .cal-weekday{padding:8px 4px;font-size:0.72rem;font-weight:700;color:var(--text-muted);text-align:center;text-transform:uppercase} .cal-table{width:100%;border-collapse:collapse;table-layout:fixed} .cal-cell{padding:4px;min-height:90px;height:auto;vertical-align:top;border:1px solid var(--border)} .cal-cell-today{background:rgba(201,169,78,0.1)} .cal-cell-renewals{background:rgba(39,174,96,0.04)} .cal-cell-empty-day{background:var(--white)} .cal-pill-done{display:block;font-size:0.65rem;padding:2px 4px;margin-bottom:1px;background:#27AE60;color:#fff;border-radius:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none} .cal-pill-pending{display:block;font-size:0.65rem;padding:2px 4px;margin-bottom:1px;background:var(--gold);color:#fff;border-radius:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none} .cal-day-today{font-size:0.75rem;font-weight:700;color:var(--gold-dark);margin-bottom:2px} .cal-day-past{font-size:0.75rem;font-weight:600;color:var(--text-muted);margin-bottom:2px} .cal-day-future{font-size:0.75rem;font-weight:600;color:var(--navy);margin-bottom:2px} .px-16{padding-left:16px;padding-right:16px}.py-10{padding-top:10px;padding-bottom:10px} .link-navy-underline{color:var(--navy);text-decoration:underline} .mention-highlight{background:rgba(202,158,103,0.18);color:var(--navy);font-weight:600;padding:1px 4px;border-radius:3px} .color-orange-dark2{color:#E65100} .h-200{height:200px} .fs-14{font-size:1.4rem}.fs-16px{font-size:16px}.fs-092{font-size:0.92rem} .fs-075{font-size:0.75rem} .text-underline{text-decoration:underline}.text-uppercase{text-transform:uppercase} .float-right{float:right} .mr-12{margin-right:12px}.transition-transform{transition:transform 0.2s} .tipo-toggle-row{display:flex;align-items:center;padding:12px 20px;cursor:pointer;transition:background 0.2s} .tipo-toggle-row:hover{background:var(--cream-mid)} .tipo-detail-box{background:#FAFAF5;border-top:1px solid var(--border);padding:16px 20px} .bar-fill-tall{height:6px;border-radius:3px;margin-bottom:4px} .bar-track-medium{height:8px;background:var(--cream-mid);border-radius:4px;overflow:hidden} .bar-track-medium-danger{height:8px;background:#FADBD8;border-radius:4px;overflow:hidden} .sla-box-exceeded{background:var(--ios-red-bg);border:1px solid rgba(255,59,48,0.25);border-radius:var(--radius-md);padding:14px 18px;margin-bottom:16px;color:var(--ios-red-text);box-shadow:var(--shadow-1)} .sla-box-warning{background:var(--ios-orange-bg);border:1px solid rgba(255,149,0,0.25);border-radius:var(--radius-md);padding:14px 18px;margin-bottom:16px;color:var(--ios-orange-text);box-shadow:var(--shadow-1)} .sla-box-ok{background:var(--cream-mid);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 18px;margin-bottom:16px;box-shadow:var(--shadow-1)} .sla-label-danger{font-size:0.72rem;font-weight:700;color:var(--ios-red-text);text-transform:uppercase;letter-spacing:0.04em} .sla-label-warning{font-size:0.72rem;font-weight:700;color:var(--ios-orange-text);text-transform:uppercase;letter-spacing:0.04em} .sla-label-ok{font-size:0.72rem;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:0.04em} .alert-info-grey{background:var(--ios-gray-bg);border:1px solid rgba(142,142,147,0.25);border-radius:var(--radius-md);padding:12px 16px;margin-bottom:20px;font-size:0.85rem;color:var(--ios-gray-text);font-weight:500;box-shadow:var(--shadow-1)} .alert-danger-strong{background:var(--ios-red-bg);border:1px solid rgba(255,59,48,0.3);border-radius:var(--radius-md);padding:12px 16px;margin-bottom:20px;font-size:0.85rem;color:var(--ios-red-text);font-weight:600;box-shadow:var(--shadow-1)} .alert-danger-tint{background:var(--ios-red-bg);color:var(--ios-red-text);border:1px solid rgba(255,59,48,0.25)} .row-warning-soft{border-color:#FFECB3;background:rgba(255,248,225,0.5)} .row-followup-due{border-color:var(--gold);background:rgba(202,158,103,0.08)} .row-followup-future{border-color:var(--border);background:var(--white)} .row-followup-soft{border-color:var(--gold);background:rgba(202,158,103,0.04)} .alert-label-danger{font-size:0.72rem;font-weight:700;color:var(--ios-red-text);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:8px} .alert-label-warning{font-size:0.72rem;font-weight:700;color:var(--ios-orange-text);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:8px} .checklist-label{font-size:0.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px} .tier-circle{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:#fff;font-size:0.7rem;font-weight:700;letter-spacing:-0.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2)} .avatar-circle-xs{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dark) 100%);color:var(--navy);font-size:0.6rem;font-weight:700;letter-spacing:-0.01em;box-shadow:inset 0 0.5px 0 rgba(255,255,255,0.3)} .avatar-circle-sm{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dark) 100%);color:var(--navy);font-size:0.66rem;font-weight:700;letter-spacing:-0.01em;box-shadow:inset 0 0.5px 0 rgba(255,255,255,0.3)} .lead-row-card{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--white);border-radius:var(--radius-sm);box-shadow:var(--shadow-1);color:inherit;text-decoration:none;transition:box-shadow var(--duration-base) var(--ease-out-cubic),transform var(--duration-fast) var(--ease-out-cubic)} .lead-row-card:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)} .lead-row-card .w-130{display:flex;flex-direction:column;gap:4px;flex-shrink:0} .lead-row-card .badge-mini-color{align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis} .kanban-col-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:8px;border-bottom-width:2px;border-bottom-style:solid} .kanban-col-title{color:var(--navy);font-size:0.92rem;font-weight:700;letter-spacing:-0.018em} .lead-score-badge{font-size:0.62rem;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);color:#fff;flex-shrink:0;letter-spacing:-0.005em} .lead-score-badge-xs{font-size:0.58rem;font-weight:700;padding:2px 7px;border-radius:var(--radius-pill);color:#fff;letter-spacing:-0.005em} .badge-status-mini{font-size:0.66rem;font-weight:600;padding:2px 8px;border-radius:var(--radius-pill);letter-spacing:-0.005em} .badge-status-mini-2{font-size:0.68rem;font-weight:600;padding:2px 9px;border-radius:var(--radius-pill);letter-spacing:-0.005em} .badge-tc{font-size:0.62rem;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);color:#fff;letter-spacing:-0.005em} .absolute-corner-btn{position:absolute;top:6px;right:6px;background:none;border:none;cursor:pointer;font-size:0.7rem;color:var(--text-muted);opacity:0.5} .card-bordered-white{padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--white)} .card-bottom-note{font-size:0.82rem;color:var(--text-muted);margin-top:12px;border-top:1px solid var(--border);padding-top:8px} .card-divider{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)} .card-footer-meta-md{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-size:0.78rem;color:var(--text-muted)} .card-section-divider{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)} .circle-icon-navy{margin:0 auto 8px;width:48px;height:48px;background:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center} .circle-icon-gold{margin:0 auto 8px;width:48px;height:48px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center} .mw-400{max-width:400px} .dot-color-sm{width:10px;height:10px;border-radius:50%;display:inline-block} .segment-btn{padding:6px 14px;font-size:0.78rem;font-weight:600} .segment-btn-active{background:var(--navy);color:#fff} .segment-btn-active:hover{background:var(--navy);color:#fff} .segment-btn-inactive{background:var(--white);color:var(--text-muted)} /* Calendar mode buttons - usar com .segmented-control wrapper */ .cal-mode-btn{padding:6px 14px;font-size:0.82rem;font-weight:600;color:var(--text-muted);border-radius:calc(var(--radius-sm) - 2px);text-decoration:none;transition:background var(--duration-fast) var(--ease-out-cubic),color var(--duration-fast) var(--ease-out-cubic),box-shadow var(--duration-base) var(--ease-out-cubic);letter-spacing:-0.005em} .cal-mode-btn:hover{color:var(--navy)} .cal-mode-active{background:var(--white);color:var(--navy);box-shadow:var(--shadow-1),0 0 0 0.5px rgba(0,0,0,0.04)} .cal-mode-inactive{background:transparent;color:var(--text-muted)} [data-theme="dark"] .cal-mode-active{background:rgba(255,255,255,0.14);color:var(--cream)} .justify-center{justify-content:center} .items-start{align-items:flex-start} .quarter-card{background:var(--white);border-radius:var(--radius-sm);box-shadow:var(--shadow-1);padding:12px;position:relative} .quarter-card-current{background:rgba(202,158,103,0.06);border:1px solid var(--gold);border-radius:var(--radius-sm);padding:12px;position:relative;box-shadow:var(--shadow-1),0 0 0 1px rgba(202,158,103,0.2)} .stat-box-blue{background:var(--ios-blue-bg);border-radius:var(--radius-md);padding:14px 18px;text-align:center;color:var(--ios-blue-text)} .stat-box-green{background:#E8F5E9;border-radius:8px;padding:12px 16px;text-align:center} .stat-box-orange{background:#FFF3E0;border-radius:8px;padding:12px 16px;text-align:center} .stat-box-cream{background:var(--cream-mid);border-radius:8px;padding:12px 16px;text-align:center} .filter-pill-bordered{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:8px 14px;font-size:0.8rem;min-width:140px} .step-done{font-size:0.68rem;color:var(--navy);font-weight:600} .step-todo{font-size:0.68rem;color:var(--text-muted);font-weight:400} .vertical-middle{vertical-align:middle} .gap-5{gap:5px} .w-40{width:40px}.w-100{width:100px} .text-center{text-align:center} .py-20{padding:20px 0}.py-3{padding-top:3px;padding-bottom:3px}.py-6{padding-top:6px;padding-bottom:6px} .bar-fill-green{background:#27AE60} .color-orange-dark{color:#d35400} .color-orange{color:#F39C12}.color-blue{color:#3498DB}.color-gray{color:#95A5A6} .row-overdue{color:#E74C3C;font-weight:700} .mb-conditional{margin-bottom:16px} .mb-conditional.mb-0{margin-bottom:0} .gap-16{gap:16px}.gap-12{gap:12px} .color-666{color:#666}.color-888{color:#888} .flex-shrink-0{flex-shrink:0} .text-decoration-none{text-decoration:none} .nowrap{white-space:nowrap} .truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ═══════════════════════════════════════════ NOVO: Dark mode Ativado via [data-theme="dark"] no ═══════════════════════════════════════════ */ [data-theme="dark"]{ --navy:#D0D2E8;--navy-light:#A8B4E8; --gold:#D4AC75;--gold-dark:#E0C08A;--gold-text:#E0C08A; --cream:#1A1B2E;--cream-mid:#222338; --white:#1E1F33; /* --dark-card: faltava definir. Sem ela, 'background: var(--dark-card)' (cabecalho sticky de tabelas, .ck-row-head) era invalido e caia para transparent -> cabecalho transparente no dark mode a deixar ver as linhas ao scroll. Opaco, alinhado com o cabecalho escuro do dashboard. */ --dark-card:#282A4B; --text-dark:#E8E9F4;--text-body:#BFC2D4;--text-muted:#9092A8; --border:rgba(255,255,255,0.10); --shadow:0 2px 8px rgba(0,0,0,0.3);--shadow-md:0 4px 20px rgba(0,0,0,0.4); color-scheme:dark; } /* Sidebar stays dark in both modes */ [data-theme="dark"] .sidebar{background:#15162A} [data-theme="dark"] body{background:var(--cream)} /* Topbar */ [data-theme="dark"] .topbar-title{color:var(--text-dark)} /* Cards & tables */ [data-theme="dark"] .dash-card,[data-theme="dark"] .info-card,[data-theme="dark"] .stat-card,[data-theme="dark"] .note-form{background:var(--white);border-color:var(--border)} [data-theme="dark"] .table td{border-color:var(--border)} [data-theme="dark"] .table th{border-color:var(--border);color:var(--text-muted)} [data-theme="dark"] .table-hover tbody tr:hover{background:rgba(202,158,103,0.06)} /* Forms */ [data-theme="dark"] .form-group input,[data-theme="dark"] .form-group select,[data-theme="dark"] .form-group textarea{background:#2A2B42;border-color:rgba(255,255,255,0.12);color:var(--text-dark)} [data-theme="dark"] .filter-input,[data-theme="dark"] .filter-select{background:#2A2B42;border-color:rgba(255,255,255,0.12);color:var(--text-dark)} /* Buttons */ [data-theme="dark"] .btn-outline{border-color:rgba(255,255,255,0.15);color:var(--text-body)} [data-theme="dark"] .btn-outline:hover{border-color:var(--gold);color:var(--gold)} /* Modals */ [data-theme="dark"] .modal-card{background:#252640;border:1px solid var(--border)} [data-theme="dark"] .modal-overlay{background:rgba(0,0,0,0.7)} /* Code & badges */ [data-theme="dark"] code{background:#2A2B42;color:var(--text-dark)} /* Timeline */ [data-theme="dark"] .timeline-content{background:var(--white);border-color:var(--border)} [data-theme="dark"] .timeline-dot{border-color:var(--white)} /* Login */ [data-theme="dark"] .login-page { background: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(202,158,103,0.14) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(94,92,230,0.22) 0%, transparent 60%), linear-gradient(135deg, #0A0B1A 0%, #15173A 50%, #1A1C3F 100%); } [data-theme="dark"] .login-card { background: rgba(33, 35, 77, 0.72); border-color: rgba(255,255,255,0.08); } /* Alerts */ [data-theme="dark"] .alert-error{background:#3D1F1F;color:#F5A0A0;border-color:#5C2828} [data-theme="dark"] .alert-warning{background:#3D3520;color:#F5D08A;border-color:#5C4E28} [data-theme="dark"] .alert-success{background:#1F3D20;color:#A0F5A8;border-color:#285C2A} /* Global search */ [data-theme="dark"] .global-search-input-wrap input{background:#2A2B42;border-color:rgba(255,255,255,0.12);color:var(--text-dark)} [data-theme="dark"] .global-search-input-wrap input:focus{background:#2A2B42;border-color:var(--gold)} [data-theme="dark"] .global-search-results{background:#252640;border-color:var(--border)} [data-theme="dark"] .gsr-group{background:#1A1B2E;color:var(--text-muted)} [data-theme="dark"] .gsr-item:hover,[data-theme="dark"] .gsr-item.active{background:rgba(202,158,103,0.08)} [data-theme="dark"] .gsr-title{color:var(--text-dark)} /* Pagination */ [data-theme="dark"] .pagination a,[data-theme="dark"] .pagination span{background:var(--white);border-color:var(--border);color:var(--text-body)} [data-theme="dark"] .pagination a:hover{border-color:var(--gold);color:var(--gold)} [data-theme="dark"] .pagination .pg-active{background:var(--gold);color:#1A1B2E} /* Followup items */ [data-theme="dark"] .followup-item{border-color:var(--border);background:var(--white)} [data-theme="dark"] .followup-item:hover{background:rgba(202,158,103,0.06)} /* Page tabs */ [data-theme="dark"] .page-tabs{border-color:var(--border)} [data-theme="dark"] .page-tab.active{color:var(--text-dark)} /* Scrollbar dark */ [data-theme="dark"] ::-webkit-scrollbar{width:8px} [data-theme="dark"] ::-webkit-scrollbar-track{background:#1A1B2E} [data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3A3B52;border-radius:4px} [data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#4A4B62} /* ═══════════════════════════════════════════ Dark mode: Override GLOBAL para inline styles Abordagem: selectores largos com !important para garantir que vencem QUALQUER inline style ═══════════════════════════════════════════ */ /* === FOLLOWUP ITEMS === */ /* Forçar TODOS os followup items a ficarem escuros, independente do inline style */ [data-theme="dark"] .followup-item { background: var(--white) !important; border-color: var(--border) !important; color: var(--text-body) !important; } [data-theme="dark"] .followup-item:hover { background: rgba(202,158,103,0.08) !important; } [data-theme="dark"] .followup-item strong { color: var(--text-dark) !important; } [data-theme="dark"] .followup-item a:not(.btn) { color: inherit !important; } /* === STAT CARDS === */ [data-theme="dark"] .stat-card { background: var(--white) !important; border-color: var(--border) !important; } [data-theme="dark"] .stat-number { color: var(--text-dark) !important; } /* Preservar stat-numbers com cor explícita (verde, vermelho, etc) */ [data-theme="dark"] .stat-number[style*="color:#27AE60"] { color: #4ADE80 !important; } [data-theme="dark"] .stat-number[style*="color:#E74C3C"] { color: #F87171 !important; } /* === STAT ICON BACKGROUNDS (light mode colors too pale for dark) === */ [data-theme="dark"] .stat-icon { background: rgba(255,255,255,0.06) !important; } /* === TODOS OS ALERTAS INLINE === */ /* Background claro -> escuro com cor mantida */ [data-theme="dark"] .alert { border-width: 1px !important; border-style: solid !important; } [data-theme="dark"] .alert-error { background: rgba(231,76,60,0.12) !important; color: #F5A0A0 !important; border-color: rgba(231,76,60,0.25) !important; } [data-theme="dark"] .alert-warning { background: rgba(243,156,18,0.1) !important; color: #FBBF24 !important; border-color: rgba(243,156,18,0.2) !important; } [data-theme="dark"] .alert-success { background: rgba(39,174,96,0.1) !important; color: #6EE7B7 !important; border-color: rgba(39,174,96,0.2) !important; } [data-theme="dark"] .alert a { color: inherit !important; } /* === DASH CARDS (already handled but reinforce) === */ [data-theme="dark"] .dash-card { background: var(--white) !important; border-color: var(--border) !important; } [data-theme="dark"] .dash-card-header { border-color: var(--border) !important; } [data-theme="dark"] .dash-card-header h3 { color: var(--text-dark) !important; } [data-theme="dark"] .dash-card-link { color: var(--gold) !important; } /* === INLINE COLOR:VAR(--NAVY) -> legível em escuro === */ /* This is critical: many elements use inline color:var(--navy) which is redefined in dark mode, but some use hardcoded #21234D */ [data-theme="dark"] strong[style*="color:var(--navy)"], [data-theme="dark"] span[style*="color:var(--navy)"], [data-theme="dark"] div[style*="color:var(--navy)"], [data-theme="dark"] p[style*="color:var(--navy)"], [data-theme="dark"] h3[style*="color:var(--navy)"] { color: var(--text-dark) !important; } [data-theme="dark"] [style*="color:#21234D"] { color: #C5C7E0 !important; } /* === PROGRESS BARS / SLA BARS === */ [data-theme="dark"] div[style*="background:var(--cream-mid)"][style*="height:"] { background: rgba(255,255,255,0.08) !important; } [data-theme="dark"] div[style*="background:#E0DDD0"], [data-theme="dark"] div[style*="background:#E8E5D8"], [data-theme="dark"] div[style*="background:#FADBD8"], [data-theme="dark"] div[style*="background:#D5D0C0"] { background: rgba(255,255,255,0.08) !important; } /* === BOXES/CARDS COM BACKGROUNDS CLAROS INLINE === */ /* Catch-all: qualquer div com background inline claro dentro de dark mode */ [data-theme="dark"] .dash-card-body div[style*="background:var(--cream-mid)"], [data-theme="dark"] .dash-card-body div[style*="background:#E8F5E9"], [data-theme="dark"] .dash-card-body div[style*="background:#FDEDEC"], [data-theme="dark"] .dash-card-body div[style*="background:#FFF8E1"], [data-theme="dark"] .dash-card-body div[style*="background:#FFF3E0"], [data-theme="dark"] .dash-card-body div[style*="background:#E3F2FD"], [data-theme="dark"] .dash-card-body div[style*="background:#EDE7F6"], [data-theme="dark"] .dash-card-body div[style*="background:#F5F5F0"], [data-theme="dark"] .dash-card-body div[style*="background:#FAFAF5"], [data-theme="dark"] .dash-card-body div[style*="background:rgba(255,248,225"], [data-theme="dark"] .dash-card-body div[style*="background:rgba(202,158,103"], [data-theme="dark"] .dash-card-body div[style*="background:rgba(255,255,255,0.6)"] { background: rgba(255,255,255,0.05) !important; } /* KPI mini-boxes (forecast, conta corrente, etc) */ [data-theme="dark"] .stats-grid div[style*="background:"] { background: rgba(255,255,255,0.06) !important; } /* Preservar stat-card backgrounds (already handled above) */ [data-theme="dark"] .stats-grid .stat-card { background: var(--white) !important; } /* === TABLE ROWS & CONTAINERS === */ [data-theme="dark"] .table tr { border-color: var(--border) !important; } [data-theme="dark"] .table td strong { color: var(--text-dark); } /* === BADGES EM DARK MODE === */ /* Cinzento claro (#BDC3C7) quase invisível -> tornar mais escuro */ [data-theme="dark"] .badge[style*="background:#BDC3C7"] { background: #4A4B62 !important; } [data-theme="dark"] .badge[style*="background:#95A5A6"] { background: #555770 !important; } /* === LEAD KANBAN CARDS === */ [data-theme="dark"] a[style*="border-left:3px"] { background: var(--white) !important; } [data-theme="dark"] a[style*="border-left:3px"]:hover { background: rgba(202,158,103,0.06) !important; } /* === INFO CARDS (sidebar detail pages) === */ [data-theme="dark"] .info-card { background: var(--white) !important; border-color: var(--border) !important; } [data-theme="dark"] .info-card h4 { color: var(--text-dark) !important; border-color: var(--border) !important; } /* === MODALS === */ [data-theme="dark"] .modal-card { background: #252640 !important; border: 1px solid var(--border) !important; } [data-theme="dark"] .modal-header h3 { color: var(--text-dark) !important; } [data-theme="dark"] .modal-actions { border-color: var(--border) !important; } /* === NOTE FORM === */ [data-theme="dark"] .note-form { background: var(--white) !important; border-color: var(--border) !important; } [data-theme="dark"] .note-form textarea { background: #2A2B42 !important; border-color: rgba(255,255,255,0.12) !important; color: var(--text-dark) !important; } /* === TIMELINE === */ [data-theme="dark"] .timeline::before { background: var(--border) !important; } [data-theme="dark"] .timeline-content { background: var(--white) !important; border-color: var(--border) !important; } /* === TEMPLATES PAGE === */ [data-theme="dark"] .tpl-card { background: var(--white) !important; border-color: var(--border) !important; } [data-theme="dark"] .tpl-textarea { background: #2A2B42 !important; border-color: rgba(255,255,255,0.1) !important; color: var(--text-dark) !important; } [data-theme="dark"] .tpl-subject { background: rgba(255,255,255,0.04) !important; border-color: var(--border) !important; } [data-theme="dark"] .tpl-categories { background: var(--white) !important; border-color: var(--border) !important; } [data-theme="dark"] .tpl-cat-btn:hover { background: rgba(202,158,103,0.1) !important; } [data-theme="dark"] .tpl-lead-info { background: rgba(202,158,103,0.08) !important; border-color: var(--gold) !important; } [data-theme="dark"] .tpl-channel { opacity: 0.85; } /* === CODE TAGS === */ [data-theme="dark"] code { background: rgba(255,255,255,0.08) !important; color: var(--text-dark) !important; } /* === BUTTONS OVERRIDES === */ [data-theme="dark"] .btn[style*="background:#E74C3C"] { background: #C0392B !important; } [data-theme="dark"] .btn[style*="background:#FDECEA"], [data-theme="dark"] a.btn[style*="background:#FDECEA"] { background: rgba(231,76,60,0.2) !important; border-color: rgba(231,76,60,0.3) !important; } /* === CLIENT DETAIL - CONTA CORRENTE BOXES === */ [data-theme="dark"] div[style*="background:var(--cream-mid)"][style*="padding:10px 14px"], [data-theme="dark"] div[style*="background:#E8F5E9"][style*="padding:10px 14px"], [data-theme="dark"] div[style*="background:#FDEDEC"][style*="padding:10px 14px"], [data-theme="dark"] div[style*="background:#FFF8E1"][style*="padding:10px 14px"] { background: rgba(255,255,255,0.06) !important; } /* === OVERDUE RECEIPTS INLINE ALERT === */ [data-theme="dark"] div[style*="background:#FDEDEC"][style*="border:1px solid #F5C6CB"] { background: rgba(231,76,60,0.1) !important; border-color: rgba(231,76,60,0.25) !important; color: #F5A0A0 !important; } /* === SLA TRACKING BAR (sinistro-detail) === */ [data-theme="dark"] div[style*="border:1px solid"][style*="padding:14px 18px"] { background: rgba(255,255,255,0.04) !important; border-color: var(--border) !important; } /* === GLOBAL: Qualquer strong/span com cor navy hardcoded === */ [data-theme="dark"] strong[style*="#21234D"], [data-theme="dark"] span[style*="#21234D"], [data-theme="dark"] div[style*="color:#21234D"] { color: #C5C7E0 !important; } /* === RENOVAÇÃO ALERT (cliente-detail) === */ [data-theme="dark"] .alert[style*="background:#FFF3E0"] { background: rgba(230,81,0,0.12) !important; border-color: rgba(230,81,0,0.25) !important; color: #FFB74D !important; } /* === OBJECTIVE CARDS (producao) === */ [data-theme="dark"] div[style*="border:1px solid"][style*="border-radius:8px"][style*="padding:10px"][style*="position:relative"] { background: var(--white) !important; border-color: var(--border) !important; } [data-theme="dark"] div[style*="background:rgba(202,158,103,0.06)"] { background: rgba(202,158,103,0.12) !important; } /* === LOGIN PAGE === */ [data-theme="dark"] .login-page { background: #0D0E1A !important; } [data-theme="dark"] .login-card { background: #1E1F33 !important; border: 1px solid rgba(255,255,255,0.08); } [data-theme="dark"] .login-card .form-group input { background: #2A2B42 !important; border-color: rgba(255,255,255,0.15) !important; color: var(--text-dark) !important; } [data-theme="dark"] .login-logo p { color: var(--text-muted) !important; } /* === SCROLLBAR === */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1A1B2E; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3A3B52; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4A4B62; } /* === EMPTY STATE TEXT === */ [data-theme="dark"] .empty-state { color: var(--text-muted) !important; } /* === BACK LINK === */ [data-theme="dark"] .back-link { color: var(--text-muted) !important; } [data-theme="dark"] .back-link:hover { color: var(--gold) !important; } /* === GENERIC HOVER === */ [data-theme="dark"] a:hover { color: var(--gold) !important; } /* ═══════════════════════════════════════════ Toast notifications ═══════════════════════════════════════════ */ .toast-container{position:fixed;bottom:20px;right:20px;z-index:10000;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none} .toast{pointer-events:auto;padding:12px 20px;border-radius:var(--radius);font-size:0.84rem;font-weight:600;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,0.15);animation:toastIn 0.3s ease,toastOut 0.3s ease 2.7s forwards;max-width:340px} .toast-success{background:#27AE60} .toast-error{background:#E74C3C} .toast-info{background:var(--navy)} @keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} @keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateY(-8px)}} /* ═══════════════════════════════════════════ MOBILE APP FOUNDATION (Fase 1) Bottom nav, FAB, bottom sheets, auto-hide topbar, safe-area ═══════════════════════════════════════════ */ :root { --bottom-nav-h: 60px; --fab-size: 56px; } .topbar { transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); will-change: transform; } .topbar.topbar-hidden { transform: translateY(-100%); } .bottom-nav { display: none; } .bottom-nav-item { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } .fab { display: none; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: var(--fab-size); height: var(--fab-size); border-radius: 50%; background: linear-gradient(180deg, #DDB078 0%, var(--gold) 50%, #B8894F 100%); color: var(--navy); align-items: center; justify-content: center; box-shadow: var(--shadow-4), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.06); border: none; cursor: pointer; z-index: 85; transition: transform var(--duration-fast) var(--ease-out-cubic), box-shadow var(--duration-base) var(--ease-out-cubic), background var(--duration-fast) var(--ease-out-cubic); text-decoration: none; font-family: inherit; } .fab:hover { background: linear-gradient(180deg, #CA9E67 0%, var(--gold-dark) 50%, #AA7E45 100%); box-shadow: var(--shadow-5), inset 0 1px 0 rgba(255,255,255,0.3); } .fab:active { transform: scale(0.94); } .fab svg { width: 24px; height: 24px; } .fab-extended { width: auto; padding: 0 20px 0 14px; border-radius: calc(var(--fab-size) / 2); gap: 8px; font-size: 0.88rem; font-weight: 700; } @media (min-width: 769px) { .fab.fab-desktop { display: flex; } } @media (max-width: 768px) { /* Bottom nav (iOS tab bar) */ .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--material-thick); backdrop-filter: var(--material-blur); -webkit-backdrop-filter: var(--material-blur); border-top: 0.5px solid var(--border); z-index: 90; padding-bottom: env(safe-area-inset-bottom, 0px); } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--bottom-nav-h); color: var(--text-muted); font-size: 0.64rem; font-weight: 500; letter-spacing: -0.005em; position: relative; cursor: pointer; background: none; border: none; font-family: inherit; transition: color var(--duration-fast) var(--ease-out-cubic); } .bottom-nav-item svg { width: 22px; height: 22px; transition: transform var(--duration-fast) var(--ease-out-cubic); } .bottom-nav-item:active svg { transform: scale(0.88); } .bottom-nav-item.active { color: var(--gold-dark); font-weight: 700; } .bottom-nav-item.active svg { stroke-width: 2.4; filter: drop-shadow(0 1px 2px rgba(202,158,103,0.3)); } .bottom-nav-badge { position: absolute; top: 6px; right: 18%; min-width: 16px; height: 16px; padding: 0 5px; background: var(--ios-red); color: #fff; font-size: 0.6rem; font-weight: 700; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1.5px var(--material-thick); } /* Push content above bottom nav */ .main-content { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); } /* FAB above bottom nav */ .fab { display: flex; bottom: calc(var(--bottom-nav-h) + 12px + env(safe-area-inset-bottom, 0px)); } /* Topbar hamburger hidden (bottom nav replaces it) */ .menu-btn { display: none !important; } /* Topbar respects safe-area top (notch) */ .topbar { padding-top: env(safe-area-inset-top, 0px) !important; height: calc(52px + env(safe-area-inset-top, 0px)) !important; } /* Modals → bottom sheets (iOS native feel) */ .modal-overlay { align-items: flex-end !important; padding: 0 !important; } .modal-overlay.active .modal-card { animation: ls-sheet-up 0.4s var(--ease-spring); } .modal-card { border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important; width: 100% !important; max-width: 100% !important; max-height: 92vh !important; padding: 36px 20px calc(20px + env(safe-area-inset-bottom, 0px)) !important; position: relative; touch-action: pan-y; } .modal-card::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; background: rgba(33,35,77,0.2); border-radius: var(--radius-pill); transition: background var(--duration-fast) var(--ease-out-cubic); } .modal-card:active::before { background: rgba(33,35,77,0.35); } @keyframes ls-sheet-up { 0% { transform: translateY(100%); opacity: 0.6; } 100% { transform: translateY(0); opacity: 1; } } /* Offline bar above bottom nav */ #offlineBar { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important; } /* Touch targets — min 44px for primary interactive elements */ .btn { min-height: 44px; } .btn-sm { min-height: 36px; } .topbar-btn, .theme-toggle { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* Prevent iOS tap-to-zoom on inputs (font-size >=16px) */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 0.92rem); } /* Toast sits above bottom nav */ .toast-container { bottom: calc(var(--bottom-nav-h) + 12px + env(safe-area-inset-bottom, 0px)) !important; } } /* Dark mode support for new components */ [data-theme="dark"] .bottom-nav { background: var(--white); } [data-theme="dark"] .fab { background: var(--gold); color: var(--navy); } /* ═══════════════════════════════════════════════════════════════ */ /* MOBILE APP POLISH (Fase 2) */ /* ═══════════════════════════════════════════════════════════════ */ /* Press feedback — visceral tap response on touch devices */ @media (hover: none) and (pointer: coarse) { .btn:active, .bottom-nav-item:active, .fab:active, .stat-card:active, .dash-card:active, .kanban-card:active, .kanban-card-link:active, .nav-item:active, .topbar-btn:active, .theme-toggle:active, .global-search-trigger:active, .client-row:active { transform: scale(0.97); transition: transform 0.08s ease-out; } .fab:active { transform: scale(0.93); } } /* Skeleton loader — utility for placeholder content while loading (Apple-style shimmer) */ .skeleton { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%), rgba(33,35,77,0.07); background-size: 200% 100%, 100% 100%; background-repeat: no-repeat; animation: ls-skeleton 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; border-radius: var(--radius-sm); color: transparent !important; pointer-events: none; user-select: none; } .skeleton-line { height: 12px; margin: 6px 0; border-radius: var(--radius-pill); } .skeleton-line-lg { height: 18px; } .skeleton-circle { border-radius: 50%; } @keyframes ls-skeleton { 0% { background-position: -200% 0, 0 0; } 100% { background-position: 200% 0, 0 0; } } [data-theme="dark"] .skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 100%); background-size: 200% 100%; } /* Kanban mobile — iOS segmented control style */ .kanban-tabs { display: none; gap: 2px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; padding: 3px; background: rgba(120,120,128,0.12); border-radius: var(--radius-md); } .kanban-tabs::-webkit-scrollbar { display: none; } .kanban-tab { flex: 1; min-width: 80px; padding: 8px 10px; background: transparent; border: none; border-radius: calc(var(--radius-md) - 3px); font-size: 0.74rem; font-weight: 600; color: var(--text-muted); cursor: pointer; text-align: center; transition: background var(--duration-fast) var(--ease-out-cubic), color var(--duration-fast) var(--ease-out-cubic), box-shadow var(--duration-base) var(--ease-out-cubic); font-family: inherit; letter-spacing: -0.005em; } .kanban-tab:hover { color: var(--navy); } .kanban-tab.active { background: var(--white); color: var(--navy); box-shadow: var(--shadow-1), 0 0 0 0.5px rgba(0,0,0,0.04); } .kanban-tab-count { display: inline-block; margin-left: 4px; padding: 1px 7px; background: rgba(0,0,0,0.08); border-radius: var(--radius-pill); font-size: 0.62rem; font-weight: 700; } .kanban-tab.active .kanban-tab-count { background: var(--gold); color: var(--navy); } [data-theme="dark"] .kanban-tabs { background: rgba(255,255,255,0.08); } [data-theme="dark"] .kanban-tab.active { background: rgba(255,255,255,0.14); color: var(--cream); } /* Hide "page-actions" primary button on mobile when FAB is present (applied via .has-fab class on body or page-actions) */ @media (max-width: 768px) { .kanban-tabs { display: flex; } .page-actions.has-fab .btn-gold-primary-mobile-hide, body.has-mobile-fab .page-actions > div:first-child > .btn-gold:first-child { display: none; } /* Page actions in a more compact single-row layout on mobile */ .page-actions { gap: 8px; } /* Hide primary action button on mobile when a FAB replaces it */ a.primary-mobile-hide, button.primary-mobile-hide, .btn.primary-mobile-hide, .page-actions .primary-mobile-hide, .primary-mobile-hide { display: none !important; visibility: hidden !important; } /* Filter bar: scrollable horizontally instead of wrapping into 3 rows */ .filter-bar { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin: 0 -12px; padding-left: 12px; padding-right: 12px; -webkit-overflow-scrolling: touch; } .filter-bar::-webkit-scrollbar { display: none; } .filter-bar > * { flex-shrink: 0; } /* Stats grid — 2-col grid, tudo visivel (sem carrossel confuso) */ .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 14px !important; } .stats-grid > .stat-card { min-width: 0; padding: 12px 10px !important; } .stats-grid > .stat-card .stat-number { font-size: 1.15rem !important; white-space: nowrap; } .stats-grid > .stat-card .stat-label { font-size: 0.72rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Dash card titles smaller on mobile for more density */ .dash-card-header h3 { font-size: 0.92rem; } /* Tables with horizontal scroll indicator */ .dash-card-body .table-responsive, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; } } @keyframes ls-spin { to { transform: rotate(360deg); } } /* Smooth momentum scrolling on all scrollable containers */ .kanban-board, .main-content { -webkit-overflow-scrolling: touch; } /* ═══════════════════════════════════════════════════════════════ */ /* SUPER APP POLISH (Fase 3) — Native-app feel */ /* ═══════════════════════════════════════════════════════════════ */ /* ─── Page entrance animation ─────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { .page-content > * { animation: ls-fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .page-content > *:nth-child(1) { animation-delay: 0s; } .page-content > *:nth-child(2) { animation-delay: 0.04s; } .page-content > *:nth-child(3) { animation-delay: 0.08s; } .page-content > *:nth-child(4) { animation-delay: 0.12s; } .page-content > *:nth-child(5) { animation-delay: 0.16s; } .page-content > *:nth-child(n+6) { animation-delay: 0.2s; } } @keyframes ls-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ─── Ripple effect utility (material-like) ───────────────────── */ .btn, .bottom-nav-item, .kanban-card, .stat-card, .dash-card, .clickable-row, a.btn, .global-search-trigger { position: relative; overflow: hidden; } /* .topbar-btn e .theme-toggle: position:relative mas SEM overflow:hidden, senao corta o .notif-badge e o tooltip ::after */ .topbar-btn, .theme-toggle { position: relative; overflow: visible; } .fab { overflow: hidden; } .ripple-ink { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(33, 35, 77, 0.1); pointer-events: none; animation: ls-ripple 0.7s var(--ease-out-expo) forwards; will-change: transform, opacity; opacity: 0.7; } .btn-gold .ripple-ink, .fab .ripple-ink, [data-theme="dark"] .ripple-ink { background: rgba(255, 255, 255, 0.22); } @keyframes ls-ripple { 0% { transform: scale(0); opacity: 0.5; } 100% { transform: scale(3); opacity: 0; } } /* ─── Enhanced modal sheet (drag handle + animation) ──────────── */ .modal-card { transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .modal-card.dragging { transition: none !important; } .modal-overlay { transition: opacity 0.2s ease-out, backdrop-filter 0.2s ease-out; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .modal-overlay.closing { opacity: 0; } .modal-overlay.closing .modal-card { transform: translateY(100%); } /* ─── FAB loading state ────────────────────────────────────────── */ .fab.loading { pointer-events: none; opacity: 0.85; } .fab.loading svg { animation: ls-spin 0.8s linear infinite; } .fab.loading span { opacity: 0.6; } /* ─── Mobile card badges (floating) ────────────────────────────── */ .mobile-card-badge { position: absolute; top: 10px; right: 10px; font-size: 0.62rem; font-weight: 700; padding: 3px 8px; border-radius: 10px; background: var(--gold); color: var(--navy); } /* ─── Empty state illustration ─────────────────────────────────── */ .empty-state-illustrated { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; text-align: center; color: var(--text-muted); } .empty-state-illustrated svg { width: 96px; height: 96px; opacity: 0.3; margin-bottom: 16px; color: var(--gold); } .empty-state-illustrated h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 0 0 4px; } .empty-state-illustrated p { font-size: 0.84rem; margin: 0 0 16px; max-width: 280px; } /* ─── Loading dots ─────────────────────────────────────────────── */ .loading-dots { display: inline-flex; gap: 4px; align-items: center; } .loading-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0.4; animation: ls-pulse-dot 1.2s infinite ease-in-out; } .loading-dots span:nth-child(2) { animation-delay: 0.15s; } .loading-dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes ls-pulse-dot { 0%, 80%, 100% { opacity: 0.4; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.1); } } /* ─── Segmented-pill filter chips (alternative to selects) ────── */ .chip-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; -webkit-overflow-scrolling: touch; } .chip-row::-webkit-scrollbar { display: none; } .chip { flex-shrink: 0; padding: 7px 14px; background: var(--white); border: 1px solid var(--border); border-radius: 999px; font-size: 0.76rem; font-weight: 600; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: all 0.15s; font-family: inherit; text-decoration: none; } .chip.active { background: var(--navy); color: var(--cream-mid); border-color: var(--navy); } .chip-gold.active { background: var(--gold); color: var(--navy); border-color: var(--gold); } /* ─── List group (iOS settings-style) ──────────────────────────── */ .list-group { background: var(--white); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 12px; } .list-group-item { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--navy); text-decoration: none; gap: 12px; min-height: 52px; font-size: 0.88rem; transition: background 0.15s; } .list-group-item:last-child { border-bottom: 0; } .list-group-item:active { background: rgba(33, 35, 77, 0.04); } .list-group-item > .icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--gold); } .list-group-item > .content { flex: 1; min-width: 0; } .list-group-item > .chevron { color: var(--text-muted); opacity: 0.5; width: 16px; height: 16px; } /* ═══════════════════════════════════════════════════════════════ */ /* MOBILE-ONLY (max-width: 768px) — the app feel */ /* ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Premium card-list from tables — iOS-style */ .table tr { box-shadow: 0 1px 3px rgba(33, 35, 77, 0.04); border-color: rgba(33, 35, 77, 0.06) !important; border-radius: 12px !important; padding: 14px 16px !important; margin-bottom: 10px !important; transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s; position: relative; } .table tr:active { transform: scale(0.985); box-shadow: 0 2px 8px rgba(33, 35, 77, 0.08); } .table tr.clickable-row::after { content: '›'; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 1.6rem; font-weight: 300; color: var(--text-muted); opacity: 0.4; } .table tr.clickable-row { padding-right: 28px; } /* Tier/Estado/Status — faixa colorida a esquerda (iOS-style) */ .table tr[data-tier], .table tr[data-status], .table tr[data-estado] { position: relative; overflow: hidden; padding-left: 18px !important; } .table tr[data-tier]::before, .table tr[data-status]::before, .table tr[data-estado]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tier-color, var(--gold)); } /* Esconder o td do Tier em mobile — a faixa já comunica visualmente */ .table td:first-child[data-label="Tier"], .table td:first-child[data-label="Estado"], .table td:first-child[data-label="Status"] { display: none; } /* Stat cards: premium look with subtle gradient */ .stat-card { background: linear-gradient(135deg, var(--white) 0%, var(--cream-mid) 100%); box-shadow: 0 2px 10px rgba(33, 35, 77, 0.05); border: 1px solid rgba(33, 35, 77, 0.06); } /* Dash cards lifted with subtle shadow */ .dash-card { border: 1px solid rgba(33, 35, 77, 0.06); box-shadow: 0 2px 12px rgba(33, 35, 77, 0.04); } /* Bottom nav: slightly taller icons, smoother icons */ .bottom-nav-item svg { width: 22px; height: 22px; transition: transform 0.15s; } .bottom-nav-item.active svg { transform: translateY(-1px) scale(1.05); } /* Kanban: swipe hint on first load */ .kanban-board { scroll-behavior: smooth; } /* FAB: stronger presence with pulse hint on first render */ .fab { animation: ls-fab-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: 0.3s; } @keyframes ls-fab-in { from { transform: translateY(24px) scale(0.6); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* Topbar: more presence with subtle blur when hidden content scrolls below */ .topbar { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255, 254, 243, 0.92); } /* Modal bottom-sheet with larger drag grip */ .modal-card::before { width: 48px; height: 5px; background: rgba(33, 35, 77, 0.18); } /* Page content has a tiny top padding for breathing room */ .page-content { padding-top: 12px !important; } /* H1 / h2 more compact on mobile */ .page-content h1 { font-size: 1.3rem; } .page-content h2 { font-size: 1.1rem; } /* Forms: rounder, more touchable inputs */ .form-group input, .form-group select, .form-group textarea, .filter-input, .filter-select { border-radius: 10px !important; min-height: 46px; } /* Primary CTA buttons larger on mobile */ .btn-gold { min-height: 48px; font-weight: 700; } /* Make tables rows as cards with more visual weight */ .table td[data-label="Apolices"] strong, .table td[data-label="Premio Anual"] { font-size: 0.95rem; color: var(--navy); } } /* ─── Dark mode polish for all new app components ─────────────── */ [data-theme="dark"] { .chip { background: rgba(255, 255, 255, 0.04); } .chip.active { background: var(--gold); color: var(--navy); } .list-group { background: rgba(255, 255, 255, 0.03); } .mobile-card-badge { background: var(--gold); } .empty-state-illustrated h3 { color: var(--cream-mid); } } @media (max-width: 768px) { [data-theme="dark"] .stat-card { background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%); border-color: rgba(255, 255, 255, 0.08); } } /* ═══════════════════════════════════════════════════════════════ */ /* FASE 4 — FIXES PROFUNDOS DE MOBILE UX */ /* ═══════════════════════════════════════════════════════════════ */ /* ─── Chart.js containers — responsive fluid heights on mobile ── */ @media (max-width: 768px) { .dash-card-body canvas { max-height: 200px !important; height: 200px !important; width: 100% !important; } /* Ranking/comparison chart can be taller since it's vertical */ canvas[id*="Ranking"] { max-height: 320px !important; } } /* ─── Safe-area for landscape notches (iPhone Pro Max, etc.) ──── */ @media (max-width: 1024px) { .main-content { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } .topbar { padding-left: max(12px, env(safe-area-inset-left, 0px)) !important; padding-right: max(12px, env(safe-area-inset-right, 0px)) !important; } .bottom-nav { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } .fab { right: max(16px, calc(env(safe-area-inset-right, 0px) + 16px)) !important; } .toast-container, #offlineBar { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } } /* ─── Mobile action buttons in tables ≥44px touch target ──────── */ @media (max-width: 768px) { .table td:last-child .btn, .table td:last-child .btn-sm, .table td .btn, .table-responsive a.btn { min-height: 44px !important; padding: 8px 14px !important; font-size: 0.82rem !important; } .table td:last-child { gap: 8px !important; padding-top: 10px !important; } /* Primary action buttons in table rows span full width on tiny screens */ @media (max-width: 420px) { .table td:last-child .btn:not(.btn-outline), .table td:last-child a.btn:not(.btn-outline) { flex: 1 0 100%; justify-content: center; } } } /* ─── 2FA input: reduce letter-spacing on small screens ───────── */ @media (max-width: 480px) { input[inputmode="numeric"][maxlength="6"], input[inputmode="numeric"][maxlength="8"], input#totp_code { letter-spacing: 4px !important; font-size: 1.25rem !important; max-width: 100% !important; } } /* ─── Inline flex alerts with space-between stack on narrow ──── */ @media (max-width: 480px) { .alert [style*="display:flex"][style*="justify-content:space-between"], .alert > div[style*="display:flex"][style*="justify-content:space-between"] { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; } /* Renewal/receipt alert cards that use flex side-by-side */ .dash-card-body [style*="display:flex"][style*="justify-content:space-between"][style*="padding"] { flex-wrap: wrap; gap: 6px; } } /* ─── Toast / offline bar positioning for landscape notch ─────── */ @media (max-width: 768px) and (orientation: landscape) { .toast-container { bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; right: max(12px, env(safe-area-inset-right, 12px)) !important; max-width: min(90vw, 380px); } #offlineBar { font-size: 0.78rem !important; padding: 6px 12px !important; } .modal-card { max-height: 88vh !important; } } /* ─── Modal sticky header: lower overhead on tiny screens ─────── */ @media (max-width: 768px) { .modal-header { padding: 4px 0 10px !important; margin-bottom: 14px !important; } .modal-header h3 { font-size: 1rem !important; } /* Small screens: drop sticky entirely to save vertical space */ @media (max-height: 600px) { .modal-header { position: static !important; } .modal-actions { position: static !important; } .modal-card::before { top: 6px; } } } /* ─── Improved sidebar overlay + body scroll lock ─────────────── */ @media (max-width: 768px) { #sidebarOverlay.active { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .sidebar.open { box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25); padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } } /* ─── Keyboard-aware bottom nav: hide when input is focused ───── */ @media (max-width: 768px) { body.keyboard-open .bottom-nav, body.keyboard-open .fab { transform: translateY(100%); transition: transform 0.2s ease-out; } body.keyboard-open .topbar { transform: translateY(-100%); } } /* ─── Global search overlay: proper z-index + keyboard aware ──── */ body.search-overlay-active { overflow: hidden; } body.search-overlay-active .global-search { z-index: 10001 !important; } body.search-overlay-active .topbar { z-index: 40 !important; } /* ─── View Transitions API (Chrome/Safari recente — fallback gracioso) ──── */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: 0.22s ease-out both ls-page-out; } ::view-transition-new(root) { animation: 0.32s var(--ease-out-expo) both ls-page-in; } @keyframes ls-page-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } @keyframes ls-page-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ─── Sidebar collapse (desktop, icon-only) ──────────────────── */ @media (min-width: 769px) { body.sidebar-collapsed .sidebar { width: 68px; } body.sidebar-collapsed .main-content { margin-left: 68px; } body.sidebar-collapsed .sidebar-logo span, body.sidebar-collapsed .nav-item span, body.sidebar-collapsed .sidebar-section-title { display: none; } body.sidebar-collapsed .nav-item { justify-content: center; padding: 11px 0; margin: 2px 6px; width: calc(100% - 12px); } body.sidebar-collapsed .nav-item.active { border-radius: var(--radius-sm); } body.sidebar-collapsed .nav-item.active::before { left: -10px; height: 22px; } body.sidebar-collapsed .sidebar-collapse-btn { display: none; } body.sidebar-collapsed .sidebar-header { padding: 0; justify-content: center; } /* Mostrar trigger quando hover no sidebar */ body.sidebar-collapsed .sidebar:hover .sidebar-collapse-btn { display: inline-flex; position: absolute; right: -12px; top: 22px; background: var(--navy); border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; padding: 4px; z-index: 10; box-shadow: var(--shadow-2); } body.sidebar-collapsed .sidebar-logo { justify-content: center; } /* Trocar wordmark pelo icone do leao quando collapsed */ body.sidebar-collapsed .sidebar-logo-full { display: none; } body.sidebar-collapsed .sidebar-logo-icon { display: block; } body.sidebar-collapsed .sidebar-logo img { max-width: 32px; height: 32px; } /* Esconder labels de grupo (Operacao/Analise/Sistema) quando collapsed */ body.sidebar-collapsed .nav-group-label { display: none; } body.sidebar-collapsed .nav-divider { margin: 10px 8px; } /* Tooltip nos icons collapsed */ body.sidebar-collapsed .nav-item[data-label]::after { content: attr(data-label); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(-4px); background: rgba(33,35,77,0.94); color: var(--cream); font-size: 0.78rem; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-xs); white-space: nowrap; opacity: 0; pointer-events: none; backdrop-filter: blur(8px); box-shadow: var(--shadow-2); z-index: 1000; transition: opacity 0.18s ease 0.3s, transform 0.18s var(--ease-spring) 0.3s; } body.sidebar-collapsed .nav-item[data-label]:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } } /* Toggle button sidebar collapse */ .sidebar-collapse-btn { background: none; border: none; cursor: pointer; color: rgba(255,254,243,0.4); padding: 6px; border-radius: var(--radius-xs); transition: background var(--duration-fast) var(--ease-out-cubic), color var(--duration-fast) var(--ease-out-cubic); display: none; } .sidebar-collapse-btn:hover { background: rgba(255,255,255,0.06); color: var(--cream); } @media (min-width: 769px) { .sidebar-collapse-btn { display: inline-flex; align-items: center; justify-content: center; } } .sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); transition: transform 0.3s var(--ease-out-expo); } .sidebar, .main-content { transition: width 0.28s var(--ease-out-expo), margin-left 0.28s var(--ease-out-expo); } /* ─── Compact density mode (data-density="compact") ──────────── */ [data-density="compact"] { --topbar-h: 52px; } [data-density="compact"] .page-content { padding: 16px; } [data-density="compact"] .stat-card { padding: 14px; } [data-density="compact"] .stat-number { font-size: 1.55rem; } [data-density="compact"] .stat-label { font-size: 0.72rem; } [data-density="compact"] .stat-icon { width: 38px; height: 38px; } [data-density="compact"] .dash-card-header { padding: 12px 16px; } [data-density="compact"] .dash-card-body { padding: 12px 16px; } [data-density="compact"] .table th { padding: 8px 12px; font-size: 0.68rem; } [data-density="compact"] .table td { padding: 9px 12px; font-size: 0.82rem; } [data-density="compact"] .info-card { padding: 14px; } [data-density="compact"] .btn { padding: 8px 16px; font-size: 0.82rem; } [data-density="compact"] .form-group { margin-bottom: 12px; } [data-density="compact"] .form-group input, [data-density="compact"] .form-group select, [data-density="compact"] .form-group textarea, [data-density="compact"] .filter-input, [data-density="compact"] .filter-select { padding: 9px 12px; font-size: 0.85rem; } [data-density="compact"] .hero-title { font-size: 1.7rem; } [data-density="compact"] .hero-header { padding: 4px 0 12px; } [data-density="compact"] .stats-grid { gap: 10px; margin-bottom: 16px; } [data-density="compact"] .dashboard-grid { gap: 14px; } /* Cmd+K hint badge no input (decorativo) */ .global-search-input-wrap::after { content: "⌘K"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 0.68rem; font-weight: 700; color: var(--text-muted); opacity: 0.5; background: rgba(33,35,77,0.06); padding: 2px 7px; border-radius: var(--radius-xs); pointer-events: none; font-family: ui-monospace, "SF Mono", Menlo, monospace; transition: opacity var(--duration-fast) var(--ease-out-cubic); } .global-search-input-wrap:focus-within::after { opacity: 0; } @media (max-width: 768px) { .global-search-input-wrap::after { display: none; } } /* ─── Mobile fix: lead-row-card stack vertical ───────────────── */ @media (max-width: 768px) { .lead-row-card { flex-wrap: wrap !important; gap: 6px 10px !important; padding: 12px 14px !important; align-items: flex-start !important; } /* Primeira linha: nome do cliente ocupa quase toda a largura */ .lead-row-card > .flex-1.min-w-120 { flex: 1 1 100%; min-width: 0 !important; } /* Outras colunas adaptam-se à largura disponível */ .lead-row-card > .w-110, .lead-row-card > .w-130, .lead-row-card > .w-85, .lead-row-card > .w-80 { width: auto !important; flex: 0 1 auto; } .lead-row-card > .w-28 { flex: 0 0 auto; } /* Texto interno dos badges/spans nao deve quebrar palavras-soltas */ .lead-row-card .badge-mini-color, .lead-row-card .lead-score-badge, .lead-row-card .lead-score-badge-xs { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } } /* ─── Mobile fix: ranking + dashboards 2-col layout ───────────── */ @media (max-width: 768px) { /* Containers .flex-1-min lado-a-lado dentro de dash-card-body (Ranking Comercial em producao.php, etc) -> 100% width mobile */ .dash-card-body .d-flex.flex-wrap > .flex-1-min, .dash-card-body .d-flex.gap-24 > .flex-1-min, .dash-card-body .d-flex.gap-16 > .flex-1-min { flex: 1 1 100% !important; width: 100%; min-width: 0; } /* Canvas charts em mobile: largura 100%, altura controlada por parent */ .dash-card-body canvas { max-width: 100% !important; height: auto !important; } /* Bar fills (ranking) tomam toda a largura disponivel */ .bar-track-medium { width: 100%; } } /* ─── Mobile responsiveness final pass (mw-* + filter inputs) ── */ @media (max-width: 768px) { /* Modal cards com max-width hardcoded por classe -> 100% em mobile */ .modal-card.mw-700, .modal-card.mw-720, .modal-card.mw-440, .modal-card.mw-420, .modal-card.mw-300, .modal-card.mw-600, .modal-card.mw-540, .modal-card[class*="mw-"] { max-width: 100% !important; width: 100% !important; } /* Filter-bar inputs/selects full-width em mobile */ .filter-bar > input.filter-input, .filter-bar > select.filter-select { flex: 1 1 100%; min-width: 0; width: 100%; max-width: 100%; } .filter-bar > input.w-140, .filter-bar > input.w-120, .filter-bar > input.min-w-120 { flex: 1 1 100%; min-width: 0 !important; width: 100% !important; max-width: none !important; } /* Page actions header: btn-gold + exports stack vertical */ .page-actions .btn-sm.btn-outline { flex: 0 0 auto; } } @media (max-width: 480px) { /* Renovacoes calendar: scroll horizontal forcado */ .cal-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .cal-table thead, .cal-table tbody, .cal-table tr { display: table; table-layout: fixed; width: max-content; min-width: 100%; } /* Conversas stats em 1 coluna */ .cv-stats { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════════ */ /* CLICKUP-STYLE GROUPED VIEW (leads.php?view=grouped) */ /* ═══════════════════════════════════════════════════════════════ */ /* Toolbar acima dos grupos (density toggle, etc.) */ .ck-toolbar { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 8px; padding: 0 2px; } .ck-density-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--white); border: 0.5px solid var(--border); border-radius: var(--radius-xs); color: var(--text-muted); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background var(--duration-fast) var(--ease-out-cubic), color var(--duration-fast) var(--ease-out-cubic), border-color var(--duration-fast) var(--ease-out-cubic); } .ck-density-btn:hover { background: var(--cream-mid); color: var(--navy); border-color: var(--gold); } .ck-density-btn svg { flex-shrink: 0; } .ck-group { margin-bottom: 14px; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-1), 0 0 0 0.5px var(--border); /* Bug 2026-05: 'overflow: hidden' bloqueava 'position: sticky' do .ck-row-head (cabecalho do grupo na vista agrupada de leads), fazendo o cabecalho "soltar-se" no meio do scroll com linhas a passar por cima visualmente. 'overflow: clip' tem o mesmo efeito visual (recorte do conteudo aos border-radius) mas nao cria um containing block para sticky. Suporte: Chrome 90+, FF 81+, Safari 15.4+. Browsers antigos caem para hidden (degradacao OK). */ overflow: clip; transition: box-shadow var(--duration-base) var(--ease-out-cubic); } .ck-group:hover { box-shadow: var(--shadow-2), 0 0 0 0.5px var(--border); } .ck-group.ck-drop-target { box-shadow: 0 0 0 2px var(--gold), var(--shadow-2); } /* Header de grupo - compact ClickUp style */ .ck-group-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; user-select: none; background: linear-gradient(180deg, var(--white), var(--cream-mid)); border-bottom: 0.5px solid var(--border); transition: background var(--duration-fast) var(--ease-out-cubic); flex-wrap: wrap; } .ck-group-header:hover { background: linear-gradient(180deg, rgba(202,158,103,0.06), var(--cream-mid)); } .ck-group-chevron { background: none; border: none; padding: 2px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.28s var(--ease-out-cubic); flex-shrink: 0; width: 18px; height: 18px; } .ck-group.collapsed .ck-group-chevron { transform: rotate(-90deg); } /* Status pill colorido (substitui dot+nome) */ .ck-group-pill { color: #fff; padding: 3px 10px; border-radius: var(--radius-xs); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.55; display: inline-flex; align-items: center; flex-shrink: 0; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.08); text-shadow: 0 1px 0 rgba(0,0,0,0.12); } .ck-group-count { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); background: rgba(33,35,77,0.06); padding: 1px 8px; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; line-height: 1.5; } .ck-group-meta { font-size: 0.74rem; color: var(--text-body); letter-spacing: -0.005em; margin-left: 4px; display: inline-flex; gap: 4px; align-items: baseline; } .ck-group-meta-sm { font-size: 0.7rem; opacity: 0.85; } .ck-meta-label { color: var(--text-muted); font-weight: 500; } .ck-group-meta strong { color: var(--gold-dark); font-weight: 700; font-variant-numeric: tabular-nums; } .ck-group-spacer { flex: 1; } .ck-group-action { color: var(--text-muted); text-decoration: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-xs); transition: background var(--duration-fast) var(--ease-out-cubic), color var(--duration-fast) var(--ease-out-cubic); } .ck-group-action:hover { background: rgba(202,158,103,0.14); color: var(--gold-dark); } /* Collapse com max-height transition coordenada */ .ck-group-body { max-height: 6000px; transition: max-height 0.32s var(--ease-out-cubic), opacity 0.22s var(--ease-out-cubic); overflow: hidden; } .ck-group.collapsed .ck-group-body { max-height: 0; opacity: 0; pointer-events: none; } /* Empty state ilustrado */ .ck-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 0.85rem; display: flex; flex-direction: column; align-items: center; gap: 10px; } .ck-empty svg { color: rgba(33,35,77,0.18); } .ck-empty p { margin: 0; } .ck-empty p strong { color: var(--navy); } .ck-empty-cta { background: var(--cream-mid); border: 0.5px solid var(--border); color: var(--gold-dark); padding: 6px 14px; border-radius: var(--radius-xs); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background var(--duration-fast) var(--ease-out-cubic); } .ck-empty-cta:hover { background: rgba(202,158,103,0.14); } /* Tabela ClickUp - density compacta */ .ck-table { display: flex; flex-direction: column; } .ck-row { display: grid; grid-template-columns: 20px /* drag handle */ minmax(220px, 2fr) /* nome */ minmax(140px, 1fr) /* veículo/detalhe */ 96px /* vencimento */ minmax(150px, 1fr) /* tipo */ 72px /* score */ 100px /* valor */ 90px /* assigned */ 24px; /* actions menu */ align-items: center; gap: 10px; padding: 6px 10px 6px 0; border-bottom: 0.5px solid var(--border); text-decoration: none; color: inherit; transition: background var(--duration-fast) var(--ease-out-cubic); border-left: 3px solid transparent; position: relative; min-height: 38px; } .ck-row:not(.ck-row-head):not(.ck-add-row) { cursor: pointer; } .ck-row:not(.ck-row-head):not(.ck-add-row):hover { background: rgba(202,158,103,0.05); } .ck-row:last-child { border-bottom: none; } .ck-row-head { /* Background solido para distinguir do conteudo do grupo. */ background: var(--cream-mid); font-size: 0.66rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; cursor: default; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; padding: 6px 10px 6px 0; min-height: 30px; /* Garantia de ordem visual: o flex-container .ck-table tem flex-direction:column. Order -1 garante que o cabecalho fica SEMPRE acima das linhas, independentemente de DOM reordering por JS (drag-and-drop) ou CSS no futuro. */ order: -1; /* NOTA: position:sticky foi removido - causava bugs visuais com a linha 1 a aparecer "antes" do cabecalho devido a interaccao com o stacking context dos .ck-row (que tem position:relative). Cabecalho fica como header normal do grupo. As .table thead th mantem sticky para clientes, apolices, etc. */ } [data-theme="dark"] .ck-row-head { background: var(--dark-card); } /* Sortable column header */ .ck-sortable { text-decoration: none; color: inherit; cursor: pointer; transition: color var(--duration-fast) var(--ease-out-cubic); } .ck-sortable:hover { color: var(--navy); } .ck-sortable.ck-sorted { color: var(--gold-dark); } .ck-sort-arrow { font-size: 0.6rem; margin-left: 2px; opacity: 0.85; } .ck-cell { min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 6px; font-size: 0.84rem; letter-spacing: -0.005em; } /* Drag handle (visual only - aparece em hover) */ .ck-cell-handle { color: rgba(33,35,77,0.18); width: 20px; justify-content: center; cursor: grab; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out-cubic); } .ck-cell-handle svg { width: 16px; height: 16px; } .ck-row:hover .ck-cell-handle { opacity: 1; } .ck-row:active .ck-cell-handle { cursor: grabbing; } .ck-row-head .ck-cell-handle { opacity: 0; } .ck-cell-name { gap: 8px; } .ck-priority { flex-shrink: 0; font-size: 0.78rem; background: none; border: none; padding: 0; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; border-radius: var(--radius-xs); transition: background var(--duration-fast) var(--ease-out-cubic), transform var(--duration-fast) var(--ease-out-cubic); } .ck-edit-priority:hover { background: rgba(33,35,77,0.08); transform: scale(1.18); } .ck-name-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; flex: 1; } .ck-name-line { display: flex; align-items: center; gap: 8px; min-width: 0; } .ck-name-line strong { color: var(--navy); font-size: 0.88rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ck-pencil { color: var(--text-muted); opacity: 0; transition: opacity var(--duration-fast) var(--ease-out-cubic); flex-shrink: 0; display: inline-flex; align-items: center; } .ck-row:hover .ck-pencil { opacity: 0.55; } .ck-row:hover .ck-pencil:hover { opacity: 1; } /* Telefone so visivel em hover (decongestion) */ .ck-sub-hover { max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--duration-fast) var(--ease-out-cubic), opacity var(--duration-fast) var(--ease-out-cubic); } .ck-row:hover .ck-sub-hover { max-height: 16px; opacity: 1; } .ck-cell-veiculo { flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.3; } .ck-cell-veiculo strong { color: var(--navy); font-weight: 600; font-size: 0.82rem; } .ck-sub { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-weight: 500; } .ck-tasks { display: inline-flex; align-items: center; gap: 3px; font-size: 0.66rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; background: rgba(33,35,77,0.05); padding: 1px 6px; border-radius: var(--radius-pill); } .ck-tasks-done { color: var(--ios-green-text); background: var(--ios-green-bg); } .ck-tasks svg { flex-shrink: 0; } .ck-cell-vencimento { font-size: 0.78rem; font-variant-numeric: tabular-nums; justify-content: flex-start; } .ck-date { color: var(--text-body); } .ck-date-soon { color: var(--ios-red-text); font-weight: 700; } .ck-cell-tipo { flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; } .ck-cell-tipo .badge-mini-color { font-size: 0.62rem; padding: 2px 7px; } .ck-cell-score { justify-content: center; } .ck-cell-score .lead-score-badge-xs { font-size: 0.6rem; padding: 2px 7px; } .ck-cell-valor { justify-content: flex-end; text-align: right; font-variant-numeric: tabular-nums; gap: 2px; flex-wrap: nowrap; } .ck-cell-valor strong { color: var(--navy); font-weight: 700; font-size: 0.86rem; } .ck-cell-assigned { justify-content: flex-start; gap: 6px; } .ck-cell-assigned .avatar-circle-sm { width: 24px; height: 24px; font-size: 0.6rem; flex-shrink: 0; } .ck-assigned-name { font-size: 0.78rem; color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ck-assigned-trigger { background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: var(--radius-xs); display: inline-flex; align-items: center; gap: 6px; color: inherit; font: inherit; transition: background var(--duration-fast) var(--ease-out-cubic); min-width: 0; } .ck-assigned-trigger:hover { background: rgba(33,35,77,0.08); } /* Drag-and-drop estados */ .ck-row[draggable="true"] { cursor: grab; } .ck-row.ck-dragging { opacity: 0.45; cursor: grabbing; background: rgba(202,158,103,0.08); } .ck-group-body.ck-drag-over { background: rgba(202,158,103,0.06); box-shadow: inset 0 0 0 2px var(--gold); } /* Popover (inline edit) */ .ck-popover { position: absolute; z-index: 100; background: var(--white); border: 0.5px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 0 0 0.5px var(--border); padding: 4px; min-width: 180px; max-height: 280px; overflow-y: auto; animation: ckPopIn 0.16s var(--ease-out-cubic); } @keyframes ckPopIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .ck-popover-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-xs); cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-size: 0.84rem; color: var(--text-body); font-family: inherit; transition: background var(--duration-fast) var(--ease-out-cubic); } .ck-popover-item:hover { background: var(--cream-mid); } .ck-popover-item.active { background: rgba(202,158,103,0.15); color: var(--navy); font-weight: 600; } .ck-popover-item .avatar-circle-sm { width: 22px; height: 22px; font-size: 0.55rem; flex-shrink: 0; } .ck-popover-icon { font-size: 0.92rem; line-height: 1; flex-shrink: 0; width: 18px; text-align: center; } .ck-muted { color: var(--text-muted); font-size: 0.78rem; } /* Action menu (hover only) */ .ck-cell-actions { color: rgba(33,35,77,0.3); width: 24px; height: 24px; border-radius: var(--radius-xs); justify-content: center; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out-cubic), background var(--duration-fast) var(--ease-out-cubic); } .ck-cell-actions svg { width: 16px; height: 16px; } .ck-row:hover .ck-cell-actions { opacity: 1; } .ck-cell-actions:hover { background: rgba(33,35,77,0.08); color: var(--navy); } /* + Adicionar lead row (footer of group) */ .ck-add-row { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-family: inherit; text-align: left; width: 100%; border-bottom: none; } .ck-add-row:hover { background: rgba(202,158,103,0.04); color: var(--gold-dark); } .ck-add-cell { grid-column: 2 / -1; display: inline-flex !important; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: -0.005em; } .ck-add-cell svg { color: var(--gold-dark); } /* Tablet: esconder coluna detalhe */ @media (max-width: 1024px) { .ck-row, .ck-row-head { grid-template-columns: 20px minmax(180px, 2fr) 90px minmax(140px, 1fr) 64px 96px 80px 24px; } .ck-cell-veiculo { display: none; } } /* Mobile: card vertical com labels */ @media (max-width: 768px) { .ck-row-head { display: none; } .ck-row { display: flex; flex-direction: column; align-items: stretch !important; gap: 6px; padding: 12px 14px; position: relative; min-height: 0; } .ck-cell-handle, .ck-cell-actions { display: none; } .ck-cell { width: 100%; flex-direction: row; align-items: center; gap: 8px; } /* Labels inline em mobile (revela contexto sem o header) */ .ck-cell[data-label]:not(.ck-cell-name)::before { content: attr(data-label); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); min-width: 88px; flex-shrink: 0; } .ck-cell-name { font-size: 0.92rem; gap: 8px; } .ck-name-line strong { font-size: 0.96rem; white-space: normal; } .ck-cell-tipo { flex-direction: row; flex-wrap: wrap; } .ck-cell-veiculo { display: flex; } .ck-cell-assigned { justify-content: flex-start; } .ck-cell-score { justify-content: flex-start; } .ck-cell-valor { justify-content: flex-start; text-align: left; flex-wrap: nowrap; } .ck-add-row { padding: 14px; } .ck-add-cell { grid-column: 1; } /* Telefone sempre visivel em mobile (sem hover em touch) */ .ck-sub-hover { max-height: none; opacity: 1; } /* Pencil icon escondido em mobile (touch users abrem pelo nome) */ .ck-pencil { display: none; } /* Sticky desliga em mobile (cards sem header) */ .ck-row-head { position: static; } } /* Dark mode - bumps de contraste e suporte aos novos elementos */ [data-theme="dark"] .ck-group { background: rgba(40,42,75,0.6); } [data-theme="dark"] .ck-group-header { background: linear-gradient(180deg, rgba(40,42,75,0.85), rgba(33,35,77,0.5)); } [data-theme="dark"] .ck-row:not(.ck-row-head):not(.ck-add-row):hover { background: rgba(255,255,255,0.05); } [data-theme="dark"] .ck-row-head { background: rgba(255,255,255,0.08); } [data-theme="dark"] .ck-row-head:hover { background: rgba(255,255,255,0.08); } [data-theme="dark"] .ck-density-btn { background: rgba(40,42,75,0.6); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .ck-density-btn:hover { background: rgba(255,255,255,0.06); border-color: var(--gold); } [data-theme="dark"] .ck-empty svg { color: rgba(255,255,255,0.18); } [data-theme="dark"] .ck-empty-cta { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .ck-empty-cta:hover { background: rgba(202,158,103,0.18); } [data-theme="dark"] .ck-popover { background: var(--white); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .ck-popover-item:hover { background: rgba(255,255,255,0.06); } [data-theme="dark"] .ck-popover-item.active { background: rgba(202,158,103,0.18); } [data-theme="dark"] .ck-edit-priority:hover { background: rgba(255,255,255,0.08); } [data-theme="dark"] .ck-assigned-trigger:hover { background: rgba(255,255,255,0.08); } [data-theme="dark"] .ck-add-row:hover { background: rgba(202,158,103,0.08); } [data-theme="dark"] .ck-popover { background: rgba(40,42,75,0.98); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .ck-popover-item { color: var(--text-body); } /* Density 3 modos para a vista ClickUp Agrupada */ [data-density="compact"] .ck-row { padding: 3px 10px 3px 0; min-height: 30px; gap: 8px; } [data-density="compact"] .ck-row-head { min-height: 26px; padding: 4px 10px 4px 0; } [data-density="compact"] .ck-name-line strong { font-size: 0.84rem; } [data-density="compact"] .ck-cell { font-size: 0.8rem; } [data-density="compact"] .ck-group-header { padding: 5px 12px; } [data-density="comfy"] .ck-row { padding: 11px 10px 11px 0; min-height: 56px; gap: 14px; } [data-density="comfy"] .ck-row-head { min-height: 38px; padding: 9px 10px 9px 0; } [data-density="comfy"] .ck-name-line strong { font-size: 0.94rem; } [data-density="comfy"] .ck-cell { font-size: 0.88rem; } [data-density="comfy"] .ck-group-header { padding: 12px 14px; } [data-density="comfy"] .ck-cell-assigned .avatar-circle-sm { width: 28px; height: 28px; font-size: 0.66rem; } /* ═══════════════════════════════════════════════════════════════ */ /* ClickUp v4 - Multi-select / context-menu / quick-actions / pin */ /* ═══════════════════════════════════════════════════════════════ */ /* Last contact dot (cor por dias desde ultima atividade) */ .ck-lc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); } .ck-lc-fresh { background: #34C759; } /* verde - <7d */ .ck-lc-warm { background: #FF9500; } /* laranja - 7-30d */ .ck-lc-stale { background: #FF3B30; } /* vermelho - >30d */ .ck-lc-never { background: rgba(33,35,77,0.18); } /* Pin indicator (visivel quando lead esta fixado) */ .ck-row.ck-pinned { background: rgba(202,158,103,0.04); } .ck-row.ck-pinned:not(.ck-row-head):not(.ck-add-row):hover { background: rgba(202,158,103,0.09); } .ck-pin-indicator { color: var(--gold-dark); display: inline-flex; align-items: center; flex-shrink: 0; margin-right: 2px; } /* Multi-select checkbox + drag-dots (mesma celula) */ .ck-cell-handle { position: relative; } .ck-row-checkbox { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; margin: 0; cursor: pointer; accent-color: var(--gold); opacity: 0; transition: opacity 0.14s var(--ease-out-cubic); z-index: 2; } .ck-drag-dots { color: rgba(33,35,77,0.18); display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; transition: opacity 0.14s var(--ease-out-cubic); } .ck-drag-dots svg { width: 14px; height: 14px; } .ck-row:hover .ck-row-checkbox { opacity: 1; } .ck-row:hover .ck-drag-dots { opacity: 0; } .ck-row.ck-selected .ck-row-checkbox { opacity: 1; } .ck-row.ck-selected .ck-drag-dots { opacity: 0; } body.ck-has-selection .ck-row-checkbox { opacity: 1; } body.ck-has-selection .ck-drag-dots { opacity: 0; } .ck-row.ck-selected { background: rgba(202,158,103,0.10) !important; } .ck-row.ck-selected:hover { background: rgba(202,158,103,0.14) !important; } /* Multi-select em tabelas (clientes) - destaque da linha selecionada */ tr.cl-selected > td { background: rgba(202,158,103,0.12) !important; } [data-theme="dark"] tr.cl-selected > td { background: rgba(202,158,103,0.20) !important; } /* Bulk action bar (floating dark no fundo) */ .ck-bulk-bar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 200; display: flex; align-items: center; gap: 4px; background: #1F2128; color: #fff; padding: 6px 8px; border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 0 0 0.5px rgba(255,255,255,0.06); opacity: 0; pointer-events: none; transition: transform 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic); max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; } .ck-bulk-bar::-webkit-scrollbar { display: none; } .ck-bulk-bar.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .ck-bulk-count { padding: 6px 12px; font-size: 0.84rem; font-weight: 600; color: rgba(255,255,255,0.92); white-space: nowrap; font-variant-numeric: tabular-nums; } .ck-bulk-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.12); margin: 0 4px; } .ck-bulk-spacer { width: 8px; } .ck-bulk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: transparent; border: none; color: rgba(255,255,255,0.92); font-size: 0.82rem; font-weight: 500; border-radius: 8px; cursor: pointer; white-space: nowrap; font-family: inherit; transition: background 0.12s var(--ease-out-cubic); } .ck-bulk-btn:hover { background: rgba(255,255,255,0.12); } .ck-bulk-btn svg { color: rgba(255,255,255,0.78); flex-shrink: 0; } .ck-bulk-success { color: #34C759; } .ck-bulk-success svg { color: #34C759; } .ck-bulk-danger { color: #FF6961; } .ck-bulk-danger svg { color: #FF6961; } .ck-bulk-cancel { background: transparent; border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.78); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 0.82rem; font-weight: 500; font-family: inherit; transition: background 0.12s var(--ease-out-cubic); } .ck-bulk-cancel:hover { background: rgba(255,255,255,0.08); color: #fff; } /* Context menu (right-click) */ .ck-ctx-menu { position: fixed; z-index: 250; background: var(--white); border: 0.5px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.16), 0 0 0 0.5px var(--border); padding: 4px; min-width: 200px; opacity: 0; pointer-events: none; transform: scale(0.96); transform-origin: top left; transition: opacity 0.14s var(--ease-out-cubic), transform 0.14s var(--ease-out-cubic); } .ck-ctx-menu.visible { opacity: 1; pointer-events: auto; transform: scale(1); } .ck-ctx-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: none; border: none; width: 100%; border-radius: 6px; cursor: pointer; font-size: 0.84rem; color: var(--text-body); font-family: inherit; text-align: left; transition: background 0.1s var(--ease-out-cubic); } .ck-ctx-item:hover { background: var(--cream-mid); } .ck-ctx-item svg { color: var(--text-muted); flex-shrink: 0; } .ck-ctx-success { color: var(--ios-green-text); } .ck-ctx-success svg { color: var(--ios-green-text); } .ck-ctx-danger { color: var(--ios-red-text); } .ck-ctx-danger svg { color: var(--ios-red-text); } .ck-ctx-danger:hover { background: rgba(255,59,48,0.08); } .ck-ctx-success:hover { background: rgba(52,199,89,0.08); } .ck-ctx-sep { height: 0.5px; background: var(--border); margin: 4px 6px; } /* Quick actions hover (tel/email/whatsapp) */ .ck-cell-actions { position: relative; overflow: visible !important; } .ck-quick-actions { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; opacity: 0; pointer-events: none; transition: opacity 0.14s var(--ease-out-cubic); } .ck-row:hover .ck-quick-actions { opacity: 1; pointer-events: auto; } .ck-qa-btn { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-xs); color: var(--text-muted); background: var(--white); text-decoration: none; border: 0.5px solid var(--border); transition: all 0.12s var(--ease-out-cubic); } .ck-qa-btn:hover { color: var(--gold-dark); background: rgba(202,158,103,0.12); border-color: var(--gold); transform: scale(1.08); } .ck-actions-menu { background: none; border: none; cursor: pointer; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-xs); color: rgba(33,35,77,0.3); opacity: 0; transition: opacity 0.14s var(--ease-out-cubic), background 0.14s var(--ease-out-cubic); } .ck-row:hover .ck-actions-menu { opacity: 1; } .ck-actions-menu:hover { background: rgba(33,35,77,0.08); color: var(--navy); } .ck-actions-menu svg { width: 14px; height: 14px; } /* Edit triggers (inline date, tasks) */ .ck-edit-date, .ck-edit-tasks { background: none; border: none; cursor: pointer; padding: 1px 4px; border-radius: var(--radius-xs); font-family: inherit; color: inherit; text-align: left; transition: background 0.12s var(--ease-out-cubic); } .ck-edit-date { font-size: inherit; } .ck-edit-date:hover, .ck-edit-tasks:hover { background: rgba(33,35,77,0.08); } .ck-edit-tasks { display: inline-flex; align-items: center; gap: 3px; font-size: 0.66rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; background: rgba(33,35,77,0.05); padding: 1px 6px; border-radius: var(--radius-pill); } .ck-edit-tasks.ck-tasks-done { color: var(--ios-green-text); background: var(--ios-green-bg); } .ck-edit-tasks:hover { transform: scale(1.04); } /* Date popover - usa input type=date nativo dentro */ .ck-date-popover { position: absolute; z-index: 100; background: var(--white); border: 0.5px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 220px; animation: ckPopIn 0.16s var(--ease-out-cubic); } .ck-date-popover input[type="date"] { padding: 8px 10px; border: 0.5px solid var(--border); border-radius: var(--radius-xs); font-family: inherit; font-size: 0.86rem; color: var(--text-body); background: var(--cream-mid); width: 100%; } .ck-date-popover-actions { display: flex; gap: 6px; justify-content: space-between; } .ck-date-popover-actions button { background: none; border: none; cursor: pointer; padding: 5px 10px; border-radius: var(--radius-xs); font-size: 0.78rem; font-weight: 600; font-family: inherit; transition: background 0.12s; } .ck-date-popover-clear { color: var(--ios-red-text); } .ck-date-popover-clear:hover { background: rgba(255,59,48,0.08); } .ck-date-popover-save { color: var(--gold-dark); background: rgba(202,158,103,0.12); } .ck-date-popover-save:hover { background: rgba(202,158,103,0.2); } /* Subtask popover */ .ck-subtask-popover { position: absolute; z-index: 100; background: var(--white); border: 0.5px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 8px; min-width: 280px; max-width: 360px; max-height: 320px; overflow-y: auto; animation: ckPopIn 0.16s var(--ease-out-cubic); } .ck-subtask-popover h4 { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 4px 8px; margin: 0 0 4px 0; } .ck-subtask-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-xs); font-size: 0.84rem; cursor: pointer; transition: background 0.12s; } .ck-subtask-item:hover { background: var(--cream-mid); } .ck-subtask-item input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--gold); flex-shrink: 0; cursor: pointer; } .ck-subtask-item.done { opacity: 0.55; } .ck-subtask-item.done .ck-subtask-title { text-decoration: line-through; } .ck-subtask-title { flex: 1; min-width: 0; word-break: break-word; } .ck-subtask-empty { padding: 16px; text-align: center; font-size: 0.82rem; color: var(--text-muted); } /* Saved filters chips */ .ck-saved-filters { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; align-items: center; } .ck-saved-filters::-webkit-scrollbar { display: none; } .ck-saved-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--white); border: 0.5px solid var(--border); border-radius: var(--radius-pill); color: var(--text-body); font-size: 0.78rem; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; transition: all 0.12s var(--ease-out-cubic); } .ck-saved-chip:hover { background: rgba(202,158,103,0.06); border-color: var(--gold); color: var(--navy); } .ck-saved-chip-x { background: none; border: none; cursor: pointer; color: var(--text-muted); width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.1s; font-size: 0.7rem; line-height: 1; } .ck-saved-chip-x:hover { background: rgba(255,59,48,0.12); color: var(--ios-red-text); } .ck-saved-add { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: transparent; border: 0.5px dashed var(--border); border-radius: var(--radius-pill); color: var(--text-muted); font-size: 0.78rem; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.12s; white-space: nowrap; } .ck-saved-add:hover { border-color: var(--gold); color: var(--gold-dark); border-style: solid; } /* Search highlight */ mark.ck-mark { background: rgba(255,237,184,0.85); color: inherit; padding: 0 2px; border-radius: 2px; } /* Group header quick add (botao "+") */ .ck-group-quickadd { background: transparent !important; border: none; cursor: pointer; color: var(--gold-dark) !important; opacity: 0; transition: opacity 0.14s var(--ease-out-cubic); } .ck-group:hover .ck-group-quickadd { opacity: 1; } .ck-group-quickadd:hover { background: rgba(202,158,103,0.14) !important; } /* Dark mode adicions */ [data-theme="dark"] .ck-bulk-bar { background: #0F1014; } [data-theme="dark"] .ck-ctx-menu { background: rgba(40,42,75,0.98); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .ck-ctx-item { color: var(--text-body); } [data-theme="dark"] .ck-ctx-item:hover { background: rgba(255,255,255,0.06); } [data-theme="dark"] .ck-qa-btn { background: rgba(40,42,75,0.6); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .ck-qa-btn:hover { background: rgba(202,158,103,0.18); } [data-theme="dark"] .ck-row.ck-pinned { background: rgba(202,158,103,0.06); } [data-theme="dark"] .ck-row.ck-selected { background: rgba(202,158,103,0.18) !important; } [data-theme="dark"] .ck-saved-chip { background: rgba(40,42,75,0.6); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .ck-saved-chip:hover { background: rgba(202,158,103,0.14); } [data-theme="dark"] .ck-date-popover, [data-theme="dark"] .ck-subtask-popover { background: rgba(40,42,75,0.98); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .ck-date-popover input { background: rgba(255,255,255,0.04); color: var(--text-body); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] mark.ck-mark { background: rgba(202,158,103,0.32); color: #fff; } /* Mobile: bulk bar full-width na parte inferior */ @media (max-width: 768px) { .ck-bulk-bar { bottom: 12px; left: 8px; right: 8px; transform: translateY(20px); max-width: none; } .ck-bulk-bar.visible { transform: translateY(0); } .ck-bulk-bar { transform: translateY(20px); } .ck-quick-actions { display: none; } /* Quick actions sao para hover (desktop) */ .ck-actions-menu { opacity: 1; } .ck-saved-filters { width: 100%; } } /* ─── Quick filter chips (preset filters: Hoje/Semana/Mes) ────── */ .quick-filters { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px; } .quick-filters::-webkit-scrollbar { display: none; } .quick-filter { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--white); border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-1), 0 0 0 0.5px var(--border); transition: background var(--duration-fast) var(--ease-out-cubic), color var(--duration-fast) var(--ease-out-cubic), transform var(--duration-fast) var(--ease-out-cubic), box-shadow var(--duration-base) var(--ease-out-cubic); letter-spacing: -0.005em; } .quick-filter:hover { transform: translateY(-1px); color: var(--navy); box-shadow: var(--shadow-2), 0 0 0 0.5px rgba(202,158,103,0.4); } .quick-filter:active { transform: scale(0.97); } .quick-filter.active { background: linear-gradient(180deg, #DDB078 0%, var(--gold) 50%, #B8894F 100%); color: var(--navy); box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.3); } .quick-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: rgba(33,35,77,0.08); border-radius: var(--radius-pill); font-size: 0.66rem; font-weight: 700; } .quick-filter.active .quick-filter-count { background: rgba(33,35,77,0.18); color: var(--navy); } [data-theme="dark"] .quick-filter { background: rgba(255,255,255,0.06); color: var(--cream-mid); } [data-theme="dark"] .quick-filter.active { color: var(--navy); } /* ─── Skeleton list (auto-show enquanto load) ─────────────────── */ .skeleton-list { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; } .skeleton-list .skeleton-card { padding: 14px 16px; } /* ─── Sticky table headers (em listas longas) ────────────────── */ .dash-card-body .table-responsive, .table-scroll { position: relative; } .dash-card-body .table thead th, .table.sticky-header thead th { position: sticky; top: 0; z-index: 5; background: var(--material-thick) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 -0.5px 0 var(--border); } [data-theme="dark"] .dash-card-body .table thead th, [data-theme="dark"] .table.sticky-header thead th { background: rgba(40, 42, 75, 0.92) !important; } /* ─── Sticky filter bar (cola ao top quando scroll) ──────────── */ .filter-bar.sticky, .filter-bar[data-sticky="true"] { position: sticky; top: var(--topbar-h); z-index: 30; background: var(--material-thick); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); padding: 12px 0; margin: 0 -24px 16px; padding-left: 24px; padding-right: 24px; box-shadow: 0 1px 0 var(--border); } @media (max-width: 768px) { .filter-bar.sticky, .filter-bar[data-sticky="true"] { margin: 0 -12px 12px; padding-left: 12px; padding-right: 12px; top: 52px; } } /* ─── Auto-save drafts indicator (badge subtil) ──────────────── */ .draft-saved-badge { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(60px); background: var(--material-ultra-thick); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 0.5px solid rgba(255,255,255,0.4); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 0.8rem; font-weight: 600; color: var(--ios-green-text); box-shadow: var(--shadow-3); z-index: 9990; opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.32s var(--ease-spring); display: inline-flex; align-items: center; gap: 6px; } .draft-saved-badge.visible { opacity: 1; transform: translateX(-50%) translateY(0); } .draft-saved-badge svg { width: 14px; height: 14px; } /* ─── Long-press context menu (mobile alternative to right-click) ── */ .context-menu { position: fixed; background: var(--material-ultra-thick); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 0.5px solid rgba(255,255,255,0.4); border-radius: var(--radius-md); box-shadow: var(--shadow-4); padding: 6px; min-width: 180px; z-index: 10000; display: none; animation: ls-popover-in 0.2s var(--ease-out-expo); } .context-menu.open { display: block; } .context-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-xs); font-size: 0.86rem; color: var(--navy); cursor: pointer; transition: background var(--duration-fast) var(--ease-out-cubic); text-decoration: none; } .context-menu-item:hover { background: rgba(33,35,77,0.06); color: var(--navy); } .context-menu-item.danger { color: var(--ios-red-text); } .context-menu-item.danger:hover { background: var(--ios-red-bg); color: var(--ios-red-text); } .context-menu-divider { height: 0.5px; background: var(--border); margin: 4px 0; } /* ─── Swipe-to-delete (mobile rows) ──────────────────────────── */ .swipe-row, .clickable-row[data-swipe], .lead-row-card[data-swipe] { position: relative; will-change: transform; touch-action: pan-y; } .swipe-row::before, .clickable-row[data-swipe]::before, .lead-row-card[data-swipe]::before { content: "Eliminar"; position: absolute; right: 0; top: 0; bottom: 0; width: 80px; display: flex; align-items: center; justify-content: center; background: var(--ios-red); color: #fff; font-size: 0.78rem; font-weight: 600; letter-spacing: -0.005em; z-index: -1; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .swipe-active::before { background: linear-gradient(90deg, var(--ios-red), #C0382B); } .swipe-delete-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: var(--ios-red); color: #fff; border: none; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 600; box-shadow: var(--shadow-2); display: none; cursor: pointer; } .swipe-revealed .swipe-delete-btn { display: block; } /* ─── Theme transition (cross-fade entre light/dark) ─────────── */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.32s var(--ease-out-expo), color 0.28s var(--ease-out-cubic), border-color 0.28s var(--ease-out-cubic), box-shadow 0.32s var(--ease-out-cubic), fill 0.28s var(--ease-out-cubic), stroke 0.28s var(--ease-out-cubic) !important; } /* ─── Tooltips Apple-style (data-tooltip="texto") ─────────────── */ [data-tooltip] { position: relative; } [data-tooltip]::after { /* DESATIVADO (2026-06-06): o tooltip flutuante em JS (.ap-tooltip-pop, panel.js apTooltipInit) ja renderiza o data-tooltip. Existiam DOIS tooltips no mesmo elemento (este ::after + o flutuante) -> o texto aparecia a dobrar (um maior, um menor). Mantem-se o JS por ser position:fixed (escapa ao overflow), com auto-flip e seta. */ content: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px) scale(0.95); background: rgba(33, 35, 77, 0.94); color: var(--cream); font-size: 0.72rem; font-weight: 600; padding: 5px 10px; border-radius: var(--radius-xs); white-space: nowrap; pointer-events: none; opacity: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-2); transition: opacity 0.18s var(--ease-out-cubic) 0.4s, transform 0.18s var(--ease-spring) 0.4s; z-index: 1000; letter-spacing: -0.005em; } [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } @media (hover: none) { [data-tooltip]::after { display: none; } } /* Tooltips em elementos na topbar (e botões à direita) aparecem ABAIXO em vez de acima */ .topbar [data-tooltip]::after, [data-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 6px); transform: translateX(-50%) translateY(-4px) scale(0.95); } .topbar [data-tooltip]:hover::after, .topbar [data-tooltip]:focus-visible::after, [data-tooltip-pos="bottom"]:hover::after, [data-tooltip-pos="bottom"]:focus-visible::after { transform: translateX(-50%) translateY(0) scale(1); } /* Botões mais à direita da topbar: tooltip alinha à direita para não cair fora */ .topbar-actions > *:nth-last-child(-n+3) [data-tooltip]::after, .topbar-actions > *:nth-last-child(-n+3)[data-tooltip]::after { left: auto; right: 0; transform: translateX(0) translateY(-4px) scale(0.95); } .topbar-actions > *:nth-last-child(-n+3) [data-tooltip]:hover::after, .topbar-actions > *:nth-last-child(-n+3)[data-tooltip]:hover::after, .topbar-actions > *:nth-last-child(-n+3) [data-tooltip]:focus-visible::after, .topbar-actions > *:nth-last-child(-n+3)[data-tooltip]:focus-visible::after { transform: translateX(0) translateY(0) scale(1); } /* ─── Global loading progress bar (top of page) ───────────────── */ .global-loader { position: fixed; top: 0; left: 0; width: 0; height: 2.5px; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 50%, var(--gold) 100%); background-size: 200% 100%; box-shadow: 0 0 8px rgba(202,158,103,0.6); z-index: 99999; transition: width 0.3s var(--ease-out-expo), opacity 0.3s ease-out; pointer-events: none; animation: ls-loader-shimmer 1.4s linear infinite; } .global-loader.done { opacity: 0; } @keyframes ls-loader-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ─── Ghost button variant (text only com hover bg) ───────────── */ .btn-ghost { background: transparent; color: var(--navy); border-color: transparent; box-shadow: none; } .btn-ghost:hover { background: rgba(33,35,77,0.06); color: var(--navy); } [data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--cream); } /* ─── Skeleton: card preset (substitui aria-busy nas listas) ──── */ .skeleton-card { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-1), 0 0 0 0.5px var(--border); padding: 16px; display: flex; gap: 12px; } .skeleton-card .skeleton-circle { width: 40px; height: 40px; flex-shrink: 0; } .skeleton-card .skeleton-content { flex: 1; } .skeleton-card .skeleton-content .skeleton-line:first-child { width: 60%; } .skeleton-card .skeleton-content .skeleton-line:last-child { width: 90%; } /* ─── Settings (iOS Settings app style) ──────────────────────── */ .settings-section { } .settings-section-header { display: flex; align-items: center; gap: 10px; padding: 14px 4px 8px; } .settings-section-header h3 { font-size: 0.74rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; } .settings-section-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-xs); flex-shrink: 0; } .settings-section-icon-blue { background: var(--ios-blue-bg); color: var(--ios-blue); } .settings-section-icon-orange { background: var(--ios-orange-bg); color: var(--ios-orange); } .settings-section-icon-green { background: var(--ios-green-bg); color: var(--ios-green); } .settings-section-icon-purple { background: var(--ios-purple-bg); color: var(--ios-purple); } .settings-section-icon-red { background: var(--ios-red-bg); color: var(--ios-red); } .settings-section-icon-gray { background: var(--ios-gray-bg); color: var(--ios-gray); } .settings-section-icon-gold { background: rgba(202,158,103,0.15); color: var(--gold-dark); } .settings-list { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-1), 0 0 0 0.5px var(--border); overflow: hidden; } .settings-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 18px; border-bottom: 0.5px solid var(--border); transition: background var(--duration-fast) var(--ease-out-cubic); } .settings-row:last-child { border-bottom: none; } .settings-row:hover { background: rgba(202,158,103,0.04); } .settings-row-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .settings-row-label label { font-size: 0.92rem; font-weight: 600; color: var(--navy); letter-spacing: -0.012em; cursor: pointer; } .settings-row-hint { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; letter-spacing: -0.005em; } .settings-row-input { flex-shrink: 0; min-width: 200px; } .settings-row-input input { width: 100%; padding: 8px 12px; background: var(--cream-mid); border: 1px solid transparent; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.88rem; color: var(--text-dark); text-align: right; transition: background var(--duration-fast) var(--ease-out-cubic), border-color var(--duration-fast) var(--ease-out-cubic), box-shadow var(--duration-fast) var(--ease-out-cubic); } .settings-row-input input:hover { background: var(--cream); } .settings-row-input input:focus { background: var(--white); border-color: var(--gold); outline: none; box-shadow: 0 0 0 4px rgba(202,158,103,0.15); } [data-theme="dark"] .settings-list { background: rgba(40,42,75,0.6); } [data-theme="dark"] .settings-row:hover { background: rgba(255,255,255,0.04); } [data-theme="dark"] .settings-row-input input { background: rgba(255,255,255,0.06); color: var(--cream-mid); } [data-theme="dark"] .settings-row-input input:focus { background: rgba(255,255,255,0.1); box-shadow: 0 0 0 4px rgba(202,158,103,0.2); } @media (max-width: 640px) { .settings-row { flex-direction: column; gap: 8px; align-items: stretch; padding: 14px 16px; } .settings-row-input { min-width: 0; } .settings-row-input input { text-align: left; } } .settings-save { display: flex; justify-content: flex-end; gap: 10px; } /* ─── Empty states (variante simples e variante card) ────────── */ .empty-state { text-align: center; color: var(--text-muted); padding: 24px 16px; font-size: 0.88rem; letter-spacing: -0.005em; } /* Tabela: empty state como td */ td.empty-state { padding: 40px 16px !important; color: var(--text-muted); font-size: 0.88rem; } /* Card-style empty state (mais rico, com icone) */ .empty-state-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; text-align: center; color: var(--text-muted); font-size: 0.88rem; gap: 4px; } .empty-state-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--ios-gray-bg); color: var(--ios-gray); border-radius: 50%; margin-bottom: 14px; box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.4); } .empty-state-icon svg { width: 30px; height: 30px; opacity: 0.8; stroke-linecap: round; stroke-linejoin: round; } .empty-state-card h3, .empty-state-card strong { font-size: 1.05rem; font-weight: 700; color: var(--navy); letter-spacing: -0.018em; margin: 0 0 4px; } .empty-state-card p { font-size: 0.88rem; margin: 0 0 16px; max-width: 320px; line-height: 1.5; } /* ─── Settings-style forms: inputs full width on mobile ───────── */ @media (max-width: 768px) { .settings-form input, .settings-form select, .settings-form textarea, form input[type="text"]:not(.filter-input):not(.chip), form input[type="email"], form input[type="tel"], form input[type="number"], form input[type="password"], form input[type="date"], form select:not(.filter-select), form textarea { width: 100% !important; max-width: 100% !important; } } /* ═══════════════════════════════════════════════════════════════ */ /* FASE 5 — DETAIL PAGES & EDGE CASES */ /* ═══════════════════════════════════════════════════════════════ */ /* ─── Renovacoes calendar: hide on narrow mobile, list only ───── */ @media (max-width: 600px) { /* In renovacoes.php, .lead-grid contains calendar + list */ .lead-grid[style*="1fr 320px"] > .dash-card:first-child .dash-card-body { padding: 4px !important; } /* Calendar becomes compact: tiny day cells, dot indicator only */ .lead-grid[style*="1fr 320px"] > .dash-card:first-child table th { font-size: 0.6rem !important; padding: 4px 2px !important; } .lead-grid[style*="1fr 320px"] > .dash-card:first-child table td { min-height: 44px !important; padding: 2px !important; vertical-align: top !important; } /* Inside compact cell: only show day number + badge with count */ .lead-grid[style*="1fr 320px"] > .dash-card:first-child table td > div:first-child { font-size: 0.7rem !important; } .lead-grid[style*="1fr 320px"] > .dash-card:first-child table td a[style*="display:block"] { display: none !important; } .lead-grid[style*="1fr 320px"] > .dash-card:first-child table td > div[style*="+"] { font-size: 0.55rem !important; } /* Show a single dot indicator where renewals exist */ .lead-grid[style*="1fr 320px"] > .dash-card:first-child table td:has(a[style*="display:block"])::after { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); margin: 2px auto 0; } /* List (right side) gets visual priority — push up via flex order */ .lead-grid[style*="1fr 320px"] { display: flex !important; flex-direction: column-reverse !important; gap: 14px !important; } } /* ─── produtos.php insurer selector: 2-col grid on mobile ─────── */ @media (max-width: 600px) { .ins-selector { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .ins-btn { padding: 10px !important; flex-direction: column !important; text-align: center; gap: 4px !important; } .ins-btn-info { text-align: center; } .ins-btn-name { font-size: 0.78rem; } .ins-btn-count { font-size: 0.65rem; } .ins-btn-icon, .ins-btn-logo { margin: 0 auto; } } /* ─── Tables without data-label (fall back to horizontal scroll) ─ */ @media (max-width: 768px) { .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; margin: 0 -12px; padding: 0 12px 4px; } .table-scroll-hint { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; } /* Make tables that DON'T have data-label on td stay as tables (scroll horizontally) */ .table-fallback-scroll { display: table !important; width: max-content !important; min-width: 100%; } .table-fallback-scroll thead { display: table-header-group !important; } .table-fallback-scroll tbody { display: table-row-group !important; } .table-fallback-scroll tr { display: table-row !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } .table-fallback-scroll td, .table-fallback-scroll th { display: table-cell !important; padding: 10px !important; white-space: nowrap; font-size: 0.78rem; } .table-fallback-scroll td::before { display: none !important; } } /* ─── CSV preview table (importar.php): horizontal scroll + tight ─ */ @media (max-width: 768px) { [class*="preview"] table, [id*="preview"] table { font-size: 0.72rem !important; min-width: 100%; table-layout: auto; } } /* ─── Form spacing on mobile: breathing room between fields ────── */ @media (max-width: 768px) { .form-group { margin-bottom: 14px !important; } .form-group label { margin-bottom: 4px; display: block; } .form-grid .form-group:last-child { margin-bottom: 0 !important; } /* Form submit buttons get wider tap target */ form button[type="submit"] { min-height: 48px; font-size: 0.94rem; } } /* ─── Confirmation modal (custom — replaces native confirm()) ──── */ .ls-confirm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10002; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; animation: ls-fade-in 0.18s ease-out forwards; } .ls-confirm-card { background: var(--white); border-radius: 16px; padding: 24px 20px 16px; max-width: 360px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: ls-scale-in 0.22s cubic-bezier(0.16, 1, 0.3, 1); } .ls-confirm-card h3 { font-size: 1rem; color: var(--navy); margin: 0 0 8px; font-weight: 700; } .ls-confirm-card p { font-size: 0.86rem; color: var(--text-muted); margin: 0 0 20px; line-height: 1.4; } .ls-confirm-actions { display: flex; gap: 8px; flex-direction: column; } .ls-confirm-btn { min-height: 48px; border-radius: 10px; border: 0; font-size: 0.9rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: opacity 0.15s; } .ls-confirm-btn:active { opacity: 0.7; } .ls-confirm-btn-primary { background: var(--navy); color: var(--cream-mid); } .ls-confirm-btn-danger { background: #E74C3C; color: #fff; } .ls-confirm-btn-cancel { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } @keyframes ls-fade-in { to { opacity: 1; } } @keyframes ls-scale-in { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } [data-theme="dark"] .ls-confirm-card { background: #1E2039; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } /* ─── Notifications list item: wrap properly on mobile ─────────── */ @media (max-width: 768px) { .followup-item, .notif-item { flex-wrap: wrap !important; gap: 6px 10px !important; } .followup-item > a, .notif-item > a { min-width: 0; flex: 1 1 100%; word-break: break-word; } } /* ─── Long numeric content in table cells: prevent overflow ────── */ @media (max-width: 768px) { .table td[data-label*="Apolice"], .table td[data-label*="Numero"], .table td[data-label*="Ref"], .table td[data-label*="NIF"], .table td[data-label*="Email"] { word-break: break-all; overflow-wrap: anywhere; } } /* ═══════════════════════════════════════════════════════════════ */ /* FASE 6 — FORM LOADING + PWA INSTALL */ /* ═══════════════════════════════════════════════════════════════ */ /* ─── Form submit spinner ─────────────────────────────────────── */ .btn-loading { opacity: 0.75; cursor: progress !important; pointer-events: none; } .btn-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ls-spin 0.7s linear infinite; vertical-align: middle; } /* ─── PWA install banner ──────────────────────────────────────── */ .pwa-install-banner { position: fixed; bottom: calc(var(--bottom-nav-h, 60px) + 12px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; background: var(--navy); color: var(--cream-mid); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 30px rgba(33, 35, 77, 0.35); z-index: 95; transform: translateY(calc(100% + 80px)); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); max-width: 500px; margin: 0 auto; } .pwa-install-banner.visible { transform: translateY(0); } .pwa-install-banner svg { width: 32px; height: 32px; color: var(--gold); flex-shrink: 0; } .pwa-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .pwa-banner-text strong { font-size: 0.88rem; font-weight: 700; color: var(--cream-mid); } .pwa-banner-text span { font-size: 0.74rem; opacity: 0.75; } .pwa-banner-text b { color: var(--gold); font-weight: 700; } .pwa-banner-install { flex-shrink: 0; background: var(--gold); color: var(--navy); border: 0; padding: 10px 16px; border-radius: 10px; font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: inherit; min-height: 40px; transition: transform 0.15s; } .pwa-banner-install:active { transform: scale(0.95); } .pwa-banner-close { flex-shrink: 0; background: transparent; color: var(--cream-mid); border: 0; font-size: 1.4rem; line-height: 1; width: 32px; height: 32px; opacity: 0.6; cursor: pointer; border-radius: 50%; font-family: inherit; } .pwa-banner-close:active { opacity: 1; background: rgba(255,255,255,0.08); } /* iOS hint variant — simpler (no install button, just dismiss) */ .pwa-ios-hint { flex-wrap: wrap; } .pwa-ios-hint .pwa-banner-text span { font-size: 0.72rem; opacity: 0.85; } /* Only show banner on mobile; hidden on larger screens */ @media (min-width: 769px) { .pwa-install-banner { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ */ /* iOS POLISH LAYER (final refinements) */ /* ═══════════════════════════════════════════════════════════════ */ /* ─── Dropdown popovers (search results, notif menu) ──────────── */ .global-search-results { background: var(--material-ultra-thick) !important; backdrop-filter: var(--material-blur-strong); -webkit-backdrop-filter: var(--material-blur-strong); border: 1px solid rgba(255,255,255,0.4) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-4) !important; overflow: hidden; } [data-theme="dark"] .global-search-results { background: var(--material-ultra-thick) !important; border-color: rgba(255,255,255,0.08) !important; } /* Generic popover utility */ .popover { background: var(--material-ultra-thick); backdrop-filter: var(--material-blur-strong); -webkit-backdrop-filter: var(--material-blur-strong); border: 1px solid rgba(255,255,255,0.4); border-radius: var(--radius-md); box-shadow: var(--shadow-4); padding: 6px; animation: ls-popover-in 0.22s var(--ease-out-expo); transform-origin: top right; } @keyframes ls-popover-in { from { opacity: 0; transform: scale(0.95) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } } .popover-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-xs); font-size: 0.85rem; color: var(--navy); cursor: pointer; transition: background var(--duration-fast) var(--ease-out-cubic); text-decoration: none; } .popover-item:hover { background: rgba(33,35,77,0.05); color: var(--navy); } .popover-item.danger:hover { background: rgba(255,59,48,0.08); color: #FF3B30; } .popover-divider { height: 1px; background: var(--border); margin: 4px 0; } [data-theme="dark"] .popover-item:hover { background: rgba(255,255,255,0.08); color: var(--cream-mid); } /* ─── Refined toast (glass + shadow + radius) ──────────────────── */ .toast { padding: 14px 18px !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-4) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); font-size: 0.85rem !important; letter-spacing: -0.005em; border: 0.5px solid rgba(255,255,255,0.15); animation: ls-toast-spring 0.4s var(--ease-spring), toastOut 0.3s ease 2.7s forwards !important; } @keyframes ls-toast-spring { from { opacity: 0; transform: translateY(20px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } } .toast-success { background: linear-gradient(180deg, rgba(52,199,89,0.96), rgba(39,174,96,0.96)) !important; } .toast-error { background: linear-gradient(180deg, rgba(255,59,48,0.96), rgba(231,76,60,0.96)) !important; } .toast-info { background: linear-gradient(180deg, rgba(46,49,90,0.96), rgba(33,35,77,0.96)) !important; } /* ─── Hairline borders (0.5px on retina) ───────────────────────── */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .hairline-top { box-shadow: inset 0 0.5px 0 var(--border); border-top: 0; } .hairline-bottom { box-shadow: inset 0 -0.5px 0 var(--border); border-bottom: 0; } } /* ─── Card focus-within glow (when input inside card is focused) ── */ .dash-card:focus-within, .info-card:focus-within { box-shadow: var(--shadow-3), 0 0 0 1px rgba(202,158,103,0.2); transition: box-shadow var(--duration-base) var(--ease-out-cubic); } /* ─── Refined hover states (more delicate) ─────────────────────── */ .table-hover tbody tr:hover { background: rgba(202,158,103,0.05); } .table-hover tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--gold); } .client-row:hover, .clickable-row:hover { background: rgba(202,158,103,0.04); } /* ─── Stagger animation (smoother springy) ─────────────────────── */ @media (prefers-reduced-motion: no-preference) { .stats-grid > .stat-card, .dashboard-grid > .dash-card { animation: ls-card-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .stats-grid > .stat-card:nth-child(1), .dashboard-grid > .dash-card:nth-child(1) { animation-delay: 0.05s; } .stats-grid > .stat-card:nth-child(2), .dashboard-grid > .dash-card:nth-child(2) { animation-delay: 0.1s; } .stats-grid > .stat-card:nth-child(3), .dashboard-grid > .dash-card:nth-child(3) { animation-delay: 0.15s; } .stats-grid > .stat-card:nth-child(4), .dashboard-grid > .dash-card:nth-child(4) { animation-delay: 0.2s; } .stats-grid > .stat-card:nth-child(n+5) { animation-delay: 0.25s; } } @keyframes ls-card-rise { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ─── Page header refinement (Large Title style iOS) ───────────── */ .page-header h1, h1.page-title { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.028em; line-height: 1.15; color: var(--navy); margin-bottom: 6px; } .page-header .page-subtitle, .page-subtitle { font-size: 0.92rem; color: var(--text-muted); letter-spacing: -0.005em; font-weight: 500; } /* ─── Hero header (Large Title iOS — saudação personalizada) ───── */ .hero-header { padding: 8px 0 18px; margin-bottom: 4px; } .hero-eyebrow { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); letter-spacing: -0.005em; text-transform: capitalize; margin-bottom: 2px; } .hero-title { font-size: 2.05rem; font-weight: 800; letter-spacing: -0.034em; line-height: 1.1; color: var(--navy); margin: 0; } @media (max-width: 768px) { .hero-header { padding: 4px 0 14px; } .hero-title { font-size: 1.6rem; letter-spacing: -0.028em; } .hero-eyebrow { font-size: 0.72rem; } } [data-theme="dark"] .hero-title { color: var(--text-dark); } /* ─── Topbar large-title shrink on scroll ─── */ /* Mantemos o titulo a encolher mas o background continua = var(--cream) (mesma cor do body) para o topbar ficar visualmente integrado. */ body.is-scrolled .topbar-title { font-size: 1rem; transition: font-size var(--duration-base) var(--ease-out-cubic); } /* ─── Toast position: top center (iOS notification feel) ─────── */ .toast-container { bottom: auto !important; right: auto !important; top: calc(env(safe-area-inset-top, 0px) + 12px) !important; left: 50% !important; transform: translateX(-50%) !important; flex-direction: column !important; align-items: center !important; } .toast { min-width: 220px; max-width: 380px !important; text-align: center; } @media (max-width: 768px) { .toast-container { top: calc(env(safe-area-inset-top, 0px) + 8px) !important; left: 12px !important; right: 12px !important; transform: none !important; max-width: none; } .toast { max-width: none !important; } } /* ─── Pull-to-refresh indicator (PWA mobile, Apple iOS-style) ── */ .ptr-indicator { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 6px); left: 50%; transform: translateX(-50%) scale(0.6); height: 36px; padding: 0 14px 0 8px; border-radius: 100px; background: rgba(255, 254, 243, 0.92); backdrop-filter: saturate(200%) blur(28px); -webkit-backdrop-filter: saturate(200%) blur(28px); border: 0.5px solid rgba(0, 0, 0, 0.06); box-shadow: 0 8px 24px rgba(33, 35, 77, 0.18), 0 2px 6px rgba(33, 35, 77, 0.10); display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); font: 600 12px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.022em; color: var(--navy); } .ptr-indicator.visible { opacity: 1; } .ptr-indicator .ptr-arrow { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--gold); transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); } .ptr-indicator .ptr-spinner { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--gold); animation: ls-spin 0.9s linear infinite; } .ptr-indicator .ptr-label { font-weight: 600; color: var(--navy); white-space: nowrap; } .ptr-indicator.loading .ptr-arrow { display: none; } [data-theme="dark"] .ptr-indicator { background: rgba(33, 35, 77, 0.92); border-color: rgba(255, 255, 255, 0.06); color: var(--cream); } [data-theme="dark"] .ptr-indicator .ptr-label { color: var(--cream); } /* ─── Notif popover (clicar sino abre dropdown sem ir para outra pagina) ── */ .notif-popover { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: calc(100vw - 24px); max-height: 480px; background: var(--material-ultra-thick); backdrop-filter: var(--material-blur-strong); -webkit-backdrop-filter: var(--material-blur-strong); border: 1px solid rgba(255,255,255,0.4); border-radius: var(--radius-md); box-shadow: var(--shadow-4); overflow: hidden; display: none; z-index: 200; animation: ls-popover-in 0.22s var(--ease-out-expo); transform-origin: top right; } .notif-popover.open { display: flex; flex-direction: column; } .notif-popover-header { display: flex; align-items: center; justify-content: center; padding: 12px 16px; border-bottom: 0.5px solid var(--border); background: rgba(255,255,255,0.4); flex-shrink: 0; } .notif-popover-header h4 { font-size: 0.95rem; font-weight: 700; color: var(--navy); margin: 0; letter-spacing: -0.018em; } .notif-popover-list { flex: 1; overflow-y: auto; padding: 4px; } .notif-popover-item { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radius-xs); color: var(--navy); text-decoration: none; transition: background var(--duration-fast) var(--ease-out-cubic); font-size: 0.85rem; line-height: 1.4; } .notif-popover-item:hover { background: rgba(33,35,77,0.06); color: var(--navy); } .notif-popover-item.unread { background: rgba(202,158,103,0.06); } .notif-popover-item.unread:hover { background: rgba(202,158,103,0.12); } .notif-popover-item .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: 6px; } .notif-popover-item .notif-content { flex: 1; min-width: 0; } .notif-popover-item .notif-title { font-weight: 600; } .notif-popover-item .notif-meta { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; } .notif-popover-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 0.85rem; } .notif-popover-footer { border-top: 0.5px solid var(--border); padding: 8px; flex-shrink: 0; } .notif-popover-footer a { display: block; text-align: center; padding: 8px; font-size: 0.84rem; font-weight: 600; color: var(--gold-dark); border-radius: var(--radius-xs); transition: background var(--duration-fast) var(--ease-out-cubic); } .notif-popover-footer a:hover { background: rgba(202,158,103,0.08); } [data-theme="dark"] .notif-popover { border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .notif-popover-header { background: rgba(255,255,255,0.04); } [data-theme="dark"] .notif-popover-item:hover { background: rgba(255,255,255,0.08); color: var(--cream); } @media (max-width: 768px) { .notif-popover { right: -8px; width: calc(100vw - 24px); } } /* ─── Dark mode refinements (vibrancy + glow) ──────────────────── */ [data-theme="dark"] .modal-card { background: rgba(30, 32, 60, 0.92); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.5); } [data-theme="dark"] *:focus-visible { box-shadow: 0 0 0 4px rgba(202,158,103,0.35), 0 0 0 1px var(--gold); } [data-theme="dark"] .stat-card, [data-theme="dark"] .dash-card, [data-theme="dark"] .info-card { background: linear-gradient(180deg, rgba(40,42,75,0.6), rgba(33,35,77,0.6)); border-color: rgba(255,255,255,0.06); } [data-theme="dark"] .topbar-user-avatar { background: linear-gradient(135deg, #2E315A 0%, #1A1C3F 100%); color: var(--text-dark); box-shadow: 0 0 0 2px var(--gold), 0 2px 8px rgba(0,0,0,0.4), inset 0 0.5px 0 rgba(255,255,255,0.1); } [data-theme="dark"] .btn-outline { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: var(--text-body); } [data-theme="dark"] .btn-outline:hover { background: rgba(255,255,255,0.08); border-color: var(--gold); color: var(--gold); } [data-theme="dark"] .alert { backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); } [data-theme="dark"] .alert-error { background: rgba(255,59,48,0.15); color: #FF6B5E; border-color: rgba(255,59,48,0.3); } [data-theme="dark"] .alert-warning { background: rgba(255,204,0,0.12); color: #FFD60A; border-color: rgba(255,204,0,0.25); } [data-theme="dark"] .alert-success { background: rgba(52,199,89,0.15); color: #4ADE80; border-color: rgba(52,199,89,0.3); } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea, [data-theme="dark"] .filter-input, [data-theme="dark"] .filter-select { background: rgba(255,255,255,0.06); color: var(--cream-mid); border-color: transparent; } [data-theme="dark"] .form-group input:hover, [data-theme="dark"] .form-group select:hover, [data-theme="dark"] .filter-input:hover, [data-theme="dark"] .filter-select:hover { background: rgba(255,255,255,0.09); } [data-theme="dark"] .form-group input:focus, [data-theme="dark"] .form-group select:focus, [data-theme="dark"] .form-group textarea:focus, [data-theme="dark"] .filter-input:focus, [data-theme="dark"] .filter-select:focus { background: rgba(255,255,255,0.1); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(202,158,103,0.2); } /* ─── Prefer-color-scheme automatic dark (when no theme set) ────── */ /* (already handled by [data-theme] attribute, no extra needed) */ /* ─── Long-press / touch feedback (iOS style) ──────────────────── */ @media (hover: none) { .btn:hover, .nav-item:hover, .stat-card:hover, .dash-card:hover { background: revert; transform: none; box-shadow: revert; } } /* ─── Print refinements (clean iOS-like) ───────────────────────── */ @media print { .topbar, .sidebar, .fab, .toast-container, .global-search, .pwa-install-banner, .menu-btn, .theme-toggle, .modal-overlay, .bottom-nav { display: none !important; } body { background: white !important; } .main-content { margin-left: 0 !important; } .stat-card, .dash-card, .info-card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; } } /* ─── Respect user reduced motion preferences ─────────────────── */ @media (prefers-reduced-motion: reduce) { .page-content > *, .fab, .modal-card, .ripple-ink, .bottom-nav-item svg, .stats-grid > .stat-card, .dashboard-grid > .dash-card, .notif-badge, .toast { animation: none !important; transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════ APPLE LAYER - Painel adoptando design system Apple (DESIGN.md) Fonte: voltagent/awesome-design-md/design-md/apple/DESIGN.md Filosofia: "Photography-first; UI recedes so content can speak." ═══════════════════════════════════════════════════════════════════ */ :root { /* Apple semantic mapping (mantem brand Lusoseg) */ --ap-action: var(--gold); /* Gold = Action color da Lusoseg */ --ap-action-focus: var(--gold-dark); --ap-action-on-dark: #E0B883; /* Surface mode (light) */ --ap-canvas: #FFFFFF; --ap-parchment: #FAFAFA; --ap-pearl: #FCFCFC; --ap-tile-1: var(--navy); --ap-tile-2: #252748; --ap-tile-3: #1E1F44; --ap-true-black: #000000; --ap-chip-translucent: rgba(33,35,77,0.16); /* Text */ --ap-ink: var(--navy); --ap-ink-muted-80: #4A4C6A; --ap-ink-muted-48: #9899AC; --ap-on-dark: #FFFFFF; --ap-on-dark-muted: #CCCCCC; /* Hairlines */ --ap-hairline: rgba(33,35,77,0.10); --ap-divider-soft: rgba(33,35,77,0.04); /* Spacing (8-pt base, Apple-correct) */ --sp-xxs: 4px; --sp-xs: 8px; --sp-sm: 12px; --sp-md: 17px; --sp-lg: 24px; --sp-xl: 32px; --sp-xxl: 48px; --sp-section: 80px; /* Radius (Apple-correct) */ --r-none: 0; --r-xs: 5px; --r-sm-ap: 8px; --r-md-ap: 11px; --r-lg-ap: 18px; --r-pill-ap: 9999px; /* Typography sizes (DESIGN.md) */ --t-hero-display: 56px; --t-display-lg: 40px; --t-display-md: 34px; --t-lead: 28px; --t-lead-airy: 24px; --t-tagline: 21px; --t-body-ap: 17px; --t-caption-ap: 14px; --t-fine-print: 12px; --t-micro-legal: 10px; --t-nav-link: 12px; /* The signature product shadow (used ONLY on imagery resting on a surface) */ --ap-product-shadow: 3px 5px 30px 0 rgba(0,0,0,0.22); /* Backdrop blur Apple-standard */ --ap-blur: saturate(180%) blur(20px); } /* ─── 1. APPLE TYPE SCALE ────────────────────────────────────────── */ .ap-hero-display { font: 600 var(--t-hero-display)/1.07 -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif; letter-spacing: -0.28px; } .ap-display-lg { font: 600 var(--t-display-lg)/1.10 -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif; letter-spacing: 0; } .ap-display-md { font: 600 var(--t-display-md)/1.47 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.374px; } .ap-lead { font: 400 var(--t-lead)/1.14 -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif; letter-spacing: 0.196px; } .ap-lead-airy { font: 300 var(--t-lead-airy)/1.5 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; } .ap-tagline { font: 600 var(--t-tagline)/1.19 -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif; letter-spacing: 0.231px; } .ap-body-strong { font: 600 var(--t-body-ap)/1.24 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.374px; } .ap-body { font: 400 var(--t-body-ap)/1.47 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.374px; } .ap-caption { font: 400 var(--t-caption-ap)/1.43 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.224px; } .ap-caption-strong { font: 600 var(--t-caption-ap)/1.29 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.224px; } .ap-fine-print { font: 400 var(--t-fine-print)/1.0 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.12px; } .ap-nav-link { font: 400 var(--t-nav-link)/1.0 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.12px; } /* ─── 2. GLOBAL OVERRIDES (Apple-tighten) ─────────────────────────── */ /* Body 17px (Apple quirk - "the extra pixel defines the brand's reading pace") */ body { font-size: var(--t-body-ap); line-height: 1.47; letter-spacing: -0.374px; } /* Headlines com negative tracking (Apple tight) */ h1, h2, h3, h4, h5 { letter-spacing: -0.022em; } h1 { letter-spacing: -0.028em; } h2 { letter-spacing: -0.025em; } /* Eliminar peso 500 (Apple ladder: 300/400/600/700) */ [style*="font-weight:500"], [style*="font-weight: 500"] { font-weight: 600; } /* Universal active scale (Apple's system-wide micro-interaction) */ .btn:active, .btn-gold:active, .btn-outline:active, .btn-sm:active, .btn-login:active, .topbar-btn:active, .theme-toggle:active, .modal-close:active, .filter-pill:active, .nav-item:active, .quick-filter:active, .kanban-tab:active, .segment-btn:active, .cal-mode-btn:active, button:active, [role="button"]:active { transform: scale(0.95); transition: transform 100ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* ─── 3. BUTTONS - Apple grammar (pill total + active scale) ───────── */ /* Primary CTA - pill total, gold (Action color da Lusoseg) */ .btn-gold { border-radius: var(--r-pill-ap); padding: 11px 22px; font: 600 var(--t-body-ap)/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.374px; box-shadow: none; transition: transform 100ms ease-out, background 200ms ease; } .btn-gold:hover { background: var(--gold-dark); box-shadow: none; } /* Secondary ghost pill */ .btn-outline { border-radius: var(--r-pill-ap); padding: 10px 21px; background: transparent; border: 1px solid var(--ap-action); color: var(--ap-action); font: 600 var(--t-body-ap)/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.374px; box-shadow: none; } .btn-outline:hover { background: rgba(202,158,103,0.08); color: var(--gold-dark); border-color: var(--gold-dark); } /* Small variant mantem pill */ .btn-sm { padding: 7px 14px; font-size: var(--t-caption-ap); border-radius: var(--r-pill-ap); letter-spacing: -0.224px; } /* Dark utility button (Apple sign-in / bag style) */ .btn-ap-dark { background: var(--ap-ink); color: var(--ap-on-dark); font: 400 var(--t-caption-ap)/1.29 -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; letter-spacing: -0.224px; border-radius: var(--r-sm-ap); padding: 8px 15px; border: none; cursor: pointer; transition: transform 100ms ease-out; } .btn-ap-dark:active { transform: scale(0.95); } /* ─── 4. CARDS - sem shadow, com hairline (Apple way) ─────────────── */ .dash-card { box-shadow: none; border: 1px solid var(--ap-hairline); border-radius: var(--r-lg-ap); } .dash-card:hover { box-shadow: none; transform: none; } .stat-card { box-shadow: none; border: 1px solid var(--ap-hairline); border-radius: var(--r-lg-ap); } .stat-card:hover { box-shadow: none; transform: none; } .info-card { box-shadow: none; border: 1px solid var(--ap-hairline); border-radius: var(--r-lg-ap); } /* ─── 5. MODAIS - Liquid Glass + spring ──────────────────────────── */ .modal-overlay { background: rgba(33, 35, 77, 0.35); backdrop-filter: var(--ap-blur); -webkit-backdrop-filter: var(--ap-blur); transition: opacity 0.25s ease; } .modal-card { border-radius: var(--r-lg-ap); border: 1px solid var(--ap-hairline); box-shadow: var(--shadow-4); animation: apModalIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; } @keyframes apModalIn { from { transform: scale(0.94) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } /* ─── 6. NAV / SIDEBAR enhancement ────────────────────────────────── */ .topbar { backdrop-filter: var(--ap-blur); -webkit-backdrop-filter: var(--ap-blur); } /* ─── 7. INPUTS - pill style (Apple search) ───────────────────────── */ .filter-input, .otp-input { border-radius: var(--r-pill-ap); padding: 11px 18px; border: 1px solid var(--ap-hairline); font: 400 var(--t-body-ap)/1.47 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.374px; transition: border-color 0.2s, box-shadow 0.2s; } .filter-input:focus { border-color: var(--ap-action); box-shadow: 0 0 0 3px rgba(202,158,103,0.18); outline: none; } /* ─── 8. FOCUS RING (Apple-style) ─────────────────────────────────── */ *:focus-visible { outline: 2px solid var(--ap-action-focus); outline-offset: 2px; border-radius: var(--r-sm-ap); } /* ─── 9. PRODUCT SHADOW (reserved ONLY for imagery) ──────────────── */ .ap-product-shadow { box-shadow: var(--ap-product-shadow); } /* ─── 10. LOGIN PAGE - cinematic Apple-style ─────────────────────── */ body.login-page { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 50%, var(--gold-dark) 100%); background-size: 200% 200%; animation: apBgShift 60s ease-in-out infinite; min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif; } @keyframes apBgShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } body.login-page .login-container { max-width: 420px; width: 100%; padding: 0 24px; } body.login-page .login-card { background: rgba(255, 255, 255, 0.92); backdrop-filter: var(--ap-blur); -webkit-backdrop-filter: var(--ap-blur); border: 0.5px solid rgba(255, 255, 255, 0.5); border-radius: 22px; box-shadow: 0 28px 64px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.5); padding: 40px 32px; animation: apModalIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; } body.login-page .login-logo { text-align: center; margin-bottom: 32px; } body.login-page .login-logo img { width: 88px; height: auto; margin-bottom: 16px; filter: drop-shadow(0 2px 8px rgba(33,35,77,0.15)); } body.login-page .login-logo p { font: 600 var(--t-tagline)/1.19 -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif; letter-spacing: 0.231px; color: var(--navy); margin: 0; } body.login-page .form-group label { font: 600 var(--t-caption-ap)/1.29 -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; letter-spacing: -0.224px; color: var(--ap-ink-muted-80); margin-bottom: 6px; display: block; } body.login-page .form-group input { width: 100%; padding: 12px 18px; border: 1px solid var(--ap-hairline); border-radius: var(--r-pill-ap); font: 400 var(--t-body-ap)/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.374px; color: var(--ap-ink); background: var(--ap-canvas); transition: border-color 0.2s, box-shadow 0.2s; } body.login-page .form-group input:focus { border-color: var(--ap-action); box-shadow: 0 0 0 3px rgba(202,158,103,0.18); outline: none; } body.login-page .btn-login { width: 100%; padding: 14px 22px; background: var(--ap-action); color: #FFFFFF; border: none; border-radius: var(--r-pill-ap); font: 600 var(--t-body-ap)/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.374px; cursor: pointer; transition: transform 100ms ease-out, background 200ms ease; margin-top: 8px; } body.login-page .btn-login:hover { background: var(--gold-dark); } body.login-page .btn-login:active { transform: scale(0.97); } body.login-page .login-footer { text-align: center; margin-top: 24px; } body.login-page .login-footer a { font: 400 var(--t-caption-ap)/1.43 -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; letter-spacing: -0.224px; color: var(--ap-ink-muted-48); text-decoration: none; } body.login-page .login-footer a:hover { color: var(--ap-action); } body.login-page .alert-error { background: rgba(255,59,48,0.10); border: 1px solid rgba(255,59,48,0.25); color: #C0382B; border-radius: var(--r-md-ap); padding: 12px 16px; font: 400 var(--t-caption-ap)/1.43 -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; letter-spacing: -0.224px; margin-bottom: 20px; } /* ─── 11. RESPECT REDUCED MOTION (expanded) ──────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } body.login-page { animation: none; } } /* ─── 12. LUCIDE ICONS in buttons (inline SVG alignment) ─────────── */ .btn svg.lucide, .btn-gold svg.lucide, .btn-outline svg.lucide, .btn-sm svg.lucide, button svg.lucide, a.btn svg.lucide { display: inline-block; vertical-align: -3px; margin-right: 6px; flex-shrink: 0; } /* Quando SVG está sozinho num botão (icon-only), remover margin */ .btn-icon-only svg.lucide, button.icon-only svg.lucide, .topbar-btn svg.lucide { margin-right: 0; vertical-align: middle; } /* SVG em headings - tighter alignment */ h1 svg.lucide, h2 svg.lucide, h3 svg.lucide, h4 svg.lucide { vertical-align: -3px; margin-right: 8px; opacity: 0.85; } /* ─── 13. SIDEBAR APPLE-CLEAN (single tone, hairlines, sf-symbols feel) ─ */ .sidebar { background: var(--navy); box-shadow: none; border-right: 1px solid rgba(255, 255, 255, 0.05); } .sidebar-header { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .sidebar-section-title { font: 600 11px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: 0.06em; color: rgba(255, 254, 243, 0.32); padding: 14px 14px 6px; text-transform: uppercase; } .nav-item { font: 400 14px/1.3 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.012em; color: rgba(255, 254, 243, 0.7); padding: 9px 14px; border-radius: 9px; margin-bottom: 1px; gap: 12px; transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); position: relative; overflow: hidden; } /* Apple soft hover ripple gradient */ .nav-item::after { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at var(--mx, 50%) var(--my, 50%), rgba(255, 254, 243, 0.08) 0%, transparent 60% ); opacity: 0; transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; border-radius: inherit; } .nav-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--cream); } .nav-item:hover::after { opacity: 1; } .nav-item:active { transform: scale(0.97); transition-duration: 0.10s; } .nav-item.active { background: linear-gradient( 135deg, rgba(202, 158, 103, 0.22) 0%, rgba(202, 158, 103, 0.14) 100% ); color: var(--gold); font-weight: 600; box-shadow: inset 0 1px 0 rgba(202, 158, 103, 0.12), 0 1px 2px rgba(0, 0, 0, 0.10); } .nav-item.active::before { background: var(--gold); width: 3px; height: 16px; left: -10px; box-shadow: 0 0 8px rgba(202, 158, 103, 0.5); border-radius: 0 2px 2px 0; transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); } .nav-item.active svg { stroke: var(--gold); filter: drop-shadow(0 0 6px rgba(202, 158, 103, 0.3)); stroke-width: 2.2; transition: stroke-width 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } .nav-divider { background: rgba(255, 255, 255, 0.05); margin: 10px 14px; } .sidebar-footer { border-top: 1px solid rgba(255, 255, 255, 0.05); } /* Respeitar reduced motion */ @media (prefers-reduced-motion: reduce) { .nav-item, .nav-item::after, .nav-item.active::before, .nav-item.active svg { transition: none; } .nav-item:active { transform: none; } } /* ─── 14. SPOTLIGHT (Ctrl+K) — Apple Spotlight-style modal ────── */ .spotlight-overlay { position: fixed; inset: 0; background: rgba(33, 35, 77, 0.42); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); z-index: 10000; display: none; align-items: flex-start; justify-content: center; padding-top: 15vh; opacity: 0; transition: opacity 0.2s ease; } .spotlight-overlay.active { display: flex; opacity: 1; } .spotlight-card { width: 100%; max-width: 640px; background: rgba(255, 254, 243, 0.95); backdrop-filter: saturate(200%) blur(40px); -webkit-backdrop-filter: saturate(200%) blur(40px); border: 0.5px solid rgba(255, 255, 255, 0.5); border-radius: 18px; box-shadow: 0 32px 64px rgba(0, 0, 0, 0.3), 0 12px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5); overflow: hidden; animation: spotlightIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; max-height: 70vh; display: flex; flex-direction: column; } @keyframes spotlightIn { from { transform: scale(0.95) translateY(-12px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .spotlight-input-wrap { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(33, 35, 77, 0.08); } .spotlight-input-wrap svg { color: var(--text-muted); flex-shrink: 0; } .spotlight-input { flex: 1; border: none; background: transparent; outline: none; font: 400 22px/1.2 -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif; letter-spacing: -0.022em; color: var(--navy); } .spotlight-input::placeholder { color: var(--text-muted); font-weight: 300; } .spotlight-kbd { background: rgba(33, 35, 77, 0.08); padding: 4px 8px; border-radius: 5px; font: 600 11px/1 -apple-system, BlinkMacSystemFont, 'SF Mono', monospace; letter-spacing: 0; color: var(--text-muted); } .spotlight-results { flex: 1; overflow-y: auto; padding: 8px; } .spotlight-results .gsr-group { font: 600 11px/1.4 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 12px 14px 6px; } .spotlight-results .gsr-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; cursor: pointer; color: var(--navy); text-decoration: none; transition: background 0.15s ease; } .spotlight-results .gsr-item:hover, .spotlight-results .gsr-item.active { background: rgba(202, 158, 103, 0.14); } .spotlight-results .gsr-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(33, 35, 77, 0.06); display: flex; align-items: center; justify-content: center; color: var(--navy); flex-shrink: 0; } .spotlight-results .gsr-title { font: 600 15px/1.3 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.012em; color: var(--navy); } .spotlight-results .gsr-subtitle { font: 400 13px/1.3 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.005em; color: var(--text-muted); } .spotlight-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font: 400 15px/1.4 -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; letter-spacing: -0.012em; } .spotlight-hint { padding: 10px 20px; border-top: 1px solid rgba(33, 35, 77, 0.08); font: 400 12px/1.4 -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; letter-spacing: -0.012em; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; } /* Dark mode */ [data-theme="dark"] .spotlight-card { background: rgba(33, 35, 77, 0.92); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .spotlight-input { color: var(--cream); } [data-theme="dark"] .spotlight-results .gsr-title { color: var(--cream); } [data-theme="dark"] .spotlight-results .gsr-icon { background: rgba(255, 255, 255, 0.08); color: var(--cream); } /* ─── 15. TABLES APPLE-STYLE (hairlines + tabular-nums) ─────────── */ .table { border-collapse: separate; border-spacing: 0; width: 100%; } .table thead th { font: 600 11px/1.4 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding: 10px 14px; border-bottom: 1px solid var(--ap-hairline); /* Fundo OPACO: o cabecalho sticky tem de tapar as linhas ao scroll. 'transparent' deixava ver as linhas atraves do cabecalho (clientes/ cobrancas). Esta regra (.table thead th) vinha DEPOIS da regra sticky e sobrepunha-lhe o background. Dark mode mantem var(--dark-card) por regra mais especifica. */ background: var(--white); text-align: left; font-weight: 600; } .table tbody td { padding: 12px 14px; border-bottom: 0.5px solid var(--ap-hairline); font: 400 var(--t-body-ap)/1.4 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.012em; color: var(--ap-ink); vertical-align: middle; } .table tbody tr { transition: background 0.12s ease; } .table tbody tr:hover, .table-hover tbody tr:hover { background: rgba(33, 35, 77, 0.025); } .table tbody tr:last-child td { border-bottom: none; } /* Tabular numbers em colunas numéricas (cêntimos alinhados) */ .table td strong, .table td code, .table td .text-right, .table .num, .table .amount, .stat-number, .stat-card, .kpi-value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* Dark mode tables */ [data-theme="dark"] .table thead th { color: var(--text-muted); border-color: rgba(255,255,255,0.06); } [data-theme="dark"] .table tbody td { color: var(--cream); border-color: rgba(255,255,255,0.05); } [data-theme="dark"] .table tbody tr:hover { background: rgba(255,255,255,0.03); } /* ─── 16. EMPTY STATES (Apple-clean character) ─────────────────── */ .ap-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 64px 24px; text-align: center; max-width: 420px; margin: 0 auto; } .ap-empty-icon { color: var(--text-muted); opacity: 0.35; } .ap-empty-icon svg { width: 64px; height: 64px; } .ap-empty-title { font: 600 var(--t-display-md)/1.2 -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif; letter-spacing: -0.022em; color: var(--ap-ink); margin: 0; } .ap-empty-body { font: 400 var(--t-body-ap)/1.47 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.012em; color: var(--text-muted); margin: 0; } .ap-empty-cta { margin-top: 8px; } .ap-empty-hint { font: 400 var(--t-caption-ap)/1.4 -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; letter-spacing: -0.012em; color: var(--text-muted); margin: 8px 0 0; } .ap-empty-hint a { color: var(--ap-action); } /* Quando empty-state está dentro de uma table (tbody td colspan) */ .table .ap-empty { padding: 48px 24px; } /* ─── 17. SUB-NAV FROSTED (detail pages Apple-style) ──────────── */ .ap-subnav { position: sticky; top: var(--topbar-h); z-index: 40; background: rgba(255, 254, 243, 0.78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--ap-hairline); margin: 0 -24px 20px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; flex-wrap: wrap; } .ap-subnav-title { font: 600 var(--t-tagline)/1.19 -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif; letter-spacing: 0.231px; color: var(--ap-ink); display: flex; align-items: center; gap: 10px; margin: 0; flex-shrink: 1; min-width: 0; } .ap-subnav-title strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-subnav-tabs { display: flex; gap: 4px; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; } .ap-subnav-tabs::-webkit-scrollbar { display: none; } .ap-subnav-tab { font: 400 var(--t-caption-ap)/1.4 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.224px; color: var(--text-muted); padding: 6px 12px; border-radius: var(--r-pill-ap); text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .ap-subnav-tab:hover { color: var(--ap-ink); background: rgba(33, 35, 77, 0.04); } .ap-subnav-tab.active { color: var(--ap-action); background: rgba(202, 158, 103, 0.12); font-weight: 600; } .ap-subnav-actions { display: flex; gap: 8px; flex-shrink: 0; } /* Smooth scroll quando se clica num anchor link */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 60px); } @media (max-width: 768px) { .ap-subnav { flex-direction: column; align-items: stretch; padding: 12px 16px; gap: 10px; margin: 0 -16px 16px; } .ap-subnav-tabs { order: 2; justify-content: flex-start; } } [data-theme="dark"] .ap-subnav { background: rgba(33, 35, 77, 0.78); border-bottom-color: rgba(255,255,255,0.06); } [data-theme="dark"] .ap-subnav-title { color: var(--cream); } [data-theme="dark"] .ap-subnav-tab:hover { background: rgba(255,255,255,0.06); color: var(--cream); } /* ─── 18. TOAST NOTIFICATIONS (Apple-style) ─────────────────────── */ .ap-toast-container { position: fixed; top: calc(var(--topbar-h) + 16px); right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 380px; } .ap-toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(255, 254, 243, 0.96); backdrop-filter: saturate(200%) blur(30px); -webkit-backdrop-filter: saturate(200%) blur(30px); border: 0.5px solid rgba(255, 255, 255, 0.5); border-radius: var(--r-pill-ap); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5); pointer-events: auto; animation: toastIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; min-width: 240px; } .ap-toast.removing { animation: toastOut 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards; } @keyframes toastIn { from { transform: translateX(120%) scale(0.92); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } @keyframes toastOut { from { transform: translateX(0) scale(1); opacity: 1; } to { transform: translateX(120%) scale(0.92); opacity: 0; } } .ap-toast-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-pill-ap); } .ap-toast-success .ap-toast-icon { background: var(--ios-green-bg); color: var(--ios-green-text); } .ap-toast-error .ap-toast-icon { background: var(--ios-red-bg); color: var(--ios-red-text); } .ap-toast-warning .ap-toast-icon { background: var(--ios-orange-bg);color: var(--ios-orange-text); } .ap-toast-info .ap-toast-icon { background: var(--ios-blue-bg); color: var(--ios-blue-text); } .ap-toast-text { flex: 1; font: 600 var(--t-caption-ap)/1.4 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.224px; color: var(--ap-ink); min-width: 0; } .ap-toast-close { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; flex-shrink: 0; transition: background 0.15s; } .ap-toast-close:hover { background: rgba(33, 35, 77, 0.06); color: var(--ap-ink); } @media (max-width: 768px) { .ap-toast-container { right: 12px; left: 12px; max-width: none; } .ap-toast { width: 100%; } } [data-theme="dark"] .ap-toast { background: rgba(33, 35, 77, 0.94); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .ap-toast-text { color: var(--cream); } [data-theme="dark"] .ap-toast-close:hover { background: rgba(255,255,255,0.06); color: var(--cream); } /* ─── 19. SELECTION COLOR (Gold subtle) ──────────────────────────── */ ::selection { background: rgba(202, 158, 103, 0.32); color: var(--navy); } ::-moz-selection { background: rgba(202, 158, 103, 0.32); color: var(--navy); } [data-theme="dark"] ::selection { background: rgba(202, 158, 103, 0.44); color: var(--cream); } [data-theme="dark"] ::-moz-selection { background: rgba(202, 158, 103, 0.44); color: var(--cream); } /* ─── 20. VIEW TRANSITIONS API (cross-fade entre páginas) ───────── */ @view-transition { navigation: auto; } /* Cross-fade subtle - 200ms (Apple-soft) */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } ::view-transition-old(root) { animation-name: vtFadeOut; } ::view-transition-new(root) { animation-name: vtFadeIn; } @keyframes vtFadeOut { to { opacity: 0; } } @keyframes vtFadeIn { from { opacity: 0; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } /* ─── 21. COUNTER-UP STAT NUMBERS (subtle pulse on first load) ─── */ .ap-counter-ready { transition: opacity 0.3s ease; } .ap-counter-running { opacity: 0.92; } /* ─── 22. TOUCH TARGETS 44px (HIG mandatory mobile) ──────────────── */ @media (max-width: 768px) { .btn, .btn-gold, .btn-outline, .btn-sm, .nav-item, .filter-toggle, button, [role="button"] { min-height: 44px; } } /* ─── 23. HERO KPI (massive number, Apple keynote-style) ──────────── */ .ap-hero-kpi { text-align: center; padding: 40px 24px 48px; margin: 0 0 32px; border-bottom: 1px solid var(--ap-separator, rgba(60, 60, 67, 0.10)); position: relative; animation: apHeroIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; } @keyframes apHeroIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .ap-hero-kpi-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ap-label-tertiary, rgba(60, 60, 67, 0.45)); margin-bottom: 16px; } .ap-hero-kpi-value { font-size: clamp(56px, 9vw, 88px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; color: var(--navy); font-variant-numeric: tabular-nums; margin: 0 0 12px; display: inline-block; } .ap-hero-kpi-value-suffix { font-size: 0.5em; font-weight: 600; letter-spacing: -0.02em; color: var(--ap-label-secondary, rgba(60, 60, 67, 0.60)); margin-left: 6px; vertical-align: 0.4em; } .ap-hero-kpi-label { font-size: 17px; font-weight: 400; letter-spacing: -0.022em; color: var(--ap-label-secondary, rgba(60, 60, 67, 0.60)); margin: 0 0 24px; } .ap-hero-kpi-meta { display: inline-flex; align-items: center; gap: 20px; font-size: 13px; font-weight: 500; letter-spacing: -0.008em; color: var(--ap-label-tertiary, rgba(60, 60, 67, 0.45)); flex-wrap: wrap; justify-content: center; } .ap-hero-kpi-meta strong { color: var(--navy); font-weight: 600; margin-right: 4px; } .ap-hero-kpi-meta-divider { width: 1px; height: 14px; background: var(--ap-separator, rgba(60, 60, 67, 0.18)); } .ap-hero-kpi-trend { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: 0; } .ap-hero-kpi-trend.up { background: rgba(52, 199, 89, 0.12); color: #15803d; } .ap-hero-kpi-trend.down { background: rgba(255, 59, 48, 0.12); color: #b91c1c; } .ap-hero-kpi-trend svg { width: 12px; height: 12px; } @media (max-width: 640px) { .ap-hero-kpi { padding: 24px 16px 32px; margin-bottom: 24px; } .ap-hero-kpi-meta { gap: 12px; font-size: 12px; } .ap-hero-kpi-meta-divider { display: none; } } [data-theme="dark"] .ap-hero-kpi-value { color: var(--cream); } [data-theme="dark"] .ap-hero-kpi-meta strong { color: var(--cream); } [data-theme="dark"] .ap-hero-kpi-eyebrow, [data-theme="dark"] .ap-hero-kpi-label, [data-theme="dark"] .ap-hero-kpi-meta { color: var(--text-muted); } [data-theme="dark"] .ap-hero-kpi-trend.up { background: rgba(52, 199, 89, 0.18); color: #4ade80; } [data-theme="dark"] .ap-hero-kpi-trend.down { background: rgba(255, 59, 48, 0.18); color: #f87171; } /* ─── 24. STAGGER ROW ANIMATION (Apple list reveal) ─────────────── */ @keyframes apRowReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .ap-stagger > * { animation: apRowReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; } .ap-stagger > *:nth-child(1) { animation-delay: 0ms; } .ap-stagger > *:nth-child(2) { animation-delay: 25ms; } .ap-stagger > *:nth-child(3) { animation-delay: 50ms; } .ap-stagger > *:nth-child(4) { animation-delay: 75ms; } .ap-stagger > *:nth-child(5) { animation-delay: 100ms; } .ap-stagger > *:nth-child(6) { animation-delay: 125ms; } .ap-stagger > *:nth-child(7) { animation-delay: 150ms; } .ap-stagger > *:nth-child(8) { animation-delay: 175ms; } .ap-stagger > *:nth-child(9) { animation-delay: 200ms; } .ap-stagger > *:nth-child(10) { animation-delay: 225ms; } .ap-stagger > *:nth-child(11) { animation-delay: 250ms; } .ap-stagger > *:nth-child(12) { animation-delay: 275ms; } .ap-stagger > *:nth-child(13) { animation-delay: 300ms; } .ap-stagger > *:nth-child(14) { animation-delay: 325ms; } .ap-stagger > *:nth-child(15) { animation-delay: 350ms; } .ap-stagger > *:nth-child(n+16) { animation-delay: 375ms; } @media (prefers-reduced-motion: reduce) { .ap-stagger > *, .ap-hero-kpi { animation: none !important; } } /* ─── 25. SKELETON SHIMMER (loading placeholders) ───────────────── */ .ap-skeleton { display: inline-block; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.10) 50%, rgba(0, 0, 0, 0.05) 100% ); background-size: 200% 100%; animation: apSkeletonShimmer 1.6s ease-in-out infinite; border-radius: 6px; color: transparent; user-select: none; pointer-events: none; } .ap-skeleton-line { display: block; height: 12px; margin: 8px 0; width: 100%; } .ap-skeleton-line.w-40 { width: 40%; } .ap-skeleton-line.w-60 { width: 60%; } .ap-skeleton-line.w-80 { width: 80%; } .ap-skeleton-circle { display: inline-block; width: 32px; height: 32px; border-radius: 50%; vertical-align: middle; } .ap-skeleton-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ap-separator, rgba(60, 60, 67, 0.08)); } @keyframes apSkeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } [data-theme="dark"] .ap-skeleton { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.04) 100% ); } @media (prefers-reduced-motion: reduce) { .ap-skeleton { animation: none; opacity: 0.7; } } /* ─── 26. DARK MODE POLISH (audit ap-* components) ──────────────── */ [data-theme="dark"] .ap-subnav-title strong { color: var(--cream); } [data-theme="dark"] .ap-subnav-tab.active { background: rgba(202, 158, 103, 0.18); color: var(--gold); } [data-theme="dark"] .ap-subnav-badge { background: var(--gold); color: var(--navy); } [data-theme="dark"] .ap-empty-title { color: var(--cream); } [data-theme="dark"] .ap-empty-body { color: var(--text-muted); } /* Sub-nav badge (used in lead/sinistro/cliente detail) */ .ap-subnav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; margin-left: 4px; background: var(--gold); color: var(--navy); border-radius: 100px; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: 1px; } /* ─── 27. MODAL POLISH (Apple sheets + drag handle) ─────────────── */ /* Drag handle: pequeno pill horizontal no topo do modal mobile */ .modal-card::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 36px; height: 5px; background: rgba(60, 60, 67, 0.18); border-radius: 100px; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: 2; } @media (max-width: 768px) { .modal-overlay.active .modal-card { position: relative; } .modal-overlay.active .modal-card::before { opacity: 1; } /* Espaço extra topo para o handle não tapar conteúdo */ .modal-overlay.active .modal-card .modal-header { padding-top: 12px; } } [data-theme="dark"] .modal-card::before { background: rgba(255, 255, 255, 0.22); } /* Modal entrance - mais sutil + spring */ .modal-overlay.active .modal-card { animation: apModalIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; } @keyframes apModalIn { from { transform: scale(0.94) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } /* Mobile: slide-up from bottom (iOS sheet style) */ @media (max-width: 768px) { .modal-overlay { align-items: flex-end; padding: 0; } .modal-overlay .modal-card { width: 100%; max-width: 100%; border-radius: 18px 18px 0 0; animation: apSheetIn 0.45s cubic-bezier(0.32, 0.72, 0, 1) backwards; margin-bottom: 0; max-height: 92vh; overflow-y: auto; padding-top: 22px; } @keyframes apSheetIn { from { transform: translateY(100%); opacity: 1; } to { transform: translateY(0); opacity: 1; } } .modal-overlay.closing .modal-card { animation: apSheetOut 0.28s cubic-bezier(0.4, 0, 1, 1) forwards; } @keyframes apSheetOut { to { transform: translateY(100%); opacity: 1; } } } /* Progressive backdrop fade during drag (controlado via JS --drag-progress) */ .modal-overlay.dragging { background: rgba(33, 35, 77, calc(0.35 * (1 - var(--drag-progress, 0)))); transition: none; } [data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.48); } [data-theme="dark"] .modal-overlay.dragging { background: rgba(0, 0, 0, calc(0.48 * (1 - var(--drag-progress, 0)))); } @media (prefers-reduced-motion: reduce) { .modal-card, .modal-overlay.active .modal-card { animation: none !important; } } /* ─── 28. SEGMENTED CONTROL POLISH (Apple precision) ────────────── */ .segmented-control { background: rgba(60, 60, 67, 0.08); padding: 3px; border-radius: 9px; position: relative; isolation: isolate; } .segmented-control > * { position: relative; z-index: 1; padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; letter-spacing: -0.022em; transition: color 0.20s cubic-bezier(0.22, 1, 0.36, 1), transform 0.12s cubic-bezier(0.22, 1, 0.36, 1); } .segmented-control > *:active:not(.active):not([aria-selected="true"]) { transform: scale(0.96); } .segmented-control > .active, .segmented-control > [aria-selected="true"] { background: #FFFEF3; color: var(--navy); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.04); animation: apSegmentSlide 0.30s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes apSegmentSlide { from { transform: scale(0.94); opacity: 0.85; } to { transform: scale(1); opacity: 1; } } /* Tinted variant (gold active state) */ .segmented-control.segmented-tinted > .active, .segmented-control.segmented-tinted > [aria-selected="true"] { background: var(--gold); color: var(--cream); box-shadow: 0 1px 2px rgba(202, 158, 103, 0.18), 0 3px 8px rgba(202, 158, 103, 0.22); } [data-theme="dark"] .segmented-control { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .segmented-control > .active, [data-theme="dark"] .segmented-control > [aria-selected="true"] { background: rgba(255, 255, 255, 0.12); color: var(--cream); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 3px 8px rgba(0, 0, 0, 0.20), 0 0 0 0.5px rgba(255, 255, 255, 0.04); } [data-theme="dark"] .segmented-control > *:not(.active):not([aria-selected="true"]) { color: var(--text-muted); } [data-theme="dark"] .segmented-control > *:hover:not(.active):not([aria-selected="true"]) { color: var(--cream); } @media (prefers-reduced-motion: reduce) { .segmented-control > .active, .segmented-control > [aria-selected="true"] { animation: none !important; } } /* ─── 29. TOAST QUEUE - stacking + progress bar ──────────────────── */ .ap-toast { position: relative; overflow: hidden; transform-origin: bottom right; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1); } /* Stack effect: toasts mais antigos scale down + slight blur sense */ .ap-toast { transform: scale(calc(1 - var(--stack-pos, 0) * 0.04)) translateY(calc(var(--stack-pos, 0) * -4px)); opacity: calc(1 - var(--stack-pos, 0) * 0.12); } .ap-toast-progress { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: currentColor; opacity: 0.32; transform-origin: left; animation: apToastProgress linear forwards; } @keyframes apToastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } } .ap-toast-success .ap-toast-progress { color: var(--ios-green-text, #15803d); } .ap-toast-error .ap-toast-progress { color: var(--ios-red-text, #b91c1c); } .ap-toast-warning .ap-toast-progress { color: var(--ios-orange-text,#c2410c); } .ap-toast-info .ap-toast-progress { color: var(--ios-blue-text, #1d4ed8); } @media (prefers-reduced-motion: reduce) { .ap-toast { transform: none !important; opacity: 1 !important; } .ap-toast-progress { animation: none; opacity: 0; } } /* ─── 30. iOS SWITCH TOGGLE (.ap-switch) ─────────────────────────── */ /* HTML: */ .ap-switch { display: inline-flex; align-items: center; position: relative; width: 51px; height: 31px; cursor: pointer; flex-shrink: 0; } .ap-switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .ap-switch > span { position: absolute; inset: 0; background: rgba(120, 120, 128, 0.16); border-radius: 100px; transition: background 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .ap-switch > span::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06); transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.20s cubic-bezier(0.22, 1, 0.36, 1); } .ap-switch input:checked + span { background: #34C759; } .ap-switch input:checked + span::before { transform: translateX(20px); } .ap-switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(202, 158, 103, 0.32); } /* Press feedback - stretch handle (Apple iOS detail) */ .ap-switch:active > span::before { width: 32px; } .ap-switch input:checked:active + span::before { width: 32px; transform: translateX(15px); } .ap-switch input:disabled + span { opacity: 0.5; cursor: not-allowed; } /* Gold variant (matches Lusoseg brand) */ .ap-switch.ap-switch-gold input:checked + span { background: var(--gold); } [data-theme="dark"] .ap-switch > span { background: rgba(120, 120, 128, 0.32); } [data-theme="dark"] .ap-switch > span::before { background: #F2F2F7; } [data-theme="dark"] .ap-switch input:checked + span { background: #30D158; } @media (prefers-reduced-motion: reduce) { .ap-switch > span, .ap-switch > span::before { transition: none !important; } } /* ─── 31. APPLE SEARCH BAR (filter-input upgraded) ────────────────── */ .ap-search { position: relative; display: inline-flex; align-items: center; width: 100%; } .ap-search-icon { position: absolute; left: 12px; color: var(--ap-label-tertiary, rgba(60, 60, 67, 0.45)); pointer-events: none; display: flex; align-items: center; justify-content: center; } .ap-search-icon svg { width: 16px; height: 16px; } .ap-search-input { flex: 1; padding: 8px 36px; background: rgba(118, 118, 128, 0.12); border: 0; border-radius: 10px; font: 400 15px/1.3 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.022em; color: var(--navy); transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .ap-search-input::placeholder { color: var(--ap-label-tertiary, rgba(60, 60, 67, 0.45)); } .ap-search-input:focus { outline: none; background: #FFFEF3; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 0 0 4px rgba(202, 158, 103, 0.18); } .ap-search-clear { position: absolute; right: 8px; width: 18px; height: 18px; border: 0; background: rgba(60, 60, 67, 0.32); color: #FFFEF3; border-radius: 50%; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; transition: opacity 0.18s, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } .ap-search-clear svg { width: 10px; height: 10px; } .ap-search-clear:hover { background: rgba(60, 60, 67, 0.5); transform: scale(1.08); } .ap-search.has-value .ap-search-clear { display: inline-flex; animation: apSearchClearIn 0.18s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes apSearchClearIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } } [data-theme="dark"] .ap-search-input { background: rgba(118, 118, 128, 0.24); color: var(--cream); } [data-theme="dark"] .ap-search-input:focus { background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 0 0 4px rgba(202, 158, 103, 0.24); } [data-theme="dark"] .ap-search-clear { background: rgba(255, 255, 255, 0.32); color: var(--navy); } /* Also polish existing .filter-input to match search bar feel */ .filter-input:focus, .otp-input:focus { border-color: var(--gold); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 0 0 4px rgba(202, 158, 103, 0.18); } /* ─── 32. EMPTY STATE REFINEMENT (SF Symbols-like icons) ──────────── */ .ap-empty-icon { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: radial-gradient( circle at 30% 30%, rgba(202, 158, 103, 0.18) 0%, rgba(202, 158, 103, 0.06) 60%, transparent 100% ); display: flex; align-items: center; justify-content: center; color: var(--gold); position: relative; animation: apEmptyIconPulse 4s cubic-bezier(0.22, 1, 0.36, 1) infinite; } .ap-empty-icon svg { width: 32px; height: 32px; stroke-width: 1.6; filter: drop-shadow(0 2px 4px rgba(202, 158, 103, 0.32)); } @keyframes apEmptyIconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } [data-theme="dark"] .ap-empty-icon { background: radial-gradient( circle at 30% 30%, rgba(202, 158, 103, 0.24) 0%, rgba(202, 158, 103, 0.08) 60%, transparent 100% ); } @media (prefers-reduced-motion: reduce) { .ap-empty-icon { animation: none !important; } } /* ─── 33. KANBAN POLISH (Apple drag interaction) ─────────────────── */ /* Card hover: subtle lift */ .kanban-card { transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease; will-change: transform; } .kanban-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(33, 35, 77, 0.10), 0 2px 4px rgba(33, 35, 77, 0.06); } /* Dragging: lift + rotate (Apple Trello-like) */ .kanban-card.dragging { opacity: 0.85; transform: rotate(2.5deg) scale(1.05); box-shadow: 0 16px 32px rgba(33, 35, 77, 0.22), 0 8px 16px rgba(33, 35, 77, 0.14); cursor: grabbing; z-index: 100; } /* Drop zone: gold border + pulse + subtle scale */ .kanban-column-body { transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .kanban-column-body.drag-over { background: rgba(202, 158, 103, 0.12); border-color: var(--gold); transform: scale(1.01); box-shadow: inset 0 0 0 1px rgba(202, 158, 103, 0.32); animation: apKanbanPulse 1.4s ease-in-out infinite; } @keyframes apKanbanPulse { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(202, 158, 103, 0.32); } 50% { box-shadow: inset 0 0 0 2px rgba(202, 158, 103, 0.55); } } /* Drop landing: bounce-in (added via JS class .kanban-card-dropped) */ .kanban-card.kanban-card-dropped { animation: apKanbanDrop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes apKanbanDrop { 0% { transform: rotate(2.5deg) scale(1.05); } 50% { transform: rotate(-0.5deg) scale(1.02); } 100% { transform: rotate(0deg) scale(1); } } /* Empty state inside column: cleaner */ .kanban-empty { color: var(--ap-label-tertiary, rgba(60, 60, 67, 0.45)); font-size: 12px; font-weight: 500; letter-spacing: -0.022em; padding: 24px 12px; text-align: center; border: 1.5px dashed rgba(60, 60, 67, 0.12); border-radius: 8px; margin: 4px 0; } [data-theme="dark"] .kanban-card.dragging { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.28); } [data-theme="dark"] .kanban-column-body.drag-over { background: rgba(202, 158, 103, 0.18); } [data-theme="dark"] .kanban-empty { border-color: rgba(255, 255, 255, 0.10); color: var(--text-muted); } @media (prefers-reduced-motion: reduce) { .kanban-card, .kanban-card.dragging, .kanban-card.kanban-card-dropped, .kanban-column-body, .kanban-column-body.drag-over { animation: none !important; transition: none !important; transform: none !important; } } /* ─── 34. iOS NOTIFICATION BANNER (.ap-banner) ───────────────────── */ /* HTML:
[svg]
...

...

Ver
*/ .ap-banner-container { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 9998; width: 100%; max-width: 480px; padding: 12px 12px 0; pointer-events: none; display: flex; flex-direction: column; gap: 8px; } .ap-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255, 254, 243, 0.92); backdrop-filter: saturate(200%) blur(30px); -webkit-backdrop-filter: saturate(200%) blur(30px); border: 0.5px solid rgba(0, 0, 0, 0.04); border-radius: 16px; box-shadow: 0 12px 32px rgba(33, 35, 77, 0.18), 0 6px 14px rgba(33, 35, 77, 0.10); pointer-events: auto; animation: apBannerIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; transform-origin: top center; color: var(--navy); } .ap-banner.removing { animation: apBannerOut 0.32s cubic-bezier(0.4, 0, 1, 1) forwards; } @keyframes apBannerIn { from { transform: translateY(-130%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes apBannerOut { to { transform: translateY(-130%); opacity: 0; } } .ap-banner-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; } .ap-banner-icon svg { width: 20px; height: 20px; } .ap-banner-success .ap-banner-icon { background: rgba(52, 199, 89, 0.16); color: #15803d; } .ap-banner-error .ap-banner-icon { background: rgba(255, 59, 48, 0.16); color: #b91c1c; } .ap-banner-warning .ap-banner-icon { background: rgba(255, 149, 0, 0.16); color: #c2410c; } .ap-banner-info .ap-banner-icon { background: rgba(0, 122, 255, 0.16); color: #1d4ed8; } .ap-banner-gold .ap-banner-icon { background: rgba(202, 158, 103, 0.18); color: var(--gold); } .ap-banner-body { flex: 1; min-width: 0; } .ap-banner-title { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.022em; color: var(--navy); line-height: 1.3; } .ap-banner-text { margin: 2px 0 0; font-size: 12px; font-weight: 400; letter-spacing: -0.008em; color: var(--ap-label-secondary, rgba(60, 60, 67, 0.60)); line-height: 1.35; } .ap-banner-action { flex-shrink: 0; padding: 6px 12px; background: var(--gold); color: var(--navy); font-size: 13px; font-weight: 600; letter-spacing: -0.022em; border-radius: 100px; text-decoration: none; transition: transform 0.18s, background 0.18s; } .ap-banner-action:hover { background: var(--gold-dark); transform: scale(1.04); } .ap-banner-action:active { transform: scale(0.96); } .ap-banner-close { flex-shrink: 0; width: 24px; height: 24px; background: rgba(60, 60, 67, 0.08); color: var(--ap-label-secondary, rgba(60, 60, 67, 0.60)); border: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.18s, color 0.18s; } .ap-banner-close svg { width: 12px; height: 12px; } .ap-banner-close:hover { background: rgba(60, 60, 67, 0.16); color: var(--navy); } [data-theme="dark"] .ap-banner { background: rgba(33, 35, 77, 0.92); border-color: rgba(255, 255, 255, 0.06); color: var(--cream); } [data-theme="dark"] .ap-banner-title { color: var(--cream); } [data-theme="dark"] .ap-banner-text { color: var(--text-muted); } [data-theme="dark"] .ap-banner-close { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); } [data-theme="dark"] .ap-banner-close:hover { background: rgba(255, 255, 255, 0.14); color: var(--cream); } @media (max-width: 480px) { .ap-banner-container { padding: 8px 8px 0; } .ap-banner { padding: 10px 12px; border-radius: 14px; gap: 10px; } .ap-banner-icon { width: 32px; height: 32px; } .ap-banner-icon svg { width: 18px; height: 18px; } } @media (prefers-reduced-motion: reduce) { .ap-banner, .ap-banner.removing { animation: none !important; } } /* ─── 35. SPOTLIGHT POLISH (highlight + recentes + icones) ───────── */ /* Highlight matches in titles/subtitles */ .gsr-mark { background: rgba(202, 158, 103, 0.32); color: var(--navy); padding: 0 1px; border-radius: 2px; font-weight: inherit; } /* Chevron arrow on hover (Apple Spotlight) */ .gsr-arrow { color: var(--ap-label-tertiary, rgba(60, 60, 67, 0.45)); opacity: 0; transform: translateX(-4px); transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); flex-shrink: 0; margin-left: 8px; } .gsr-item:hover .gsr-arrow, .gsr-item.active .gsr-arrow { opacity: 1; transform: translateX(0); } /* Type-colored icons (Apple SF-style) */ .gsr-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--cream-mid); transition: background 0.18s, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } .gsr-icon svg { width: 18px; height: 18px; stroke-width: 1.8; } .gsr-icon-client { background: rgba(0, 122, 255, 0.14); color: #1d4ed8; } .gsr-icon-lead { background: rgba(202, 158, 103, 0.18); color: var(--gold); } .gsr-icon-policy { background: rgba(52, 199, 89, 0.14); color: #15803d; } .gsr-icon-claim { background: rgba(255, 149, 0, 0.16); color: #c2410c; } .gsr-icon-document { background: rgba(175, 82, 222, 0.14); color: #7c3aed; } .gsr-item:hover .gsr-icon, .gsr-item.active .gsr-icon { transform: scale(1.04); } /* Recent searches header com botao Limpar */ .gsr-group { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .gsr-clear { background: transparent; border: 0; color: var(--ap-action, var(--gold)); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: background 0.15s; } .gsr-clear:hover { background: rgba(202, 158, 103, 0.12); } [data-theme="dark"] .gsr-mark { background: rgba(202, 158, 103, 0.44); color: var(--cream); } [data-theme="dark"] .gsr-icon-client { background: rgba(10, 132, 255, 0.18); color: #60a5fa; } [data-theme="dark"] .gsr-icon-lead { background: rgba(202, 158, 103, 0.22); color: var(--gold); } [data-theme="dark"] .gsr-icon-policy { background: rgba(50, 215, 75, 0.18); color: #4ade80; } [data-theme="dark"] .gsr-icon-claim { background: rgba(255, 159, 10, 0.18); color: #fb923c; } [data-theme="dark"] .gsr-icon-document { background: rgba(191, 90, 242, 0.18); color: #c084fc; } /* Spotlight hint: melhor visibilidade dos atalhos teclado */ .spotlight-hint kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; padding: 2px 5px; background: rgba(60, 60, 67, 0.10); color: var(--navy); border: 0.5px solid rgba(60, 60, 67, 0.18); border-radius: 4px; font: 600 10px/1 -apple-system, BlinkMacSystemFont, monospace; margin: 0 2px; box-shadow: 0 1px 0 rgba(60, 60, 67, 0.05); } [data-theme="dark"] .spotlight-hint kbd { background: rgba(255, 255, 255, 0.08); color: var(--cream); border-color: rgba(255, 255, 255, 0.10); } @media (prefers-reduced-motion: reduce) { .gsr-arrow, .gsr-icon { transition: none; transform: none !important; } } /* ─── 36. iOS DISCLOSURE / ACCORDION (.ap-disclosure) ────────────── */ /* HTML:
Título [chevron]
Conteudo...
*/ .ap-disclosure { background: var(--cream); border: 0.5px solid var(--ap-hairline, rgba(60, 60, 67, 0.12)); border-radius: 12px; overflow: hidden; transition: box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .ap-disclosure:hover { box-shadow: 0 1px 3px rgba(33, 35, 77, 0.04); } .ap-disclosure-summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; font-size: 15px; font-weight: 600; letter-spacing: -0.022em; color: var(--navy); list-style: none; user-select: none; transition: background 0.18s; } .ap-disclosure-summary::-webkit-details-marker { display: none; } .ap-disclosure-summary::marker { display: none; } .ap-disclosure-summary:hover { background: rgba(202, 158, 103, 0.04); } .ap-disclosure-summary > span:first-child { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .ap-disclosure-chevron { flex-shrink: 0; color: var(--ap-label-tertiary, rgba(60, 60, 67, 0.45)); transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); } .ap-disclosure-chevron svg { width: 14px; height: 14px; } .ap-disclosure[open] .ap-disclosure-chevron { transform: rotate(90deg); color: var(--gold); } .ap-disclosure-body { padding: 4px 16px 16px; color: var(--text-body); font-size: 14px; line-height: 1.5; letter-spacing: -0.012em; animation: apDisclosureBodyIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) backwards; } @keyframes apDisclosureBodyIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Group of disclosures: stack tight + only first/last get rounded */ .ap-disclosure-group { display: flex; flex-direction: column; gap: 1px; background: var(--ap-hairline, rgba(60, 60, 67, 0.12)); border: 0.5px solid var(--ap-hairline, rgba(60, 60, 67, 0.12)); border-radius: 12px; overflow: hidden; } .ap-disclosure-group > .ap-disclosure { border: 0; border-radius: 0; } [data-theme="dark"] .ap-disclosure { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .ap-disclosure-summary { color: var(--cream); } [data-theme="dark"] .ap-disclosure-summary:hover { background: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .ap-disclosure-body { color: var(--text-body); } @media (prefers-reduced-motion: reduce) { .ap-disclosure-chevron, .ap-disclosure-body { animation: none !important; transition: none !important; } } /* ─── 37. BOTTOM-NAV POLISH (iOS tab bar refinement) ──────────────── */ @media (max-width: 768px) { /* Liquid Glass material - mais saturado e blur Apple */ .bottom-nav { background: rgba(255, 254, 243, 0.85); backdrop-filter: saturate(200%) blur(28px); -webkit-backdrop-filter: saturate(200%) blur(28px); border-top: 0.5px solid rgba(60, 60, 67, 0.10); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5) inset; } .bottom-nav-item { gap: 4px; transition: color 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.15s cubic-bezier(0.22, 1, 0.36, 1); position: relative; } .bottom-nav-item svg { transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), stroke-width 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .bottom-nav-item:active { transform: scale(0.92); } .bottom-nav-item:active svg { transform: scale(0.86); } .bottom-nav-item.active { color: var(--gold); } .bottom-nav-item.active svg { stroke-width: 2.4; transform: translateY(-1px) scale(1.06); filter: drop-shadow(0 2px 6px rgba(202, 158, 103, 0.42)); } /* Active pill indicator (Apple iOS-style subtle pill under text) */ .bottom-nav-item.active::after { content: ""; position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: var(--gold); border-radius: 100px; box-shadow: 0 0 8px rgba(202, 158, 103, 0.5); animation: apBottomNavPill 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; } @keyframes apBottomNavPill { from { transform: translateX(-50%) scaleX(0); opacity: 0; } to { transform: translateX(-50%) scaleX(1); opacity: 1; } } } [data-theme="dark"] .bottom-nav { background: rgba(33, 35, 77, 0.85) !important; border-top-color: rgba(255, 255, 255, 0.06); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04) inset; } [data-theme="dark"] .bottom-nav-item { color: var(--text-muted); } [data-theme="dark"] .bottom-nav-item.active { color: var(--gold); } @media (prefers-reduced-motion: reduce) { .bottom-nav-item, .bottom-nav-item svg, .bottom-nav-item.active::after { transition: none !important; animation: none !important; transform: none !important; } } /* ─── 38. MODAL STICKY FOOTER (.ap-modal-footer-sticky) ───────────── */ /* HTML padrão:
...
...campos scrolláveis...
*/ .modal-card.ap-has-sticky-footer { padding-bottom: 0; display: flex; flex-direction: column; max-height: 90vh; } .modal-card.ap-has-sticky-footer .ap-modal-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; margin: 0 -28px; padding: 0 28px 8px; } .ap-modal-footer-sticky { position: sticky; bottom: 0; left: 0; right: 0; margin: 0 -28px; padding: 16px 28px; background: rgba(255, 254, 243, 0.92); backdrop-filter: saturate(200%) blur(24px); -webkit-backdrop-filter: saturate(200%) blur(24px); border-top: 0.5px solid rgba(60, 60, 67, 0.10); display: flex; gap: 10px; justify-content: flex-end; z-index: 2; } .ap-modal-footer-sticky .btn { flex-shrink: 0; } @media (max-width: 768px) { .modal-card.ap-has-sticky-footer .ap-modal-body { margin: 0; padding: 0 20px 8px; } .ap-modal-footer-sticky { margin: 0; padding: 12px 20px calc(env(safe-area-inset-bottom, 0px) + 12px); } /* Stack buttons in narrow screens */ .ap-modal-footer-sticky .btn { flex: 1; } } [data-theme="dark"] .ap-modal-footer-sticky { background: rgba(33, 35, 77, 0.92); border-top-color: rgba(255, 255, 255, 0.06); } /* ─── 39. SF SYMBOLS HIERARCHY (multi-weight Lucide) ──────────────── */ /* HTML uses class on container or icon: .ap-icon-hierarchical Adds subtle drop-shadow + variable stroke-width for that "SF Symbols hierarchical" feel. */ .ap-icon-hierarchical svg, svg.ap-icon-hierarchical { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)) drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.20)); } /* Icon container "tinted" with gradient backdrop (Apple Settings-style row icon) */ .ap-icon-tinted { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, rgba(202,158,103,0.20) 0%, rgba(202,158,103,0.10) 100%); color: var(--gold); flex-shrink: 0; transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } .ap-icon-tinted svg { width: 18px; height: 18px; stroke-width: 2; } .ap-icon-tinted:hover { transform: scale(1.06); } .ap-icon-tinted-blue { background: linear-gradient(135deg, rgba(0,122,255,0.18), rgba(0,122,255,0.08)); color: #1d4ed8; } .ap-icon-tinted-green { background: linear-gradient(135deg, rgba(52,199,89,0.18), rgba(52,199,89,0.08)); color: #15803d; } .ap-icon-tinted-orange { background: linear-gradient(135deg, rgba(255,149,0,0.20), rgba(255,149,0,0.10)); color: #c2410c; } .ap-icon-tinted-red { background: linear-gradient(135deg, rgba(255,59,48,0.18), rgba(255,59,48,0.08)); color: #b91c1c; } .ap-icon-tinted-purple { background: linear-gradient(135deg, rgba(175,82,222,0.18), rgba(175,82,222,0.08)); color: #7c3aed; } .ap-icon-tinted-navy { background: linear-gradient(135deg, rgba(33,35,77,0.18), rgba(33,35,77,0.08)); color: var(--navy); } [data-theme="dark"] .ap-icon-tinted-blue { background: linear-gradient(135deg, rgba(10,132,255,0.22), rgba(10,132,255,0.10)); color: #60a5fa; } [data-theme="dark"] .ap-icon-tinted-green { background: linear-gradient(135deg, rgba(50,215,75,0.22), rgba(50,215,75,0.10)); color: #4ade80; } [data-theme="dark"] .ap-icon-tinted-orange { background: linear-gradient(135deg, rgba(255,159,10,0.22), rgba(255,159,10,0.10)); color: #fb923c; } [data-theme="dark"] .ap-icon-tinted-red { background: linear-gradient(135deg, rgba(255,69,58,0.22), rgba(255,69,58,0.10)); color: #f87171; } [data-theme="dark"] .ap-icon-tinted-purple { background: linear-gradient(135deg, rgba(191,90,242,0.22), rgba(191,90,242,0.10)); color: #c084fc; } [data-theme="dark"] .ap-icon-tinted-navy { background: linear-gradient(135deg, rgba(255,255,254,0.10), rgba(255,255,254,0.04)); color: var(--cream); } /* Lucide icons inside sidebar / nav: subtle hierarchy via stroke-width auto */ .sidebar-nav .nav-item svg, .ap-subnav-tab svg, .gsr-item svg { transition: stroke-width 0.22s cubic-bezier(0.22, 1, 0.36, 1); } /* Apply hierarchical drop-shadow to header icons of dash-card-header */ .dash-card-header h3 svg { filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.25)) drop-shadow(0 1px 1px rgba(33, 35, 77, 0.06)); } /* ─── 40. APPLE FORM FIELDS (.ap-field floating labels) ───────────── */ /* HTML padrao:
ATENCAO: placeholder=" " (um espaço) é necessário para o :placeholder-shown. */ .ap-field { position: relative; margin-bottom: 14px; } .ap-field input, .ap-field select, .ap-field textarea { width: 100%; padding: 22px 14px 8px; background: rgba(118, 118, 128, 0.10); border: 0; border-radius: 10px; font: 400 16px/1.3 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.022em; color: var(--navy); transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1); -webkit-appearance: none; appearance: none; } .ap-field textarea { min-height: 96px; resize: vertical; line-height: 1.4; } .ap-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237B7D9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; } .ap-field label { position: absolute; top: 17px; left: 14px; color: var(--ap-label-tertiary, rgba(60, 60, 67, 0.45)); font-size: 15px; font-weight: 500; letter-spacing: -0.022em; pointer-events: none; transition: top 0.22s cubic-bezier(0.22, 1, 0.36, 1), font-size 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.22s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: left top; background: transparent; line-height: 1; } .ap-field input:not(:placeholder-shown) + label, .ap-field input:focus + label, .ap-field select + label, .ap-field textarea:not(:placeholder-shown) + label, .ap-field textarea:focus + label { top: 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--gold); text-transform: uppercase; } .ap-field input::placeholder, .ap-field textarea::placeholder { color: transparent; } .ap-field input:focus, .ap-field select:focus, .ap-field textarea:focus { outline: none; background: var(--cream); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 0 0 4px rgba(202, 158, 103, 0.20); } /* States: error / success / disabled */ .ap-field.ap-field-error input, .ap-field.ap-field-error select, .ap-field.ap-field-error textarea { background: rgba(255, 59, 48, 0.08); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 0 0 4px rgba(255, 59, 48, 0.18); } .ap-field.ap-field-error label { color: #b91c1c !important; } .ap-field.ap-field-success input { background: rgba(52, 199, 89, 0.06); } .ap-field.ap-field-success label { color: #15803d !important; } .ap-field input:disabled, .ap-field select:disabled, .ap-field textarea:disabled { opacity: 0.5; cursor: not-allowed; } .ap-field-helper { display: block; font-size: 12px; font-weight: 500; letter-spacing: -0.012em; color: var(--ap-label-tertiary, rgba(60, 60, 67, 0.45)); margin: 6px 14px 0; line-height: 1.4; } .ap-field-error-msg { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: -0.012em; color: #b91c1c; margin: 6px 14px 0; line-height: 1.4; animation: apFieldErrIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) backwards; } .ap-field-error-msg svg { width: 12px; height: 12px; flex-shrink: 0; } @keyframes apFieldErrIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Field group inline (Apple iOS Settings rows) */ .ap-field-group { background: var(--cream); border-radius: 12px; border: 0.5px solid var(--ap-hairline, rgba(60, 60, 67, 0.12)); overflow: hidden; } .ap-field-group .ap-field { margin: 0; } .ap-field-group .ap-field + .ap-field { border-top: 0.5px solid var(--ap-hairline, rgba(60, 60, 67, 0.12)); } .ap-field-group .ap-field input, .ap-field-group .ap-field select, .ap-field-group .ap-field textarea { background: transparent; border-radius: 0; } .ap-field-group .ap-field input:focus, .ap-field-group .ap-field select:focus, .ap-field-group .ap-field textarea:focus { background: rgba(202, 158, 103, 0.04); box-shadow: none; } [data-theme="dark"] .ap-field input, [data-theme="dark"] .ap-field select, [data-theme="dark"] .ap-field textarea { background: rgba(118, 118, 128, 0.20); color: var(--cream); } [data-theme="dark"] .ap-field input:focus, [data-theme="dark"] .ap-field select:focus, [data-theme="dark"] .ap-field textarea:focus { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .ap-field label { color: var(--text-muted); } [data-theme="dark"] .ap-field-group { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); } @media (prefers-reduced-motion: reduce) { .ap-field input, .ap-field select, .ap-field textarea, .ap-field label, .ap-field-error-msg { transition: none !important; animation: none !important; } } /* ─── 41. NOTIF POPOVER POLISH (Apple notification center) ────────── */ .notif-popover { background: rgba(255, 254, 243, 0.94); backdrop-filter: saturate(200%) blur(32px); -webkit-backdrop-filter: saturate(200%) blur(32px); border: 0.5px solid rgba(0, 0, 0, 0.06); border-radius: 16px; box-shadow: 0 16px 40px rgba(33, 35, 77, 0.18), 0 6px 16px rgba(33, 35, 77, 0.10); animation: apNotifPopIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; width: 360px; max-height: 520px; } @keyframes apNotifPopIn { from { opacity: 0; transform: scale(0.92) translateY(-8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .notif-popover-header { background: transparent; padding: 14px 16px 10px; border-bottom: 0.5px solid rgba(60, 60, 67, 0.10); justify-content: flex-start; } .notif-popover-header h4 { font: 700 17px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif; letter-spacing: -0.022em; color: var(--navy); } .notif-popover-item { border-radius: 10px; padding: 10px 12px; gap: 12px; font-size: 13px; line-height: 1.4; margin: 1px 4px; align-items: flex-start; transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } .notif-popover-item:hover { background: rgba(33, 35, 77, 0.06); transform: translateX(2px); } .notif-popover-item .notif-dot { width: 8px; height: 8px; margin-top: 5px; background: var(--gold); box-shadow: 0 0 8px rgba(202, 158, 103, 0.5); animation: apNotifDot 2s ease-in-out infinite; } @keyframes apNotifDot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .notif-popover-item.unread { background: rgba(202, 158, 103, 0.08); } .notif-popover-item .notif-title { font-weight: 600; letter-spacing: -0.012em; } .notif-popover-item .notif-meta { font-size: 11px; font-weight: 500; letter-spacing: -0.005em; } .notif-popover-empty { padding: 40px 20px; text-align: center; color: var(--ap-label-tertiary, rgba(60, 60, 67, 0.45)); font-size: 13px; font-weight: 500; } .notif-popover-empty::before { content: ""; display: block; width: 48px; height: 48px; margin: 0 auto 12px; background: radial-gradient( circle at 30% 30%, rgba(202, 158, 103, 0.18) 0%, rgba(202, 158, 103, 0.06) 60%, transparent 100% ); border-radius: 50%; } .notif-popover-footer { padding: 8px 8px 10px; border-top: 0.5px solid rgba(60, 60, 67, 0.10); } .notif-popover-footer a { border-radius: 10px; font-weight: 600; color: var(--gold); letter-spacing: -0.012em; transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.15s cubic-bezier(0.22, 1, 0.36, 1); } .notif-popover-footer a:hover { background: rgba(202, 158, 103, 0.10); transform: scale(1.02); } .notif-popover-footer a:active { transform: scale(0.98); } [data-theme="dark"] .notif-popover { background: rgba(33, 35, 77, 0.92); border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .notif-popover-header { border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .notif-popover-header h4 { color: var(--cream); } [data-theme="dark"] .notif-popover-footer { border-top-color: rgba(255, 255, 255, 0.06); } @media (prefers-reduced-motion: reduce) { .notif-popover, .notif-popover-item .notif-dot { animation: none !important; transition: none !important; } } /* ─── 42. APPLE SPLASH (boot screen, 1x per session) ──────────────── */ .ap-splash { display: none; } html.ls-splash-active .ap-splash { display: flex; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--navy) 0%, #2a2c5c 100%); animation: apSplashFade 0.4s ease-out 1.0s forwards; pointer-events: none; } .ap-splash-inner { display: flex; flex-direction: column; align-items: center; gap: 32px; animation: apSplashInnerPop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; } .ap-splash-logo { height: 80px; width: auto; max-width: 280px; filter: drop-shadow(0 8px 24px rgba(202, 158, 103, 0.30)); } .ap-splash-spinner { width: 28px; height: 28px; border: 2.5px solid rgba(202, 158, 103, 0.18); border-top-color: var(--gold); border-radius: 50%; animation: apSplashSpin 0.9s linear infinite; } @keyframes apSplashInnerPop { from { opacity: 0; transform: scale(0.86) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes apSplashFade { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } @keyframes apSplashSpin { to { transform: rotate(360deg); } } /* Hide app content behind splash to avoid flash */ html.ls-splash-active body > *:not(.ap-splash) { opacity: 0; animation: apSplashContentIn 0.4s ease-out 1.1s forwards; } @keyframes apSplashContentIn { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html.ls-splash-active .ap-splash { animation: apSplashFade 0.2s ease-out 0.1s forwards; } .ap-splash-inner, html.ls-splash-active body > *:not(.ap-splash) { animation: none !important; opacity: 1 !important; } } /* ─── 43. APPLE LIGHTBOX (image viewer, zoom/pan) ─────────────────── */ /* HTML padrao: JS auto-init via apLightbox global. */ .ap-lightbox { position: fixed; inset: 0; z-index: 20000; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); display: none; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; overflow: hidden; touch-action: none; } .ap-lightbox.open { display: flex; animation: apLightboxIn 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .ap-lightbox.closing { animation: apLightboxOut 0.28s cubic-bezier(0.4, 0, 1, 1) forwards; } @keyframes apLightboxIn { from { opacity: 0; } to { opacity: 1; } } @keyframes apLightboxOut { to { opacity: 0; } } .ap-lightbox-img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); border-radius: 8px; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); cursor: zoom-in; transform-origin: center center; will-change: transform; } .ap-lightbox-img.zoomed { cursor: grab; transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } .ap-lightbox-img.dragging { cursor: grabbing; transition: none; } .ap-lightbox-img.loading { opacity: 0; } .ap-lightbox-toolbar { position: fixed; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; padding-top: env(safe-area-inset-top, 0); } .ap-lightbox-toolbar > * { pointer-events: auto; } .ap-lightbox-info { color: rgba(255, 254, 243, 0.85); font: 600 13px/1.3 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.022em; display: flex; gap: 12px; align-items: center; background: rgba(0, 0, 0, 0.32); padding: 6px 12px; border-radius: 100px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .ap-lightbox-counter { opacity: 0.7; } .ap-lightbox-actions { display: flex; gap: 6px; } .ap-lightbox-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, 0.42); color: rgba(255, 254, 243, 0.9); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: background 0.18s, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } .ap-lightbox-btn:hover { background: rgba(0, 0, 0, 0.6); transform: scale(1.06); } .ap-lightbox-btn:active { transform: scale(0.94); } .ap-lightbox-btn svg { width: 18px; height: 18px; } .ap-lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, 0.42); color: rgba(255, 254, 243, 0.9); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 2; transition: background 0.18s, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } .ap-lightbox-nav:hover { background: rgba(0, 0, 0, 0.6); transform: translateY(-50%) scale(1.06); } .ap-lightbox-nav-prev { left: 16px; } .ap-lightbox-nav-next { right: 16px; } .ap-lightbox-nav svg { width: 22px; height: 22px; } .ap-lightbox-nav.hidden { display: none; } @media (max-width: 640px) { .ap-lightbox-nav { width: 40px; height: 40px; } .ap-lightbox-nav-prev { left: 8px; } .ap-lightbox-nav-next { right: 8px; } } /* Lightbox-triggered thumbnails get subtle zoom hint */ [data-lightbox] img { cursor: zoom-in; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } [data-lightbox]:hover img { transform: scale(1.02); } @media (prefers-reduced-motion: reduce) { .ap-lightbox, .ap-lightbox-img, .ap-lightbox-btn, .ap-lightbox-nav { animation: none !important; transition: none !important; transform: none !important; } } /* ─── 44. 2FA SETUP STEPPER (.ap-2fa-step) ────────────────────────── */ .ap-2fa-step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 0.5px solid var(--ap-hairline, rgba(60, 60, 67, 0.10)); position: relative; } .ap-2fa-step:last-of-type { border-bottom: 0; } .ap-2fa-step-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); color: var(--navy); display: flex; align-items: center; justify-content: center; font: 700 15px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif; box-shadow: inset 0 1px 0 rgba(255, 254, 243, 0.30), 0 2px 6px rgba(202, 158, 103, 0.32); position: relative; } /* Connect line between steps */ .ap-2fa-step:not(:last-of-type) .ap-2fa-step-num::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 1px; height: calc(100% + 32px); background: linear-gradient(180deg, rgba(202, 158, 103, 0.32) 0%, rgba(202, 158, 103, 0.10) 100%); } .ap-2fa-step-body { flex: 1; min-width: 0; padding-top: 4px; } [data-theme="dark"] .ap-2fa-step { border-bottom-color: rgba(255, 255, 255, 0.06); } /* ─── 45. STATUS BADGES POLISH (Apple tactile depth) ──────────────── */ .badge { background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.02) 100% ); background-blend-mode: overlay; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.20), inset 0 -0.5px 0 rgba(0, 0, 0, 0.04), 0 1px 2px rgba(33, 35, 77, 0.05); transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1); } .badge.badge-solid { background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.08) 100% ); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.28), inset 0 -0.5px 0 rgba(0, 0, 0, 0.10), 0 1px 3px rgba(33, 35, 77, 0.14); } .badge:hover { transform: translateY(-0.5px); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.28), inset 0 -0.5px 0 rgba(0, 0, 0, 0.06), 0 2px 6px rgba(33, 35, 77, 0.10); } /* Lead score badge (already pill) — add same depth */ .lead-score-badge, .lead-score-badge-xs, .badge-tier, .badge-mini-color, .badge-status-mini, .badge-status-mini-2, .badge-tc { background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.06) 100% ); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.28), inset 0 -0.5px 0 rgba(0, 0, 0, 0.08), 0 1px 2px rgba(33, 35, 77, 0.12); } [data-theme="dark"] .badge { background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.12) 100% ); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.10), inset 0 -0.5px 0 rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.18); } @media (prefers-reduced-motion: reduce) { .badge, .badge:hover { transition: none; transform: none; } } /* ─── 46. DRAG-TO-REORDER (subtasks lead-detail) ──────────────────── */ /* Cursor + handle visual */ .subtask-item { cursor: default; position: relative; transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1); } .subtask-item[draggable="true"]::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 16px; background-image: radial-gradient( circle at 3px 3px, var(--ap-label-tertiary, rgba(60, 60, 67, 0.36)) 1.2px, transparent 1.5px ), radial-gradient(circle at 3px 8px, var(--ap-label-tertiary, rgba(60, 60, 67, 0.36)) 1.2px, transparent 1.5px), radial-gradient(circle at 3px 13px, var(--ap-label-tertiary, rgba(60, 60, 67, 0.36)) 1.2px, transparent 1.5px), radial-gradient(circle at 8px 3px, var(--ap-label-tertiary, rgba(60, 60, 67, 0.36)) 1.2px, transparent 1.5px), radial-gradient(circle at 8px 8px, var(--ap-label-tertiary, rgba(60, 60, 67, 0.36)) 1.2px, transparent 1.5px), radial-gradient(circle at 8px 13px, var(--ap-label-tertiary, rgba(60, 60, 67, 0.36)) 1.2px, transparent 1.5px); opacity: 0; transition: opacity 0.18s; cursor: grab; pointer-events: auto; margin-left: -14px; } .subtask-item[draggable="true"]:hover::before { opacity: 1; } .subtask-item.subtask-dragging { opacity: 0.82; cursor: grabbing; transform: rotate(0.8deg) scale(1.02); box-shadow: 0 8px 24px rgba(33, 35, 77, 0.20), 0 4px 8px rgba(33, 35, 77, 0.12); background: var(--cream-mid); z-index: 50; } .subtask-item.subtask-drag-over-top { box-shadow: inset 0 2px 0 var(--gold); } .subtask-item.subtask-drag-over-bottom { box-shadow: inset 0 -2px 0 var(--gold); } @media (prefers-reduced-motion: reduce) { .subtask-item, .subtask-item.subtask-dragging { animation: none !important; transition: none !important; transform: none !important; } } /* ─── 47. NOTIFICATIONS LIST (notifications.php Apple-style) ──────── */ .ap-notif-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; border-bottom: 0.5px solid var(--ap-hairline, rgba(60, 60, 67, 0.08)); transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); position: relative; } .ap-notif-row:last-child { border-bottom: 0; } .ap-notif-row:hover { background: rgba(33, 35, 77, 0.04); } .ap-notif-row .ap-icon-tinted { margin-top: 2px; } .ap-notif-body { flex: 1; min-width: 0; text-decoration: none; color: inherit; display: block; padding-right: 8px; } .ap-notif-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .ap-notif-title { font-size: 14px; font-weight: 600; letter-spacing: -0.022em; color: var(--navy); line-height: 1.3; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-notif-unread .ap-notif-title { font-weight: 700; } .ap-notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(202, 158, 103, 0.6); flex-shrink: 0; animation: apNotifDot 2s ease-in-out infinite; } .ap-notif-message { margin: 0 0 6px; font-size: 13px; font-weight: 400; letter-spacing: -0.008em; color: var(--ap-label-secondary, rgba(60, 60, 67, 0.60)); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ap-notif-time { display: block; font-size: 11px; font-weight: 500; letter-spacing: -0.005em; color: var(--ap-label-tertiary, rgba(60, 60, 67, 0.45)); } .ap-notif-mark { flex-shrink: 0; width: 32px; height: 32px; background: rgba(60, 60, 67, 0.06); color: var(--ap-label-secondary, rgba(60, 60, 67, 0.60)); border: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } .ap-notif-mark:hover { background: var(--gold); color: var(--navy); transform: scale(1.08); } .ap-notif-mark:active { transform: scale(0.94); } .ap-notif-unread { background: linear-gradient(90deg, rgba(202, 158, 103, 0.04) 0%, transparent 100%); } .ap-notif-unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); box-shadow: 0 0 8px rgba(202, 158, 103, 0.4); } [data-theme="dark"] .ap-notif-row { border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .ap-notif-row:hover { background: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .ap-notif-title { color: var(--cream); } [data-theme="dark"] .ap-notif-mark { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); } [data-theme="dark"] .ap-notif-unread { background: linear-gradient(90deg, rgba(202, 158, 103, 0.10) 0%, transparent 100%); } @media (prefers-reduced-motion: reduce) { .ap-notif-row, .ap-notif-mark, .ap-notif-dot { transition: none !important; animation: none !important; } } /* ─── 48. FILE UPLOAD ZONE (Apple drop area .ap-file-drop) ────────── */ /* HTML: */ .ap-file-drop { display: block; position: relative; border: 2px dashed rgba(60, 60, 67, 0.16); border-radius: 14px; padding: 28px 20px; text-align: center; background: rgba(118, 118, 128, 0.04); cursor: pointer; transition: border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } .ap-file-drop:hover, .ap-file-drop.ap-file-drop-dragging { border-color: var(--gold); background: rgba(202, 158, 103, 0.06); transform: scale(1.005); } .ap-file-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .ap-file-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .ap-file-drop-inner svg { width: 36px; height: 36px; color: var(--gold); margin-bottom: 4px; filter: drop-shadow(0 2px 4px rgba(202, 158, 103, 0.30)); transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); } .ap-file-drop:hover .ap-file-drop-inner svg, .ap-file-drop.ap-file-drop-dragging .ap-file-drop-inner svg { transform: scale(1.10) translateY(-2px); } .ap-file-drop-inner strong { font-size: 15px; font-weight: 600; letter-spacing: -0.022em; color: var(--navy); } .ap-file-drop-inner span { font-size: 12px; font-weight: 500; letter-spacing: -0.012em; color: var(--ap-label-secondary, rgba(60, 60, 67, 0.60)); } .ap-file-drop.ap-file-has-file { border-color: var(--gold); background: rgba(202, 158, 103, 0.08); border-style: solid; } .ap-file-drop.ap-file-has-file .ap-file-drop-inner svg { color: #15803d; } [data-theme="dark"] .ap-file-drop { border-color: rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .ap-file-drop-inner strong { color: var(--cream); } [data-theme="dark"] .ap-file-drop:hover, [data-theme="dark"] .ap-file-drop.ap-file-drop-dragging { background: rgba(202, 158, 103, 0.10); } @media (prefers-reduced-motion: reduce) { .ap-file-drop, .ap-file-drop-inner svg { transition: none; transform: none !important; } } /* ─── 49. APPLE DATE PICKER (.ap-datepicker) ──────────────────────── */ /* Popover anchor wrapper (added via JS) */ .ap-date-wrap { position: relative; display: inline-block; } .ap-datepicker { position: absolute; z-index: 1000; min-width: 296px; background: rgba(255, 254, 243, 0.96); backdrop-filter: saturate(200%) blur(32px); -webkit-backdrop-filter: saturate(200%) blur(32px); border: 0.5px solid rgba(0, 0, 0, 0.08); border-radius: 16px; padding: 14px; box-shadow: 0 24px 56px rgba(33, 35, 77, 0.20), 0 8px 16px rgba(33, 35, 77, 0.10); color: var(--navy); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; user-select: none; -webkit-user-select: none; display: none; animation: apDatePopIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; transform-origin: top center; } .ap-datepicker.open { display: block; } @keyframes apDatePopIn { from { opacity: 0; transform: scale(0.92) translateY(-8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .ap-dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 4px 4px 0; } .ap-dp-title { font: 700 17px/1.2 -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif; letter-spacing: -0.022em; color: var(--navy); text-transform: capitalize; cursor: pointer; padding: 2px 6px; border-radius: 6px; transition: background 0.15s; } .ap-dp-title:hover { background: rgba(60, 60, 67, 0.06); } .ap-dp-nav { display: flex; gap: 4px; } .ap-dp-nav button { width: 30px; height: 30px; border: 0; background: transparent; color: var(--gold); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1); } .ap-dp-nav button:hover { background: rgba(202, 158, 103, 0.10); transform: scale(1.08); } .ap-dp-nav button:active { transform: scale(0.94); } .ap-dp-nav svg { width: 14px; height: 14px; } .ap-dp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; } .ap-dp-weekday { text-align: center; font-size: 11px; font-weight: 700; color: var(--ap-label-tertiary, rgba(60, 60, 67, 0.45)); text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 0; } .ap-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .ap-dp-day { aspect-ratio: 1; border: 0; background: transparent; cursor: pointer; font: 500 15px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.022em; color: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s cubic-bezier(0.22, 1, 0.36, 1), transform 0.12s cubic-bezier(0.22, 1, 0.36, 1); position: relative; } .ap-dp-day:hover { background: rgba(202, 158, 103, 0.14); } .ap-dp-day:active { transform: scale(0.92); } .ap-dp-day.empty { visibility: hidden; pointer-events: none; } .ap-dp-day.outside { color: var(--ap-label-tertiary, rgba(60, 60, 67, 0.32)); font-weight: 400; } .ap-dp-day.today { color: var(--gold); font-weight: 700; } .ap-dp-day.today::after { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--gold); } .ap-dp-day.selected { background: var(--gold); color: #FFFEF3; font-weight: 700; box-shadow: 0 1px 2px rgba(202, 158, 103, 0.18), 0 3px 8px rgba(202, 158, 103, 0.22); } .ap-dp-day.selected::after { background: #FFFEF3; } .ap-dp-day.disabled { color: var(--ap-label-tertiary, rgba(60, 60, 67, 0.24)); cursor: not-allowed; pointer-events: none; } .ap-dp-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 0.5px solid var(--ap-hairline, rgba(60, 60, 67, 0.10)); } .ap-dp-footer button { flex: 1; padding: 8px 12px; border: 0; border-radius: 100px; font: 600 13px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.022em; cursor: pointer; transition: background 0.18s, transform 0.12s cubic-bezier(0.22, 1, 0.36, 1); } .ap-dp-today-btn { background: rgba(60, 60, 67, 0.08); color: var(--navy); } .ap-dp-today-btn:hover { background: rgba(60, 60, 67, 0.16); } .ap-dp-clear-btn { background: rgba(255, 59, 48, 0.10); color: #b91c1c; } .ap-dp-clear-btn:hover { background: rgba(255, 59, 48, 0.18); } .ap-dp-footer button:active { transform: scale(0.96); } /* Months grid view */ .ap-dp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px; } .ap-dp-month { padding: 12px 8px; border: 0; background: transparent; cursor: pointer; font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -0.022em; color: var(--navy); border-radius: 10px; text-transform: capitalize; transition: background 0.15s, transform 0.12s; } .ap-dp-month:hover { background: rgba(202, 158, 103, 0.10); } .ap-dp-month.selected { background: var(--gold); color: #FFFEF3; } .ap-dp-years { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px; max-height: 220px; overflow-y: auto; } .ap-dp-year { padding: 10px 4px; border: 0; background: transparent; cursor: pointer; font: 600 12px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; color: var(--navy); border-radius: 8px; transition: background 0.15s; } .ap-dp-year:hover { background: rgba(202, 158, 103, 0.10); } .ap-dp-year.selected { background: var(--gold); color: #FFFEF3; } /* Mobile bottom-sheet variant */ @media (max-width: 640px) { .ap-datepicker { position: fixed; bottom: 0; left: 0; right: 0; top: auto; min-width: 100%; border-radius: 18px 18px 0 0; padding: 18px 16px calc(env(safe-area-inset-bottom, 0px) + 18px); animation: apDateSheetIn 0.42s cubic-bezier(0.32, 0.72, 0, 1) backwards; } @keyframes apDateSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } } .ap-datepicker::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 36px; height: 5px; background: rgba(60, 60, 67, 0.18); border-radius: 100px; } } [data-theme="dark"] .ap-datepicker { background: rgba(33, 35, 77, 0.94); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .ap-dp-title { color: var(--cream); } [data-theme="dark"] .ap-dp-day { color: var(--cream); } [data-theme="dark"] .ap-dp-day.outside { color: var(--text-muted); } [data-theme="dark"] .ap-dp-day:hover { background: rgba(202, 158, 103, 0.22); } [data-theme="dark"] .ap-dp-day.disabled { color: rgba(255, 255, 255, 0.20); } [data-theme="dark"] .ap-dp-footer { border-top-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .ap-dp-today-btn { background: rgba(255, 255, 255, 0.08); color: var(--cream); } [data-theme="dark"] .ap-dp-month, [data-theme="dark"] .ap-dp-year { color: var(--cream); } [data-theme="dark"] .ap-datepicker::before { background: rgba(255, 255, 255, 0.22); } @media (prefers-reduced-motion: reduce) { .ap-datepicker, .ap-dp-day, .ap-dp-nav button, .ap-dp-footer button { animation: none !important; transition: none !important; transform: none !important; } } /* ─── 50. APPLE SELECT (.ap-select) - dropdown popover ────────────── */ /* Trigger button (substitui o native