/* ═══════════════════════════════════════════════════════════════════ LGL — integracao.css · Design System compartilhado do painel admin ─────────────────────────────────────────────────────────────────── Tema CLARO/ATUAL extraído de index.html (referência visual correta). Fundo #F7F8FC · cards brancos borda #EDEEF4 · accent azul #1240C4 · topbar escura rgba(8,12,42,.94) · hero gradiente #071D6E→#1245B0 · texto #0D1021 · muted #9AA0B8 · fonte Outfit · raios 6–16px. Uso: no (a fonte Outfit deve ser carregada na própria página, via Google Fonts). ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Cores ──────────────────────────────────────────────────────── */ --blue: #1240C4; --blue-dk: #0A1E7A; --blue-lt: #EEF3FF; --cyan: #22d3ee; --white: #ffffff; --gray-50: #F7F8FC; --gray-100: #EDEEF4; --gray-200: #DFE1ED; --gray-400: #9AA0B8; --gray-600: #565D78; --gray-900: #0D1021; --green: #16a34a; --green-lt: #dcfce7; --amber: #d97706; --amber-lt: #fef3c7; --red: #dc2626; --red-lt: #fee2e2; --purple: #7c3aed; --purple-lt: #ede9fe; --orange: #ea580c; --orange-lt: #ffedd5; /* ── Tipografia ─────────────────────────────────────────────────── */ --font: 'Outfit', sans-serif; /* ── Raios ──────────────────────────────────────────────────────── */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 16px; --radius-pill: 999px; /* ── Sombras / efeitos ──────────────────────────────────────────── */ --shadow-card: 0 2px 12px rgba(18,64,196,0.06); --shadow-pop: 0 8px 24px rgba(0,0,0,0.4); --ring: 0 0 0 3px rgba(18,64,196,0.1); /* ── Chrome (topbar / hero) ─────────────────────────────────────── */ --topbar-bg: rgba(8,12,42,0.94); --hero-grad: linear-gradient(150deg, #071D6E 0%, #0D30A0 48%, #1245B0 100%); } /* ═══ BASE / RESET ═══════════════════════════════════════════════════ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--gray-50); color: var(--gray-900); -webkit-font-smoothing: antialiased; min-height: 100vh; } a { text-decoration: none; color: inherit; } button { font-family: var(--font); cursor: pointer; } input, select { font-family: var(--font); } /* ═══ TOPBAR / NAV ═══════════════════════════════════════════════════ */ nav.topbar { position: sticky; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; padding: 0 24px; height: 56px; background: var(--topbar-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.07); gap: 20px; } .nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-right: 16px; border-right: 1px solid rgba(255,255,255,0.08); height: 100%; } .nav-logo-img { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.2); background: white; } .nav-logo-img img { width: 100%; height: 100%; object-fit: cover; } .nav-logo-name { font-size: 14px; font-weight: 700; color: white; line-height: 1.1; } .nav-logo-sub { font-size: 10px; color: rgba(255,255,255,0.5); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 1px; } .nav-links { display: flex; align-items: center; gap: 2px; flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; height: 100%; } .nav-links::-webkit-scrollbar { display: none; } .nav-links a { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.6); padding: 6px 12px; border-radius: var(--radius-sm); transition: background 0.15s, color 0.15s; white-space: nowrap; flex-shrink: 0; } .nav-links a:hover { background: rgba(255,255,255,0.06); color: white; } .nav-links a.active { background: rgba(255,255,255,0.12); color: white; font-weight: 600; } .nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.08); height: 100%; } .btn-logout { background: transparent; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-sm); padding: 6px 12px; color: rgba(255,255,255,0.6); font-size: 12px; font-weight: 500; transition: all 0.15s; } .btn-logout:hover { border-color: var(--red); color: var(--red); } /* ═══ HERO ═══════════════════════════════════════════════════════════ */ .hero { position: relative; overflow: hidden; background: var(--hero-grad); padding: 48px 32px 56px; text-align: center; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; } .hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; } .hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 12px; } .hero-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; color: white; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 10px; } .hero-sub { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.6; max-width: 620px; margin: 0 auto; } /* ═══ LAYOUT ═════════════════════════════════════════════════════════ */ main { max-width: 1280px; margin: 0 auto; padding: 32px; } /* Cabeçalho de seção (título + ação à direita) */ .section-head { margin: 0 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .section-title { font-size: 18px; font-weight: 800; color: var(--gray-900); letter-spacing: -0.01em; } .section-meta { font-size: 12px; color: var(--gray-400); margin-top: 2px; } /* ═══ BOTÕES ═════════════════════════════════════════════════════════ */ .btn-primary { font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: var(--radius-md); background: var(--blue); color: white; border: none; display: inline-flex; align-items: center; gap: 8px; transition: opacity 0.15s, transform 0.1s; } .btn-primary:hover { opacity: 0.9; } .btn-primary:active { transform: scale(0.98); } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; } .btn-ghost { font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: var(--radius-md); background: white; border: 1px solid var(--gray-200); color: var(--gray-600); transition: all 0.15s; } .btn-ghost:hover { border-color: var(--blue); color: var(--blue); } /* Botão "Atualizar" (primário, com ícone) — herdado do index */ .btn-refresh { font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: var(--radius-md); background: var(--blue); color: white; border: none; display: inline-flex; align-items: center; gap: 6px; transition: opacity 0.15s, transform 0.1s; } .btn-refresh:hover { opacity: 0.9; } .btn-refresh:active { transform: scale(0.98); } .btn-refresh:disabled { opacity: 0.5; cursor: not-allowed; } /* ═══ INPUTS / FILTROS ═══════════════════════════════════════════════ */ .filter-bar { display: flex; align-items: center; gap: 10px; background: white; border: 1px solid var(--gray-100); border-radius: var(--radius-xl); padding: 12px 16px; margin-bottom: 20px; flex-wrap: wrap; } .filter-select, .filter-input { font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: var(--radius-sm); background: white; border: 1px solid var(--gray-200); color: var(--gray-900); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .filter-select:focus, .filter-input:focus { border-color: var(--blue); box-shadow: var(--ring); } .filter-input { min-width: 240px; flex: 1; } .filter-input::placeholder { color: var(--gray-400); } .filter-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-sm); background: white; border: 1px solid var(--gray-200); color: var(--gray-600); cursor: pointer; transition: all 0.15s; user-select: none; } .filter-chip:hover { border-color: var(--green); color: var(--green); } .filter-chip.active { background: var(--green-lt); border-color: var(--green); color: #15803d; } .filter-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-200); transition: background 0.15s; } .filter-chip.active .filter-chip-dot { background: var(--green); } /* ═══ CARDS — KPI / MÉTRICA ══════════════════════════════════════════ */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; } @media(max-width:900px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } } .kpi-card { background: white; border: 1px solid var(--gray-100); border-radius: var(--radius-2xl); padding: 22px 20px 20px; position: relative; text-align: center; overflow: hidden; transition: box-shadow 0.15s, border-color 0.15s; } .kpi-card:hover { box-shadow: var(--shadow-card); } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gray-200); } .kpi-card.accent-blue::before { background: var(--blue); } .kpi-card.accent-green::before { background: var(--green); } .kpi-card.accent-cyan::before { background: var(--cyan); } .kpi-card.accent-amber::before { background: var(--amber); } .kpi-card.accent-gray::before { background: var(--gray-200); } .kpi-label { font-size: 11px; font-weight: 600; color: var(--gray-400); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; } .kpi-value { font-size: 32px; font-weight: 800; color: var(--gray-900); letter-spacing: -0.025em; line-height: 1; } .kpi-value.green { color: var(--green); } .kpi-value.amber { color: var(--amber); } .kpi-value.blue { color: var(--blue); } /* ═══ CARDS — PRODUTO (novo no DS; piloto da migração) ═══════════════ */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .product-card { background: white; border: 1px solid var(--gray-100); border-radius: var(--radius-2xl); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .product-card:hover { border-color: var(--blue); box-shadow: var(--shadow-card); } .product-card.disabled { opacity: 0.55; } .product-card-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); } .product-card-ph { width: 100%; aspect-ratio: 1 / 1; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--gray-200); } .product-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .product-card-name { font-size: 14px; font-weight: 700; color: var(--gray-900); line-height: 1.3; } .product-card-meta { display: flex; flex-wrap: wrap; gap: 6px; } .product-card-tag { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-xs); background: var(--gray-100); color: var(--gray-600); } .product-card-tag.cat { background: var(--blue-lt); color: var(--blue); } .product-card-tag.vol { background: var(--gray-100); color: var(--gray-600); } .product-card-tag.ean { font-variant-numeric: tabular-nums; } .product-card-price { font-size: 16px; font-weight: 800; color: var(--blue); margin-top: auto; } .product-card-code { font-size: 11px; color: var(--gray-400); font-variant-numeric: tabular-nums; } .product-card-footer { padding: 10px 16px; border-top: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* ═══ TABELA (dados tabulares — tema claro) ══════════════════════════ */ .table-wrap { background: white; border: 1px solid var(--gray-100); border-radius: var(--radius-lg); overflow: hidden; } .table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; } .table-wrap thead th { font-size: 10px; font-weight: 700; color: var(--gray-600); letter-spacing: 0.08em; text-transform: uppercase; text-align: left; padding: 13px 16px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); white-space: nowrap; } .table-wrap tbody td { padding: 9px 16px; border-bottom: 1px solid var(--gray-100); color: var(--gray-900); vertical-align: middle; } .table-wrap tbody tr:last-child td { border-bottom: none; } .table-wrap tbody tr { transition: background 0.12s, box-shadow 0.12s; } .table-wrap tbody tr:hover { background: var(--blue-lt); box-shadow: inset 3px 0 0 var(--blue); cursor: pointer; } /* ═══ BADGES ═════════════════════════════════════════════════════════ */ .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; } .status-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .st-AB { background: var(--amber-lt); color: var(--amber); } .st-PR { background: var(--blue-lt); color: var(--blue); } .st-CO { background: var(--purple-lt); color: var(--purple); } .st-EN { background: var(--green-lt); color: var(--green); } .st-FI { background: var(--gray-100); color: var(--gray-600); } .st-CA { background: var(--red-lt); color: var(--red); } .src-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-xs); letter-spacing: 0.04em; text-transform: uppercase; width: fit-content; line-height: 1.2; } .src-ze { background: var(--orange-lt); color: var(--orange); } .src-dd { background: var(--blue-lt); color: var(--blue); } .src-app { background: var(--green-lt); color: var(--green); } .src-ifood { background: var(--red-lt); color: var(--red); } /* Badge de categoria genérica (pílula) */ .cat-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-xs); font-size: 11px; font-weight: 600; background: var(--blue-lt); color: var(--blue); } /* ═══ TOAST ══════════════════════════════════════════════════════════ */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px); background: var(--gray-900); color: white; padding: 12px 20px; border-radius: var(--radius-lg); font-size: 13px; font-weight: 600; opacity: 0; transition: all 0.25s; z-index: 400; pointer-events: none; max-width: 90vw; text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.success { background: var(--green); } .toast.error { background: var(--red); } /* ═══ MODAL ══════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(13,16,33,0.6); display: flex; align-items: center; justify-content: center; z-index: 500; opacity: 0; pointer-events: none; transition: opacity 0.2s; backdrop-filter: blur(4px); } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal { background: white; border-radius: var(--radius-2xl); padding: 28px; width: 420px; max-width: 92vw; } .modal h2 { font-size: 18px; font-weight: 800; color: var(--gray-900); margin-bottom: 10px; letter-spacing: -0.01em; } .modal p { font-size: 13px; color: var(--gray-600); line-height: 1.6; } .modal-actions { display: flex; gap: 10px; margin-top: 20px; } .btn-confirm-ok { flex: 1; background: var(--green); color: white; border: none; border-radius: var(--radius-md); padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity 0.15s; } .btn-confirm-ok:hover { opacity: 0.9; } .btn-cancel-modal { background: white; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 11px 20px; color: var(--gray-600); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .btn-cancel-modal:hover { border-color: var(--gray-400); color: var(--gray-900); } /* ═══ ESTADOS (loading / empty) ══════════════════════════════════════ */ .empty-state { background: white; border: 1px solid var(--gray-100); border-radius: var(--radius-xl); padding: 60px 20px; text-align: center; color: var(--gray-400); } .empty-state-icon { font-size: 40px; margin-bottom: 10px; } .empty-state-text { font-size: 14px; } .loading-state { display: flex; align-items: center; justify-content: center; padding: 60px 20px; gap: 12px; color: var(--gray-400); font-size: 14px; } .empty-items { background: white; border: 1px solid var(--gray-100); border-radius: var(--radius-md); padding: 32px 16px; text-align: center; color: var(--gray-400); } /* ═══ SPINNERS ═══════════════════════════════════════════════════════ */ .spinner { width: 12px; height: 12px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; } .spinner-dark { width: 16px; height: 16px; border: 2.5px solid var(--gray-200); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; } .spinner-tiny { width: 11px; height: 11px; border: 1.5px solid var(--gray-200); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:0.4} } /* ═══ PAGINAÇÃO ══════════════════════════════════════════════════════ */ .pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 16px 0 8px; flex-wrap: wrap; } .page-btn { min-width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--gray-200); background: white; color: var(--gray-600); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; } .page-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); } .page-btn.active { background: var(--blue); border-color: var(--blue); color: white; } .page-btn:disabled { opacity: 0.4; cursor: not-allowed; } .page-ellipsis { color: var(--gray-400); padding: 0 4px; font-size: 13px; } .page-info { font-size: 12px; color: var(--gray-400); margin: 0 12px; font-weight: 500; }