/* ============================================================ EASE LABS — Indicação de PDVs (Força de Vendas) Design tokens do ui-system oficial ============================================================ */ :root { --primary-950: #1E1F5C; --primary-900: #2A2C7A; --primary-800: #373A9E; --primary-700: #4648B8; --primary-600: #5558D4; --primary-500: #6366F1; --primary-400: #7B83E8; --primary-300: #A5A8F3; --primary-200: #C7C9F7; --primary-100: #E8E9FC; --primary-50: #F4F4FE; --green-950: #0D4222; --green-900: #155C31; --green-800: #1F7A42; --green-700: #2D9655; --green-600: #3FB868; --green-500: #4CC87A; --green-400: #6FD696; --green-300: #9CE5B8; --green-200: #C5F0D5; --green-100: #E2F8EB; --green-50: #F0FBF4; --accent-600: #7B83E8; --accent-200: #DDDFFB; --accent-100: #EDEDFD; --accent-800: #5255AB; --gray-950: #0F1119; --gray-900: #1A1D2E; --gray-800: #2D3148; --gray-700: #454A66; --gray-600: #5E6484; --gray-500: #7A80A0; --gray-400: #9CA1B8; --gray-300: #BEC2D0; --gray-200: #DDDFE6; --gray-100: #EEEEF3; --gray-50: #F7F8FA; --success: #3FB868; --warning: #F5A623; --error: #E5484D; --info: #5558D4; --success-bg: #E2F8EB; --warning-bg: #FFF4E0; --error-bg: #FEECEC; --info-bg: #E8E9FC; --bg-page: #F7F8FA; --bg-card: #FFFFFF; --bg-sidebar: #1A1D2E; --border-light: #EEEEF3; --border-default: #DDDFE6; --border-strong: #BEC2D0; --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; --shadow-xs: 0 1px 2px rgba(15,17,25,0.04); --shadow-sm: 0 1px 3px rgba(15,17,25,0.06), 0 1px 2px rgba(15,17,25,0.04); --shadow-md: 0 4px 6px rgba(15,17,25,0.06), 0 2px 4px rgba(15,17,25,0.04); --shadow-lg: 0 10px 15px rgba(15,17,25,0.06), 0 4px 6px rgba(15,17,25,0.04); --shadow-xl: 0 20px 25px rgba(15,17,25,0.08), 0 8px 10px rgba(15,17,25,0.04); /* altura da barra de navegação (usada pelo cabeçalho sticky das tabelas) */ --topbar-h: 57px; --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* `clip` (e não `hidden`) porque não cria contexto de rolagem: a topbar continua grudando no topo e nada vaza para a direita no tablet/celular. */ html { overflow-x: clip; } body { font-family: var(--font-family); color: var(--gray-900); line-height: 1.5; -webkit-font-smoothing: antialiased; background-attachment: fixed; /* layout de altura cheia: mantém o rodapé colado no fim da tela mesmo quando a página é curta (em vez de boiar no meio do vazio) */ min-height: 100vh; min-height: 100dvh; /* desconta a barra de endereço no mobile */ display: flex; flex-direction: column; /* o realce cinza do toque no Android polui o design; damos :active próprio */ -webkit-tap-highlight-color: transparent; } /* ============================================================ FUNDO DA PÁGINA — variantes intercambiáveis Troque a classe do em index.html para alternar: .bg-gradiente → gradiente da marca (ORIGINAL, padrão) .bg-neutro → cinza neutro sólido .bg-pontos → neutro com grid de pontos .bg-suave → gradiente da marca com metade da intensidade ============================================================ */ /* A) ORIGINAL — gradiente da marca (verde + índigo) */ body.bg-gradiente { background: radial-gradient(900px 480px at 88% -10%, rgba(110, 204, 100, 0.10), transparent 60%), radial-gradient(1000px 560px at -10% 20%, rgba(86, 97, 232, 0.10), transparent 55%), linear-gradient(165deg, #F4F4FE 0%, #F7F8FA 45%, #F0FBF4 100%); } /* B) Neutro sólido — máxima sobriedade, os cards brancos saltam */ body.bg-neutro { background: var(--bg-page); } /* C) Neutro com grid de pontos — textura discreta, estilo ferramenta técnica */ body.bg-pontos { background-color: var(--bg-page); background-image: radial-gradient(circle, rgba(15, 17, 25, 0.055) 1px, transparent 1px); background-size: 22px 22px; } /* D) Gradiente suave — mesma ideia do original, com metade da saturação */ body.bg-suave { background: radial-gradient(900px 480px at 88% -10%, rgba(110, 204, 100, 0.05), transparent 60%), radial-gradient(1000px 560px at -10% 20%, rgba(86, 97, 232, 0.05), transparent 55%), linear-gradient(165deg, #F9F9FE 0%, #F7F8FA 45%, #F8FBF9 100%); } /* Logo (a imagem tem muito respiro — recorta a faixa central do wordmark) */ .logo-crop { display: inline-block; overflow: hidden; position: relative; } .logo-crop img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .logo-header { width: 118px; height: 32px; flex-shrink: 0; } .logo-login { width: 190px; height: 52px; margin: 0 auto; } .page { width: 100%; max-width: 920px; margin: 0 auto; padding: 32px 24px 64px; flex: 1 0 auto; /* ocupa a altura disponível e empurra o rodapé */ transition: max-width var(--transition-slow); } /* páginas de tabela respiram mais */ .page.page-wide { max-width: 1280px; } /* ============================================================ APP SHELL — barra de navegação superior ============================================================ */ .topbar { position: sticky; top: 0; z-index: 900; background: rgba(255,255,255,0.88); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border-light); animation: fadeIn 0.35s ease-out; } .topbar-inner { max-width: 1280px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 22px; } .topbar-logo { flex-shrink: 0; display: flex; align-items: center; background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-md); transition: background var(--transition-fast), opacity var(--transition-fast); } .topbar-logo:hover { background: var(--gray-50); opacity: 0.85; } .topnav { display: flex; align-items: center; gap: 2px; background: var(--gray-50); border: 1px solid var(--border-light); border-radius: var(--radius-full); padding: 4px; } .topnav-item { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: var(--radius-full); font-family: var(--font-family); font-size: 13.5px; font-weight: 600; color: var(--gray-600); background: none; border: none; cursor: pointer; white-space: nowrap; transition: all var(--transition-fast); } .topnav-item:hover { color: var(--gray-900); background: rgba(255,255,255,0.75); } .topnav-item.active { background: #fff; color: var(--primary-700); box-shadow: var(--shadow-sm); } .topnav-item svg { width: 14px; height: 14px; } .topnav-item .chev { transition: transform var(--transition-fast); opacity: 0.6; } .topnav-group.open .topnav-item .chev { transform: rotate(180deg); } .topnav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--warning); color: #fff; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; } /* ── Dropdowns (nav e usuário) ── */ .topnav-group { position: relative; } .dropdown-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 240px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); z-index: 950; } .topnav-group.open > .dropdown-menu, .topbar-user.open > .dropdown-menu { opacity: 1; visibility: visible; transform: none; } .dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; background: none; cursor: pointer; border-radius: var(--radius-md); font-family: var(--font-family); font-size: 13.5px; font-weight: 500; color: var(--gray-800); text-align: left; transition: background var(--transition-fast); } .dropdown-item:hover { background: var(--gray-50); } .dropdown-item svg { width: 15px; height: 15px; color: var(--gray-500); flex-shrink: 0; } .dropdown-item-danger { color: var(--error); } .dropdown-item-danger:hover { background: var(--error-bg); } .dropdown-item-danger svg { color: var(--error); } .dropdown-item .di-sub { display: block; font-size: 11.5px; color: var(--gray-500); font-weight: 400; margin-top: 1px; } .dropdown-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--border-light); margin-bottom: 4px; } .dropdown-head strong { display: block; font-size: 13.5px; color: var(--gray-900); } .dropdown-head span { display: block; font-size: 11.5px; color: var(--gray-500); margin-top: 1px; } .dropdown-sep { height: 1px; background: var(--border-light); margin: 4px 0; } /* ── Menu do usuário ── */ .topbar-user { margin-left: auto; position: relative; flex-shrink: 0; } .topbar-user .dropdown-menu { left: auto; right: 0; } .user-trigger { display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 5px; border: none; background: none; cursor: pointer; border-radius: var(--radius-full); font-family: var(--font-family); transition: background var(--transition-fast); } .user-trigger:hover { background: var(--gray-50); } .user-trigger .user-name { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; } .user-trigger .user-name > span:first-child { font-size: 13px; font-weight: 600; color: var(--gray-800); white-space: nowrap; } .user-trigger .user-role { font-size: 11px; font-weight: 500; color: var(--gray-500); } .user-chevron { width: 14px; height: 14px; color: var(--gray-400); transition: transform var(--transition-fast); } .topbar-user.open .user-chevron { transform: rotate(180deg); } /* ── Cabeçalho de página ── */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; } .page-head .panel-desc { margin-bottom: 0; } .section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--gray-500); margin-bottom: 14px; } /* ── KPIs do painel ── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 32px; } .kpi-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-xs); animation: fadeInUp 0.4s ease-out both; position: relative; overflow: hidden; } .kpi-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kpi-color, var(--primary-600)); } .kpi-card.clickable { cursor: pointer; transition: all var(--transition-base); } .kpi-card.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--gray-500); margin-bottom: 8px; } .kpi-value { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; color: var(--kpi-color, var(--gray-900)); font-variant-numeric: tabular-nums; } .kpi-hint { font-size: 12px; color: var(--gray-500); margin-top: 8px; } .skeleton-kpi { height: 108px; background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%); background-size: 800px 100%; animation: shimmer 1.2s infinite linear; } .skeleton-kpi::before { display: none; } @media (max-width: 900px) { .topbar-inner { gap: 12px; padding: 10px 16px; flex-wrap: wrap; } .topnav { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; } .user-trigger .user-name { display: none; } } /* ============================================================ ANIMAÇÕES ============================================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes popIn { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } @keyframes drawCheck { to { stroke-dashoffset: 0; } } @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(63,184,104,0.35); } 100% { box-shadow: 0 0 0 18px rgba(63,184,104,0); } } .anim-in { animation: fadeInUp 0.45s ease-out both; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary-100); color: var(--primary-700); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } /* ============================================================ STEPPER ============================================================ */ .stepper { display: flex; align-items: flex-start; margin-bottom: 32px; animation: fadeInUp 0.5s ease-out 0.08s both; } .step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; } .step:not(:last-child)::after { content: ''; position: absolute; top: 15px; left: calc(50% + 24px); width: calc(100% - 48px); height: 2px; background: var(--gray-200); border-radius: 2px; overflow: hidden; } .step .step-line-fill { position: absolute; top: 15px; left: calc(50% + 24px); width: 0; height: 2px; background: var(--primary-600); border-radius: 2px; transition: width 0.45s ease; z-index: 1; } .step.done .step-line-fill { width: calc(100% - 48px); } .step .step-dot { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid var(--gray-300); color: var(--gray-500); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: all var(--transition-slow); position: relative; z-index: 2; } .step.active .step-dot { border-color: var(--primary-600); color: var(--primary-600); box-shadow: 0 0 0 4px var(--primary-100); } .step.done .step-dot { background: var(--primary-600); border-color: var(--primary-600); color: #fff; } .step .step-label { font-size: 12px; font-weight: 600; color: var(--gray-500); transition: color var(--transition-base); text-align: center; } .step.active .step-label { color: var(--primary-700); } .step.done .step-label { color: var(--gray-700); } .step .step-dot svg { width: 14px; height: 14px; } /* ============================================================ PANELS (etapas) ============================================================ */ .panel { display: none; } .panel.active { display: block; animation: slideInRight 0.4s ease-out both; } .panel-title { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 6px; } .panel-desc { font-size: 14px; color: var(--gray-600); margin-bottom: 24px; } /* ============================================================ CARDS ============================================================ */ .card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden; } .card-body { padding: 24px; } .card-footer { padding: 16px 24px; border-top: 1px solid var(--border-light); background: var(--gray-50); display: flex; justify-content: space-between; align-items: center; gap: 12px; } /* ============================================================ INPUTS ============================================================ */ .input-label { font-size: 13px; font-weight: 600; color: var(--gray-800); display: block; margin-bottom: 6px; } .input-hint { font-size: 12px; color: var(--gray-500); margin-top: 6px; } .input-field { font-family: var(--font-family); font-size: 15px; color: var(--gray-900); background: var(--bg-card); border: 1.5px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 16px; outline: none; transition: all var(--transition-base); width: 100%; } .input-field::placeholder { color: var(--gray-400); } .input-field:hover { border-color: var(--gray-400); } .input-field:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); } .input-with-icon { position: relative; } .input-with-icon .input-field { padding-left: 44px; } .input-with-icon .input-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; display: flex; } .input-with-icon .input-icon svg { width: 17px; height: 17px; } /* Campo de senha com botão de exibir/ocultar. Digitar uma senha nova às cegas e ainda ter que repeti-la é a maior fonte de erro nessa tela — o olho resolve. */ .input-senha { position: relative; } .input-senha .input-field { padding-right: 46px; } .btn-olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; cursor: pointer; border-radius: var(--radius-sm); color: var(--gray-400); transition: color var(--transition-base), background var(--transition-base); } .btn-olho:hover { color: var(--gray-700); background: var(--gray-100); } .btn-olho:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; } .btn-olho[aria-pressed="true"] { color: var(--primary-600); } .btn-olho::before { content: ''; width: 19px; height: 19px; background: currentColor; -webkit-mask: var(--olho) center / contain no-repeat; mask: var(--olho) center / contain no-repeat; --olho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } .btn-olho[aria-pressed="true"]::before { --olho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-10-8-10-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 10 8 10 8a18.5 18.5 0 0 1-2.16 3.19'/%3E%3Cpath d='M1 1l22 22'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E"); } /* Aviso de custódia da senha: ela é hash, ninguém recupera — o rep precisa saber. */ .aviso-senha { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--primary-50); border: 1px solid var(--primary-100); border-radius: var(--radius-md); font-size: 12.5px; line-height: 1.55; color: var(--gray-700); } .aviso-senha svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--primary-600); } .aviso-senha strong { color: var(--gray-900); font-weight: 700; } /* ============================================================ BOTÕES ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-family); font-size: 14px; font-weight: 600; border: none; cursor: pointer; border-radius: var(--radius-md); padding: 11px 22px; transition: all var(--transition-base); line-height: 1.4; white-space: nowrap; } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } .btn:disabled { cursor: not-allowed; } .btn-primary { background: var(--primary-600); color: #fff; box-shadow: 0 1px 2px rgba(85,88,212,0.3); } .btn-primary:hover:not(:disabled) { background: var(--primary-700); box-shadow: 0 4px 12px rgba(85,88,212,0.35); transform: translateY(-1px); } .btn-primary:active:not(:disabled) { transform: translateY(0); } .btn-primary:disabled { background: var(--primary-200); color: var(--primary-400); box-shadow: none; } .btn-success { background: var(--green-600); color: #fff; box-shadow: 0 1px 2px rgba(63,184,104,0.3); } .btn-success:hover:not(:disabled) { background: var(--green-700); box-shadow: 0 4px 12px rgba(63,184,104,0.35); transform: translateY(-1px); } .btn-success:disabled { background: var(--green-200); color: var(--green-400); box-shadow: none; } .btn-ghost { background: transparent; color: var(--gray-700); } .btn-ghost:hover { background: var(--gray-100); color: var(--gray-900); } .btn-secondary { background: transparent; color: var(--primary-600); border: 1.5px solid var(--primary-300); } .btn-secondary:hover { background: var(--primary-50); border-color: var(--primary-400); } .btn-lg { font-size: 15px; padding: 14px 28px; } .btn-sm { font-size: 12px; padding: 6px 14px; border-radius: var(--radius-sm); } /* ============================================================ BADGES ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap; } .badge svg { width: 11px; height: 11px; } .badge-green { background: var(--green-100); color: var(--green-800); } .badge-primary { background: var(--primary-100); color: var(--primary-700); } .badge-gray { background: var(--gray-100); color: var(--gray-700); } .badge-warning { background: var(--warning-bg); color: #9A6700; } .badge-error { background: var(--error-bg); color: #C53030; } .badge-accent { background: var(--accent-100); color: var(--accent-800); } /* ============================================================ LOGIN ============================================================ */ .login-wrap { display: flex; justify-content: center; padding: 40px 0 20px; } .login-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); padding: 40px 36px 36px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; animation: fadeInUp 0.5s ease-out both; } .login-card .logo-login { animation: popIn 0.55s cubic-bezier(0.22, 1.2, 0.36, 1) both; margin-bottom: 6px; } .login-card h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; text-align: center; margin-bottom: 10px; } .login-footnote { text-align: center; font-size: 12px; color: var(--gray-400); margin-top: 6px; } .btn-full { width: 100%; } /* ============================================================ ADMIN ============================================================ */ .admin-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .admin-choice { display: flex; align-items: flex-start; gap: 16px; background: var(--bg-card); border: 1.5px solid var(--border-default); border-radius: var(--radius-xl); padding: 24px; cursor: pointer; transition: all var(--transition-base); font-family: var(--font-family); text-align: left; animation: fadeInUp 0.4s ease-out both; } .admin-choice:nth-child(2) { animation-delay: 80ms; } .admin-choice:hover { border-color: var(--primary-400); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .admin-choice-icon { width: 46px; height: 46px; border-radius: var(--radius-lg); background: var(--primary-100); color: var(--primary-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--transition-base); } .admin-choice-icon.green { background: var(--green-100); color: var(--green-700); } .admin-choice-icon.accent { background: var(--accent-100); color: var(--accent-800); } .admin-choice:hover .admin-choice-icon { background: var(--primary-600); color: #fff; } .admin-choice:hover .admin-choice-icon.green { background: var(--green-600); } .admin-choice:hover .admin-choice-icon.accent { background: var(--accent-600); color: #fff; } .admin-choice-icon svg { width: 22px; height: 22px; } .admin-choice-title { font-size: 15.5px; font-weight: 700; color: var(--gray-900); } .admin-choice-desc { font-size: 13px; color: var(--gray-500); margin-top: 3px; line-height: 1.45; } .aprov-filtros { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .aprov-filtros .input-group { min-width: 220px; } .aprov-stats { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .btn-aprovar, .btn-recusar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); border: 1.5px solid var(--border-default); background: #fff; cursor: pointer; transition: all var(--transition-fast); } .btn-aprovar svg, .btn-recusar svg { width: 15px; height: 15px; } .btn-aprovar { color: var(--green-700); } .btn-aprovar:hover { background: var(--green-600); border-color: var(--green-600); color: #fff; transform: translateY(-1px); } .btn-recusar { color: var(--error); } .btn-recusar:hover { background: var(--error); border-color: var(--error); color: #fff; transform: translateY(-1px); } .acao-wrap { display: flex; gap: 6px; } td .decidido { font-size: 11.5px; color: var(--gray-500); } @media (max-width: 640px) { .admin-choices { grid-template-columns: 1fr; } } /* ============================================================ ETAPA 1 — REPRESENTANTE ============================================================ */ .rep-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; max-height: 440px; overflow-y: auto; padding: 4px; margin: 16px -4px 0; } .rep-card { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1.5px solid var(--border-default); border-radius: var(--radius-lg); padding: 13px 16px; cursor: pointer; transition: all var(--transition-base); text-align: left; font-family: var(--font-family); animation: fadeInUp 0.35s ease-out both; } @media (hover: hover) { .rep-card:hover { border-color: var(--primary-400); background: var(--primary-50); transform: translateY(-1px); box-shadow: var(--shadow-md); } } .rep-card .rep-name { font-size: 13.5px; font-weight: 600; color: var(--gray-900); } .rep-card .rep-meta { font-size: 11.5px; color: var(--gray-500); margin-top: 1px; } /* ============================================================ ETAPA 2 — BUSCA PDV ============================================================ */ .search-results { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } .pdv-result { display: flex; align-items: center; gap: 16px; background: var(--bg-card); border: 1.5px solid var(--border-default); border-radius: var(--radius-lg); padding: 15px 18px; cursor: pointer; transition: all var(--transition-base); font-family: var(--font-family); text-align: left; width: 100%; animation: fadeInUp 0.35s ease-out both; } @media (hover: hover) { .pdv-result:hover { border-color: var(--primary-400); background: var(--primary-50); transform: translateY(-1px); box-shadow: var(--shadow-md); } } .pdv-result:active { transform: scale(0.995); background: var(--primary-50); } .pdv-result .pdv-icon { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--primary-100); color: var(--primary-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--transition-base); } .pdv-result:hover .pdv-icon:not(.tem-logo) { background: var(--primary-600); color: #fff; } .pdv-result .pdv-icon svg { width: 20px; height: 20px; } /* ── Tile de logo da rede (busca, validação e barra de contexto) ── As logos vêm com fundo próprio embutido, então usamos `contain` sobre branco: o letterboxing fica neutro e nenhuma marca é cortada. */ .tem-logo { background: #fff !important; border: 1px solid var(--border-light); overflow: hidden; padding: 3px; } .tem-logo img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 3px; } .pdv-result .pdv-info { flex: 1; min-width: 0; } .pdv-result .pdv-nome { font-size: 14px; font-weight: 600; color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdv-result .pdv-sub { font-size: 12px; color: var(--gray-500); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdv-result .pdv-cnpj { font-size: 12px; font-weight: 600; color: var(--gray-600); font-variant-numeric: tabular-nums; } .pdv-result .pdv-badges { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .search-empty, .search-loading { text-align: center; padding: 36px 20px; color: var(--gray-500); font-size: 14px; animation: fadeIn 0.3s ease-out; } .skeleton { height: 72px; border-radius: var(--radius-lg); background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%); background-size: 800px 100%; animation: shimmer 1.2s infinite linear; } /* Cadastro manual de PDV */ .manual-pdv { margin-top: 20px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-card); transition: border-color var(--transition-base), box-shadow var(--transition-base); overflow: hidden; } .manual-pdv:hover { border-color: var(--primary-400); } .manual-pdv.open { border-style: solid; border-color: var(--primary-300); box-shadow: var(--shadow-md); } .manual-pdv-trigger { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 20px; background: none; border: none; cursor: pointer; font-family: var(--font-family); text-align: left; } .manual-trigger-icon { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--primary-100); color: var(--primary-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--transition-base); } .manual-pdv.open .manual-trigger-icon, .manual-pdv-trigger:hover .manual-trigger-icon { background: var(--primary-600); color: #fff; } .manual-trigger-icon svg { width: 18px; height: 18px; transition: transform var(--transition-base); } .manual-pdv.open .manual-trigger-icon svg { transform: rotate(45deg); } .manual-trigger-text { flex: 1; display: flex; flex-direction: column; gap: 1px; } .manual-trigger-text strong { font-size: 14px; font-weight: 600; color: var(--gray-900); } .manual-trigger-text span { font-size: 12.5px; color: var(--gray-500); } .manual-chevron { width: 18px; height: 18px; color: var(--gray-400); transition: transform var(--transition-slow); flex-shrink: 0; } .manual-pdv.open .manual-chevron { transform: rotate(180deg); } .manual-pdv-form { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease; } .manual-pdv.open .manual-pdv-form { max-height: 640px; opacity: 1; } .manual-form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; padding: 4px 20px 16px; border-top: 1px solid var(--border-light); padding-top: 18px; } .manual-form-grid .span-2 { grid-column: span 2; } .input-group { display: flex; flex-direction: column; gap: 2px; } .input-label .req { color: var(--error); } .input-error-msg { font-size: 12px; color: var(--error); margin-top: 4px; } .input-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235E6484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .manual-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px 18px; flex-wrap: wrap; } @media (max-width: 640px) { .manual-form-grid { grid-template-columns: 1fr 1fr; } } /* ============================================================ ETAPA 3 — VALIDAÇÃO PDV ============================================================ */ .pdv-hero { display: flex; align-items: flex-start; gap: 18px; padding: 24px; background: linear-gradient(135deg, var(--primary-50) 0%, #fff 60%); border-bottom: 1px solid var(--border-light); } .pdv-hero .pdv-hero-icon { width: 60px; height: 60px; border-radius: var(--radius-lg); background: var(--primary-600); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(85,88,212,0.3); } .pdv-hero .pdv-hero-icon.tem-logo { box-shadow: var(--shadow-sm); padding: 5px; } .pdv-hero .pdv-hero-icon svg { width: 24px; height: 24px; } .pdv-hero h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; } .pdv-hero .pdv-hero-cnpj { font-size: 13px; color: var(--gray-600); font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; } .pdv-hero .pdv-hero-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } /* Mapa de localização do PDV */ .pdv-map { width: 100%; aspect-ratio: 16 / 7; background: var(--gray-100); border-bottom: 1px solid var(--border-light); animation: fadeIn 0.4s ease-out; } @media (max-width: 640px) { .pdv-map { aspect-ratio: 4 / 3; } } /* Dica de gesto: no toque, 1 dedo rola a página e 2 dedos movem o mapa (ver montarMapaPdv). Sem o aviso o usuário acha que o mapa travou. */ .pdv-map.mapa-toque { position: relative; } .pdv-map.mapa-toque::after { content: 'Use dois dedos para mover o mapa'; position: absolute; left: 10px; bottom: 10px; z-index: 500; background: rgba(15, 17, 25, 0.72); color: #fff; font-size: 11.5px; font-weight: 600; padding: 6px 10px; border-radius: var(--radius-full); pointer-events: none; } .pdv-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 24px; padding: 24px; } .pdv-field .pdv-field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--gray-500); margin-bottom: 3px; } .pdv-field .pdv-field-value { font-size: 14px; font-weight: 500; color: var(--gray-900); } /* ============================================================ ETAPA 4 — SKUs & SUGESTÃO ============================================================ */ .pdv-context-bar { display: flex; align-items: center; gap: 14px; /* cor da marca da rede, definida via JS (--rede-cor); navy como fallback. Em cores claras o JS troca --rede-texto para grafite (ex.: Drogal). */ background: var(--rede-cor, var(--bg-sidebar)); color: var(--rede-texto, #fff); border-radius: var(--radius-lg); padding: 14px 20px; margin-bottom: 20px; animation: fadeInUp 0.4s ease-out both; transition: background var(--transition-slow); } .pdv-context-bar .ctx-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* em barras claras, o contorno do tile precisa de um pouco mais de peso */ .pdv-context-bar.texto-escuro .ctx-icon { background: rgba(15,17,25,0.08); } .pdv-context-bar.texto-escuro .tem-logo { border-color: rgba(15,17,25,0.14); } .pdv-context-bar .ctx-icon svg { width: 17px; height: 17px; } .pdv-context-bar .ctx-nome { font-size: 13.5px; font-weight: 600; } .pdv-context-bar .ctx-sub { font-size: 11.5px; opacity: 0.65; margin-top: 1px; font-variant-numeric: tabular-nums; } .sku-grid { display: flex; flex-direction: column; gap: 12px; } .sku-card { background: var(--bg-card); border: 1.5px solid var(--border-default); border-left: 5px solid var(--sku-color, var(--border-default)); border-radius: var(--radius-lg); padding: 18px 20px; cursor: pointer; transition: all var(--transition-base); animation: fadeInUp 0.4s ease-out both; position: relative; } .sku-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--sku-color, var(--gray-300)); margin-right: 8px; flex-shrink: 0; } /* hover e seleção usam a COR DO PRÓPRIO SKU (--sku-color), não o índigo padrão */ @media (hover: hover) { .sku-card:hover { border-color: color-mix(in srgb, var(--sku-color, var(--primary-400)) 60%, #fff); border-left-color: var(--sku-color, var(--primary-400)); box-shadow: 0 4px 14px color-mix(in srgb, var(--sku-color, var(--primary-600)) 20%, transparent); transform: translateY(-1px); } } /* selecionado = índigo padrão do sistema (mais sóbrio); a faixa lateral continua na cor do SKU, que é a identidade do produto em qualquer estado */ /* pressionar (:active) na cor do SKU — feedback imediato do produto tocado */ .sku-card:active { border-color: var(--sku-color, var(--primary-600)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sku-color, var(--primary-600)) 26%, transparent); transform: translateY(0); } .sku-card.selected { border-color: var(--sku-color, var(--primary-600)); border-left-color: var(--sku-color, var(--primary-600)); background: color-mix(in srgb, var(--sku-color, var(--primary-600)) 7%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sku-color, var(--primary-600)) 24%, transparent); } .sku-card .sku-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .sku-card .sku-title-wrap { display: flex; align-items: center; gap: 10px; } /* seleção múltipla: caixa (checkbox), não bolinha */ .sku-card .radio-indicator { width: 18px; height: 18px; border-radius: var(--radius-sm); border: 2px solid var(--gray-300); display: flex; align-items: center; justify-content: center; transition: all var(--transition-base); flex-shrink: 0; } .sku-card.selected .radio-indicator { border-color: var(--sku-color, var(--primary-600)); background: var(--sku-color, var(--primary-600)); } .sku-card.selected .radio-indicator::after { content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); } .sku-card .sku-nome { font-size: 15px; font-weight: 700; color: var(--gray-900); } .sku-card .sku-ean { font-size: 11px; color: var(--gray-400); font-variant-numeric: tabular-nums; margin-left: 4px; } .sku-card .sku-stats { display: flex; align-items: flex-start; gap: 26px; margin-top: 14px; flex-wrap: wrap; } .sku-stat .sku-stat-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray-500); } .sku-stat .sku-stat-value { font-size: 19px; font-weight: 700; color: var(--gray-900); font-variant-numeric: tabular-nums; letter-spacing: -0.3px; } .sku-stat .sku-stat-value.pos { color: var(--green-700); } .sku-stat .sku-stat-value.neg { color: var(--error); } .sku-stat .sku-stat-value.metric { color: var(--accent-800); } .sku-card.bloqueado { cursor: not-allowed; } .sku-card.bloqueado:hover { border-color: var(--border-default); transform: none; box-shadow: none; } .sku-card.bloqueado .radio-indicator { opacity: 0.4; } .sku-sugestao-existente { margin-top: 12px; display: flex; align-items: center; gap: 8px; background: var(--warning-bg); border: 1px solid #FFD88D; color: #7A5200; border-radius: var(--radius-md); padding: 8px 12px; font-size: 12.5px; animation: fadeIn 0.3s ease-out; } .sku-sugestao-existente svg { width: 14px; height: 14px; flex-shrink: 0; } .sku-sugestao-existente strong { font-weight: 700; } /* VB input dentro do card selecionado */ .sku-vb-area { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease; margin-top: 0; } .sku-card.selected .sku-vb-area { /* precisa comportar o stepper + o bloco de recomendação da IA */ max-height: 380px; opacity: 1; margin-top: 16px; } .sku-vb-inner { /* row-gap 0: a dica é um item de largura total que fica colapsado quase sempre; com gap vertical ela reservaria um vão vazio embaixo do stepper (visível no celular, onde o bloco quebra em duas linhas). O respiro da dica quando ela aparece vem do próprio .vb-dica.visivel { margin-top }. */ display: flex; align-items: center; gap: 0 16px; padding: 14px 16px; background: #fff; border: 1px solid color-mix(in srgb, var(--sku-color, var(--primary-600)) 30%, #fff); border-radius: var(--radius-md); flex-wrap: wrap; } .sku-vb-inner .vb-label { font-size: 13px; font-weight: 600; color: var(--gray-800); } /* ── Dica condicional do VB (aparece só quando a proposta destoa da média) ── */ .vb-dica { flex-basis: 100%; display: flex; align-items: flex-start; gap: 7px; overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; transition: max-height var(--transition-slow), opacity var(--transition-base), margin-top var(--transition-slow); font-size: 12px; line-height: 1.45; color: var(--gray-500); } .vb-dica.visivel { max-height: 60px; opacity: 1; margin-top: 10px; } .vb-dica svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; color: var(--warning); } .vb-dica strong { font-weight: 600; color: var(--gray-600); } .vb-stepper { display: flex; align-items: center; gap: 0; } .vb-stepper button { width: 38px; height: 38px; border: 1.5px solid var(--border-default); background: var(--gray-50); color: var(--gray-700); font-size: 18px; font-weight: 700; cursor: pointer; transition: all var(--transition-fast); font-family: var(--font-family); display: flex; align-items: center; justify-content: center; } .vb-stepper button:hover { background: var(--primary-100); color: var(--primary-700); border-color: var(--primary-300); } .vb-stepper button:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); } .vb-stepper button:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; } .vb-stepper input { width: 64px; height: 38px; border: 1.5px solid var(--border-default); border-left: none; border-right: none; text-align: center; font-family: var(--font-family); font-size: 16px; font-weight: 700; color: var(--gray-900); outline: none; -moz-appearance: textfield; } .vb-stepper input::-webkit-outer-spin-button, .vb-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ── Modal de revisão da IA (ao enviar) ── */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 17, 25, 0.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity var(--transition-base); } .modal-overlay.aberto { opacity: 1; } .modal { background: var(--bg-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column; transform: translateY(12px) scale(0.98); transition: transform var(--transition-base); } .modal-overlay.aberto .modal { transform: none; } .modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--border-light); } .modal-titulo { display: flex; align-items: center; gap: 9px; } .modal-titulo svg { width: 19px; height: 19px; color: var(--accent-600); } .modal-titulo h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; } .modal-head .ia-modelo { margin-left: auto; } .modal-corpo { padding: 20px 24px; overflow-y: auto; } .modal-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--border-light); background: var(--gray-50); border-radius: 0 0 var(--radius-xl) var(--radius-xl); } .revisao-contexto { font-size: 14px; line-height: 1.55; color: var(--gray-800); padding: 14px 16px; background: linear-gradient(135deg, var(--accent-100) 0%, #fff 80%); border: 1px solid var(--accent-200); border-radius: var(--radius-md); margin-bottom: 16px; } .revisao-item { padding: 13px 0; border-top: 1px solid var(--border-light); } .revisao-item:first-of-type { border-top: none; } .revisao-sku { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 700; color: var(--gray-900); margin-bottom: 5px; } .revisao-vb { font-size: 11.5px; font-weight: 700; background: var(--gray-100); color: var(--gray-700); padding: 2px 9px; border-radius: var(--radius-full); font-variant-numeric: tabular-nums; } .revisao-item.com-alerta .revisao-vb { background: var(--warning-bg); color: #9A6700; } .revisao-texto { font-size: 13px; line-height: 1.55; color: var(--gray-600); } .revisao-falha { color: var(--error); font-size: 12.5px; } @media (max-width: 640px) { .modal-rodape { flex-direction: column-reverse; } .modal-rodape .btn { width: 100%; } } .ia-carregando, .ia-erro { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md); font-size: 12.5px; background: var(--accent-100); color: var(--accent-800); border: 1px solid var(--accent-200); } .ia-carregando svg, .ia-erro svg { width: 15px; height: 15px; flex-shrink: 0; } .ia-carregando svg { animation: pulsar 1.4s ease-in-out infinite; } .ia-erro { background: var(--gray-50); color: var(--gray-500); border-color: var(--border-light); } @keyframes pulsar { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } .vb-hint-ideal { font-size: 12px; color: var(--gray-500); } .vb-hint-ideal button { background: none; border: none; color: var(--primary-600); font-weight: 600; cursor: pointer; font-size: 12px; font-family: var(--font-family); padding: 0; text-decoration: underline; text-underline-offset: 2px; } .submit-bar { position: sticky; bottom: 16px; margin-top: 24px; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; animation: fadeInUp 0.4s ease-out both; z-index: 10; } .submit-bar .submit-resumo { font-size: 13px; color: var(--gray-600); } .submit-bar .submit-resumo strong { color: var(--gray-900); } /* ============================================================ SUCESSO ============================================================ */ .success-wrap { text-align: center; padding: 48px 24px; } .success-check { width: 84px; height: 84px; border-radius: 50%; background: var(--green-600); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; animation: popIn 0.5s cubic-bezier(0.22, 1.2, 0.36, 1) both, pulseRing 1.4s ease-out 0.4s; } .success-check svg { width: 40px; height: 40px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: drawCheck 0.4s ease-out 0.35s forwards; } .success-wrap h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 8px; } .success-wrap p { font-size: 14px; color: var(--gray-600); max-width: 420px; margin: 0 auto 28px; } .success-wrap .success-detail { display: inline-flex; flex-direction: column; gap: 6px; background: var(--gray-50); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 16px 28px; margin-bottom: 28px; font-size: 14px; } .success-wrap .success-detail strong { font-weight: 700; } .success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ============================================================ MINHAS SUGESTÕES ============================================================ */ .minhas-sugestoes { margin-top: 40px; animation: fadeInUp 0.5s ease-out 0.15s both; } .minhas-sugestoes h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--gray-500); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-light); } .table-wrapper { /* Rola dentro do próprio container (permite o cabeçalho sticky). A altura é calculada para o conjunto topbar + cabeçalho da página + filtros + rodapé caber na tela: assim só as linhas rolam, sem um segundo scroll na página. */ overflow: auto; max-height: calc(100dvh - 400px); min-height: 220px; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); border: 1px solid var(--border-light); background: #fff; } table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; } th { position: sticky; top: 0; z-index: 4; text-align: left; padding: 11px 16px; font-weight: 600; font-size: 11px; color: var(--gray-600); background: var(--gray-50); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-default); white-space: nowrap; } td { padding: 11px 16px; border-bottom: 1px solid var(--border-light); color: var(--gray-800); white-space: nowrap; } td.td-num { font-variant-numeric: tabular-nums; } tbody tr { transition: background var(--transition-fast); } tbody tr:nth-child(even) > td { background: rgba(247, 248, 250, 0.55); } @media (hover: hover) { tbody tr:hover > td { background: var(--primary-50); } } tbody tr:last-child td { border-bottom: none; } /* "Indicações da equipe" (GR) ganhou a coluna Representante além das demais — com todos os cabeçalhos em nowrap (padrão acima) a soma passava da largura da tela e forçava scroll horizontal. Aqui, só nesta tabela: cabeçalho pode quebrar em 2 linhas (encolhe a coluna pro tamanho do DADO, não do rótulo) e o padding é mais enxuto. Não mexe nas outras tabelas (Aprovações/Usuários), que já cabem sem scroll. */ #panel-sugestoes th { white-space: normal; line-height: 1.25; padding: 8px 10px; } #panel-sugestoes td { padding: 9px 10px; } /* ── Estado vazio ── */ .empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 24px; text-align: center; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); animation: fadeIn 0.3s ease-out; } .empty-state svg { width: 38px; height: 38px; color: var(--gray-300); } .empty-state strong { font-size: 15px; font-weight: 600; color: var(--gray-800); } .empty-state span { font-size: 13.5px; color: var(--gray-500); max-width: 380px; } .empty-state .btn { margin-top: 8px; } /* ── Rodapé ── */ .app-footer { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px 24px 24px; border-top: 1px solid var(--border-light); font-size: 12px; color: var(--gray-400); } .app-footer .footer-sep { opacity: 0.6; } /* ============================================================ ALERTS / TOAST ============================================================ */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--gray-900); color: #fff; border-radius: var(--radius-md); padding: 13px 20px; font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-xl); display: flex; align-items: center; gap: 10px; z-index: 100; animation: fadeInUp 0.3s ease-out; max-width: 380px; } .toast.toast-error { background: var(--error); } .toast svg { width: 16px; height: 16px; flex-shrink: 0; } .alert { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; border-radius: var(--radius-md); font-size: 13.5px; line-height: 1.5; animation: fadeIn 0.3s ease-out; } .alert svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; } .alert-warning { background: var(--warning-bg); color: #7A5200; border: 1px solid #FFD88D; } .alert-info { background: var(--info-bg); color: var(--primary-800); border: 1px solid var(--primary-200); } .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gray-600); background: none; border: none; cursor: pointer; padding: 6px 10px; border-radius: var(--radius-sm); transition: all var(--transition-fast); font-family: var(--font-family); margin-bottom: 16px; } .back-link:hover { background: var(--gray-100); color: var(--gray-900); } .back-link svg { width: 14px; height: 14px; } /* ============================================================ MOBILE / TABLET Os representantes usam tablet Samsung em campo (~800x1280 em retrato, 1280x800 em paisagem), então o alvo não é "caber", é "operar com o polegar, em pé, dentro de uma farmácia". Três eixos: 1. alvos de toque de no mínimo 44px (WCAG 2.5.5 / guia da Apple); 2. nenhuma rolagem lateral e nenhuma informação atrás de scroll oculto; 3. tabelas viram cartões — tabela larga em tela estreita é ilegível. ============================================================ */ /* ── 1. Ponteiro grosseiro (dedo): vale em qualquer largura, inclusive no tablet em paisagem, que é largo mas continua sendo tocado ── */ @media (pointer: coarse) { /* remove o atraso de 300ms do duplo-toque e o zoom acidental no botão */ button, .btn, .sku-card, .pdv-result, .rep-card, .topnav-item, .dropdown-item, .back-link, .vb-stepper button { touch-action: manipulation; } .topnav-item { min-height: 44px; padding: 10px 18px; font-size: 14px; } .dropdown-item { min-height: 44px; } .user-trigger { min-height: 44px; } .topbar-logo { min-height: 44px; } /* voltar é o botão mais usado do fluxo; a área clicável cresce sem empurrar o layout (as margens negativas compensam o padding extra) */ .back-link { min-height: 44px; padding: 10px 12px; margin-left: -12px; font-size: 14px; } .back-link svg { width: 16px; height: 16px; } /* o stepper do VB é onde o dedo mais erra: −/+ colados e de 38px */ .vb-stepper button { width: 52px; height: 52px; font-size: 22px; } .vb-stepper input { width: 78px; height: 52px; font-size: 18px; } .btn-olho { width: 44px; height: 44px; right: 3px; } .btn-olho::before { width: 21px; height: 21px; } .btn { min-height: 44px; } .btn-sm { min-height: 44px; font-size: 13px; padding: 10px 16px; } .radio-indicator { width: 24px; height: 24px; } /* iOS/Android dão zoom automático em campo com fonte < 16px */ .input-field, .vb-stepper input { font-size: 16px; } /* controles do Leaflet nascem com 30px */ .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 21px !important; } } /* ── 2. Barra de navegação: rola no eixo X quando não cabe. Sem indicação visual o usuário não descobre que há mais itens. ── */ @media (max-width: 900px) { .topnav { scrollbar-width: none; -webkit-overflow-scrolling: touch; /* máscara de esmaecimento à direita = "tem mais coisa para o lado" */ mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); } .topnav::-webkit-scrollbar { display: none; } /* o último item precisa de folga para não morrer embaixo da máscara */ .topnav::after { content: ''; flex: 0 0 20px; } /* dropdown do nav ancorado à direita quando o item está no fim da barra */ .topnav-group:last-child .dropdown-menu { left: auto; right: 0; } } /* ── 3. Tablet em retrato e abaixo ── */ @media (max-width: 900px) { .page { padding: 24px 18px 72px; } .page.page-wide { max-width: 100%; } .pdv-hero { flex-direction: column; gap: 14px; } .pdv-detail-grid { grid-template-columns: 1fr 1fr; gap: 16px 20px; padding: 20px; } .aprov-filtros { gap: 12px; } .aprov-filtros .input-group { min-width: 0; flex: 1 1 220px; } } /* ── 4. Tabelas viram cartões (Aprovações, Usuários, Minhas sugestões). Cada carrega seu rótulo em data-label, preenchido no app.js. ── */ @media (max-width: 860px) { .table-wrapper { overflow: visible; max-height: none; min-height: 0; border: none; background: none; } .table-wrapper thead { display: none; } .table-wrapper table, .table-wrapper tbody, .table-wrapper tr, .table-wrapper td { display: block; width: 100%; } .table-wrapper tbody tr { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 6px 4px; margin-bottom: 12px; animation: fadeInUp 0.3s ease-out both; } .table-wrapper tbody tr:nth-child(even) > td { background: none; } .table-wrapper td { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 9px 14px; border: none; text-align: right; font-size: 14px; } .table-wrapper td + td { border-top: 1px dashed var(--border-light); } .table-wrapper td::before { content: attr(data-label); /* empurra todo o resto da célula para a direita, mesmo quando o valor vem em dois pedaços (ex.: nome do PDV + CNPJ) */ margin-right: auto; flex-shrink: 0; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--gray-500); } /* célula sem rótulo (ações, estado vazio) ocupa a linha inteira */ .table-wrapper td:not([data-label]) { justify-content: center; text-align: center; } .table-wrapper td:not([data-label])::before { content: none; } .table-wrapper td .btn { width: 100%; } .table-wrapper .decidido { text-align: right; } /* Aprovar/recusar em 32px de ícone mudo é pedir erro de toque. No cartão eles viram dois botões largos, lado a lado, com rótulo. */ .table-wrapper td.td-acoes { padding: 10px 14px; } .table-wrapper .acao-wrap { width: 100%; gap: 10px; } .table-wrapper .btn-aprovar, .table-wrapper .btn-recusar { flex: 1; width: auto; min-height: 48px; gap: 8px; font-family: var(--font-family); font-size: 14px; font-weight: 600; } .table-wrapper .btn-aprovar::after { content: 'Aprovar'; } .table-wrapper .btn-recusar::after { content: 'Recusar'; } .table-wrapper .btn-aprovar svg, .table-wrapper .btn-recusar svg { width: 17px; height: 17px; } } /* ── 5. Celular ── */ @media (max-width: 640px) { .page { padding: 16px 14px 80px; } .step .step-label { font-size: 10px; } .sku-card .sku-stats { gap: 16px; } .submit-bar { flex-direction: column; align-items: stretch; text-align: center; } .pdv-detail-grid { grid-template-columns: 1fr; } .manual-form-grid { grid-template-columns: 1fr; } .rep-list { grid-template-columns: 1fr; max-height: none; } .panel-title { font-size: 22px; } .sku-vb-inner { gap: 0 12px; } /* rótulo em cima, stepper embaixo — cabe melhor que lado a lado em 412px */ .sku-vb-inner .vb-label { flex-basis: 100%; margin-bottom: 10px; } .pdv-context-bar { padding: 12px 14px; gap: 10px; } /* toast ocupando a largura evita mensagem cortada em tela estreita */ .toast { left: 14px; right: 14px; bottom: 14px; } } /* ── 6. Área segura (gesto de navegação do Android / notch) ── */ @supports (padding: env(safe-area-inset-bottom)) { .submit-bar { bottom: calc(16px + env(safe-area-inset-bottom)); } .app-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); } .toast { bottom: calc(24px + env(safe-area-inset-bottom)); } } /* ── 7. Respeita "reduzir movimento" do sistema ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }