/* ============================================================ Sport API Manager - Design System Dark-first, minimalista, com tema claro opcional via [data-theme="light"] no (ver assets/js/theme.js). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root { /* --- Superfícies (dark = padrão) - translúcidas, feitas pra ficar sobre os blobs de gradiente do com backdrop-filter --- */ --bg: #08080a; --bg-elevated: rgba(20, 20, 26, .72); --bg-card: rgba(255, 255, 255, .045); --bg-card-strong: rgba(255, 255, 255, .07); --bg-hover: rgba(255, 255, 255, .06); --bg-input: rgba(255, 255, 255, .05); --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .16); --blur: blur(20px) saturate(150%); /* --- Texto --- */ --text: #f7f7f8; --text-secondary: #aeaeb8; --text-tertiary: #75757f; /* --- Acento (gradiente principal) --- */ --accent: #6d6af6; --accent-2: #a855f7; --accent-hover: #5b57f5; --accent-soft: #6d6af62a; --accent-text: #b4b2ff; --accent-gradient: linear-gradient(135deg, #7c79ff 0%, #a855f7 100%); /* --- Semânticas --- */ --success: #2ee686; --success-soft: #22c55e26; --success-gradient: linear-gradient(135deg, #34d399 0%, #10b981 100%); --warning: #ffb648; --warning-soft: #f5a62326; --warning-gradient: linear-gradient(135deg, #fbbf24 0%, #f97316 100%); --danger: #ff5b73; --danger-soft: #f0455c26; --danger-gradient: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); --info: #4fc9ff; --info-soft: #38bdf826; --info-gradient: linear-gradient(135deg, #38bdf8 0%, #6d6af6 100%); /* --- Forma --- */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 30px -8px rgba(0, 0, 0, .55); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --sidebar-width: 250px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color-scheme: dark; } :root[data-theme="light"] { --bg: #eef0f6; --bg-elevated: rgba(255, 255, 255, .75); --bg-card: rgba(255, 255, 255, .55); --bg-card-strong: rgba(255, 255, 255, .8); --bg-hover: rgba(20, 20, 40, .045); --bg-input: rgba(255, 255, 255, .7); --border: rgba(20, 20, 40, .09); --border-strong: rgba(20, 20, 40, .18); --text: #17171d; --text-secondary: #55555f; --text-tertiary: #86868f; --accent-soft: #6d6af61c; --accent-text: #6a5cf0; --success-soft: #22c55e1c; --warning-soft: #f5a6231c; --danger-soft: #f0455c1c; --info-soft: #38bdf81c; --shadow: 0 1px 2px rgba(20, 20, 30, .05), 0 8px 30px -8px rgba(20, 20, 30, .14); --shadow-sm: 0 1px 2px rgba(20, 20, 30, .06); color-scheme: light; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.55; transition: background-color .15s ease, color .15s ease; position: relative; min-height: 100vh; } /* Blobs de gradiente fixos atrás de tudo - é o que dá profundidade pros cards translúcidos com blur na frente (glassmorphism) */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 12% 10%, rgba(109, 106, 246, .22), transparent 38%), radial-gradient(circle at 88% 18%, rgba(168, 85, 247, .16), transparent 40%), radial-gradient(circle at 78% 88%, rgba(56, 189, 248, .13), transparent 42%), radial-gradient(circle at 15% 85%, rgba(46, 230, 134, .08), transparent 38%); } :root[data-theme="light"] body::before { background: radial-gradient(circle at 12% 10%, rgba(109, 106, 246, .16), transparent 38%), radial-gradient(circle at 88% 18%, rgba(168, 85, 247, .13), transparent 40%), radial-gradient(circle at 78% 88%, rgba(56, 189, 248, .12), transparent 42%), radial-gradient(circle at 15% 85%, rgba(46, 230, 134, .09), transparent 38%); } .sidebar, .main-content { position: relative; z-index: 1; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: -.02em; } /* Chip/pill pequeno, tipo "eyebrow" acima de títulos - rótulo curto que contextualiza a seção (ex: "GESTÃO DE PLANOS" acima de "Planos") */ .eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--accent-soft); color: var(--accent-text); border: 1px solid rgba(124, 121, 255, .22); margin-bottom: 10px; } .eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } small { color: var(--text-tertiary); font-size: 12.5px; } code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: .9em; background: var(--bg-input); border: 1px solid var(--border); padding: 2px 6px; border-radius: 5px; color: var(--accent-text); } ::selection { background: var(--accent-soft); color: var(--text); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } /* ============================================================ LAYOUT: SIDEBAR + TOPBAR ============================================================ */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; background: var(--bg-elevated); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 100; transition: transform .2s ease; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px; border-bottom: 1px solid var(--border); } .sidebar-header .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; } .sidebar-header .logo i { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--accent-gradient); box-shadow: 0 4px 14px -2px rgba(109, 106, 246, .55); color: #fff; border-radius: var(--radius-sm); font-size: 13px; } .sidebar-toggle { display: none; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 16px; } .sidebar-profile { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); } .profile-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); overflow: hidden; flex-shrink: 0; } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; } .profile-info h4 { font-size: 13px; font-weight: 600; } .profile-info p { font-size: 12px; color: var(--text-tertiary); } .sidebar-menu { flex: 1; overflow-y: auto; padding: 10px; } .sidebar-menu ul { list-style: none; display: flex; flex-direction: column; gap: 2px; } .sidebar-menu a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13.5px; font-weight: 500; transition: background-color .12s ease, color .12s ease; } .sidebar-menu a i { width: 16px; text-align: center; font-size: 14px; } .sidebar-menu li:hover a { background: var(--bg-hover); color: var(--text); } .sidebar-menu li.active a { background: linear-gradient(135deg, rgba(124, 121, 255, .22) 0%, rgba(168, 85, 247, .16) 100%); color: var(--accent-text); box-shadow: inset 0 0 0 1px rgba(124, 121, 255, .25); } .sidebar-menu li.sidebar-section-label { padding: 14px 12px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); } .sidebar-menu li.sidebar-section-label:hover { background: none; } .sidebar-footer { padding: 12px; border-top: 1px solid var(--border); } .account-chip { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 10px; } .account-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); flex-shrink: 0; } .account-chip strong { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); font-weight: 700; } .account-chip p { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-chip > div { flex: 1; min-width: 0; } .btn-logout { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); color: var(--text-secondary); flex-shrink: 0; } .btn-logout:hover { background: var(--danger-soft); color: var(--danger); } /* Botão de menu flutuante (mobile) - fica fora da .sidebar de propósito, senão fica escondido junto quando o menu está fechado (translateX) */ .mobile-menu-btn { display: none; position: fixed; top: 14px; left: 14px; z-index: 150; background: var(--bg-elevated); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); width: 40px; height: 40px; border-radius: var(--radius-sm); color: var(--text); cursor: pointer; align-items: center; justify-content: center; font-size: 16px; } .sidebar-header .sidebar-toggle { display: none; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px); z-index: 99; } .sidebar-backdrop.active { display: block; } .main-content { margin-left: var(--sidebar-width); min-height: 100vh; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 11px 28px; border-bottom: 1px solid var(--border); background: var(--bg-elevated); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); position: sticky; top: 0; z-index: 50; } .topbar-left { display: flex; align-items: center; gap: 10px; } .topbar-left .eyebrow { margin-bottom: 0; } .topbar-left .breadcrumb { display: none; } .topbar-left h1 { font-size: 20px; font-weight: 800; letter-spacing: -.03em; } .breadcrumb { font-size: 12.5px; color: var(--text-tertiary); } .breadcrumb a:hover { color: var(--text-secondary); } .topbar-right { display: flex; align-items: center; gap: 8px; } .content { padding: 26px 28px 60px; max-width: 1400px; } /* ============================================================ THEME TOGGLE + NOTIFICATIONS + USER DROPDOWN ============================================================ */ .icon-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; font-size: 14px; position: relative; transition: border-color .12s ease, color .12s ease; } .icon-btn:hover { border-color: var(--border-strong); color: var(--text); } .theme-toggle .fa-sun { display: none; } :root[data-theme="light"] .theme-toggle .fa-sun { display: inline; } :root[data-theme="light"] .theme-toggle .fa-moon { display: none; } .btn-notification { position: relative; } .notification-badge { position: absolute; top: -4px; right: -4px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } .user-dropdown { position: relative; } .btn-user { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 12px; color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; } .btn-user:hover { border-color: var(--border-strong); } .btn-user i { font-size: 10px; color: var(--text-tertiary); } .dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--bg-elevated); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 190px; padding: 6px; display: none; z-index: 200; } .user-dropdown.open .dropdown-menu { display: block; } .dropdown-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); } .dropdown-menu a:hover { background: var(--bg-hover); color: var(--text); } .dropdown-menu a i { width: 14px; text-align: center; } .dropdown-menu .divider { height: 1px; background: var(--border); margin: 6px 2px; } /* ============================================================ GRID / ROWS ============================================================ */ .row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 0; } .col-3 { flex: 0 0 calc(25% - 15px); } .col-4 { flex: 0 0 calc(33.333% - 14px); } .col-6 { flex: 0 0 calc(50% - 10px); } .col-8 { flex: 0 0 calc(66.666% - 7px); } .stats-row { margin-bottom: 20px; } /* ============================================================ CARDS ============================================================ */ .card { background: var(--bg-card); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 20px; overflow: hidden; transition: border-color .15s ease, background-color .15s ease; } .card:hover { border-color: var(--border-strong); } .card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .card-header h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; } .card-body { padding: 20px; } /* ============================================================ STAT CARDS ============================================================ */ .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px; height: 100%; } .stat-icon { width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0; background: var(--accent-gradient); box-shadow: 0 6px 16px -4px rgba(109, 106, 246, .5); } .quick-stat-icon { box-shadow: 0 4px 12px -3px rgba(0, 0, 0, .4); } .stat-info h3 { font-size: 27px; font-weight: 800; letter-spacing: -.03em; } .stat-info p { font-size: 12.5px; color: var(--text-tertiary); margin-top: 2px; } .stat-details { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .stat-detail { font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 20px; background: var(--bg-hover); color: var(--text-secondary); } .stat-detail.success { background: var(--success-soft); color: var(--success); } .stat-detail.warning { background: var(--warning-soft); color: var(--warning); } .stat-detail.error { background: var(--danger-soft); color: var(--danger); } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .stat-item { text-align: center; padding: 12px 8px; background: var(--bg-hover); border-radius: var(--radius-sm); } .stat-label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; } .stat-value { font-size: 19px; font-weight: 700; margin-top: 4px; } .quick-stats { display: flex; flex-direction: column; gap: 12px; } .quick-stat { display: flex; align-items: center; gap: 12px; } .quick-stat-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; } .quick-stat-info h4 { font-size: 16px; font-weight: 700; } .quick-stat-info p { font-size: 11.5px; color: var(--text-tertiary); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font-family: var(--font); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, opacity .12s ease; white-space: nowrap; } .btn-primary { background: var(--accent-gradient); color: #fff; box-shadow: 0 4px 14px -3px rgba(109, 106, 246, .5); } .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 6px 18px -3px rgba(109, 106, 246, .65); } .btn-secondary { background: var(--bg-card); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); color: var(--text); border-color: var(--border); } .btn-secondary:hover { border-color: var(--border-strong); background: var(--bg-hover); } .btn-warning { background: var(--warning-soft); color: var(--warning); } .btn-warning:hover { opacity: .8; } .btn-info { background: var(--info-soft); color: var(--info); } .btn-info:hover { opacity: .8; } .btn-block { width: 100%; } .btn-sm { padding: 6px 12px; font-size: 12.5px; } .actions { display: flex; gap: 6px; } .btn-action { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; font-size: 12.5px; } .btn-action:hover { border-color: var(--border-strong); color: var(--text); } .btn-action.btn-delete:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); } .btn-action.btn-status:hover { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); } .btn-action.btn-edit:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); } .btn-copy { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-tertiary); cursor: pointer; } .btn-copy:hover { color: var(--text); border-color: var(--border-strong); } /* ============================================================ FORMS ============================================================ */ .form-section { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--border); } .form-section:last-of-type { border-bottom: none; margin-bottom: 8px; padding-bottom: 0; } .form-section h4 { display: flex; align-items: center; gap: 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); margin-bottom: 16px; } .form-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .form-row .form-group { flex: 1; min-width: 200px; margin-bottom: 0; } .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"], .form-group input[type="number"], .form-group input[type="url"], .form-group input[type="date"], .form-group input[type="file"], .form-group select, .form-group textarea { width: 100%; padding: 9px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: 13.5px; transition: border-color .12s ease, box-shadow .12s ease; } /* fechado - com uma cor translúcida (--bg-input, pensada pra ficar sobre o blur do resto da UI) isso "revela" branco atrás no popup, que não tem esse fundo desfocado. Sobrescreve só aqui com uma cor sólida da paleta (--bg), depois do bloco de cima de propósito pra ganhar na cascata. */ .form-group select, select { background-color: var(--bg); } .form-group input[type="color"] { width: 52px; height: 36px; padding: 3px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* O popup nativo de opções do , além da cor sólida forçada em cada