/* ========================================================================= Design System — SucessOdonto Presencial · credenciamento Tema "SaaS claro": superfícies brancas sobre #f4f6fa, sombras suaves, semântica de cor (verde=entrada, vermelho=saída, âmbar=alerta) e a identidade do evento (navy #1c203f + dourado #c3b16a) nos momentos de marca. Fonte: Inter (variável, self-hosted — zero dependência externa no evento). ========================================================================= */ @font-face { font-family: "Inter"; src: url("/shared/fonts/InterVariable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* superfícies */ --bg: #f4f6fa; --surface: #ffffff; --surface-2: #f8fafc; --line: #e5eaf1; --line-strong: #d4dbe6; /* tinta */ --ink: #1c2433; --ink-soft: #46556b; --muted: #8593a8; /* marca do evento */ --navy: #1c203f; --navy-2: #262b50; --gold: #c3b16a; --gold-soft: #d8ca90; /* ação + semântica */ --primary: #4f46e5; --primary-soft: #eef2ff; --primary-strong: #4338ca; --in: #059669; --in-soft: #ecfdf5; --out: #dc2626; --out-soft: #fef2f2; --warn: #d97706; --warn-soft: #fffbeb; /* geometria + profundidade */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --shadow-1: 0 1px 2px rgba(28, 36, 51, .05), 0 1px 6px rgba(28, 36, 51, .06); --shadow-2: 0 4px 12px rgba(28, 36, 51, .08), 0 12px 32px rgba(28, 36, 51, .10); --shadow-pop: 0 24px 64px rgba(16, 18, 36, .28); --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; } /* ------------------------------------------------------- tema escuro */ /* Ativado com . Os apps leem localStorage "ui_theme" (compartilhado na mesma origem) — padrão: dark. */ html[data-theme="dark"] { --bg: #0e1219; --surface: #161c28; --surface-2: #1a2130; --line: #242e41; --line-strong: #33405a; --ink: #e7ecf5; --ink-soft: #b6c2d6; --muted: #7e8ba2; --primary: #818cf8; --primary-soft: rgba(99, 102, 241, .16); --primary-strong: #a5b0fc; --in: #34d399; --in-soft: rgba(16, 185, 129, .13); --out: #f87171; --out-soft: rgba(239, 68, 68, .13); --warn: #fbbf24; --warn-soft: rgba(217, 119, 6, .16); --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 6px rgba(0, 0, 0, .28); --shadow-2: 0 4px 12px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45); --shadow-pop: 0 24px 64px rgba(0, 0, 0, .6); } html[data-theme="dark"] ::selection { background: rgba(129, 140, 248, .3); color: #fff; } html[data-theme="dark"] .btn-primary { background: #6366f1; color: #fff; } html[data-theme="dark"] .btn-primary:hover:not(:disabled) { background: #818cf8; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; } [hidden] { display: none !important; } ::selection { background: var(--primary-soft); color: var(--primary-strong); } /* scrollbar discreta (webkit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid var(--bg); } ::-webkit-scrollbar-track { background: transparent; } /* foco acessível, sem outline feio no clique */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* ---------------------------------------------------------------- topo */ .topbar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: sticky; top: 0; z-index: 30; } .brand { display: flex; align-items: center; gap: 14px; } /* a logo do evento é branca+dourada → vive num chip navy */ .brand-chip { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); border-radius: var(--r-sm); padding: 7px 12px; display: flex; align-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } .brand-chip img { height: 22px; width: auto; display: block; object-fit: contain; } .brand-titles b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; } .brand-titles small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); filter: brightness(.82) saturate(1.1); } /* status "ao vivo" */ .live { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); } .live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: .2s; } .live .dot.on { background: var(--in); box-shadow: 0 0 0 4px rgba(5, 150, 105, .15); animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(5, 150, 105, .06); } } /* usuário logado */ .userchip { display: flex; align-items: center; gap: 10px; } .userchip .av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: var(--gold-soft); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; letter-spacing: .02em; } .userchip .uname { font-weight: 600; font-size: 13px; line-height: 1.2; } .userchip .urole { font-size: 11px; color: var(--muted); font-weight: 500; } /* ----------------------------------------------------------------- nav */ .nav { background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 24px; display: flex; gap: 4px; overflow-x: auto; } .nav a { padding: 12px 14px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s; } .nav a:hover { color: var(--ink); } .nav a.active { color: var(--primary); border-bottom-color: var(--primary); } .nav a .nbadge { display: inline-block; min-width: 18px; text-align: center; margin-left: 6px; background: var(--warn-soft); color: var(--warn); border-radius: 99px; font-size: 11px; font-weight: 700; padding: 1px 6px; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- cards */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; } .card > h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; } .card > h3 .spacer { margin-left: auto; } /* KPI */ .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 16px 18px; position: relative; transition: transform .15s ease, box-shadow .15s ease; } .kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); } .kpi .n { font-size: 32px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kpi .l { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 6px; } .kpi.k-primary .n { color: var(--primary); } .kpi.k-in .n { color: var(--in); } .kpi.k-out .n { color: var(--out); } .kpi.k-warn .n { color: var(--warn); } /* --------------------------------------------------------------- pills */ .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .pill.IN, .pill.in { background: var(--in-soft); color: var(--in); } .pill.OUT, .pill.out { background: var(--out-soft); color: var(--out); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.stand { background: var(--primary-soft); color: var(--primary); } .pill.neutral { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); } .pill.ticket { background: var(--navy); color: var(--gold-soft); } .pill.ticket.t-staff { background: #dc2626; color: #fff; } /* --------------------------------------------------------------- forms */ input, select, textarea { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 10px 13px; color: var(--ink); font-family: var(--font); font-size: 14px; font-weight: 500; transition: border-color .15s, box-shadow .15s; } input::placeholder { color: var(--muted); font-weight: 400; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); } label.lbl { display: block; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin: 14px 0 6px; } label.lbl em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; } /* ------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--r-sm); cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 600; padding: 10px 18px; transition: background .15s, transform .06s, box-shadow .15s, border-color .15s, color .15s; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(67, 56, 202, .35); } .btn-primary:hover:not(:disabled) { background: var(--primary-strong); } .btn-ghost { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line-strong); } .btn-ghost:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .btn-danger-ghost { background: var(--surface); color: var(--muted); border: 1px solid var(--line-strong); font-size: 12px; padding: 6px 12px; } .btn-danger-ghost:hover { border-color: var(--out); color: var(--out); } .btn-navy { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: var(--gold-soft); } .btn-navy:hover:not(:disabled) { filter: brightness(1.12); } /* botão copiar (ícone) */ .copy { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); border-radius: var(--r-sm); width: 34px; height: 34px; cursor: pointer; font-size: 14px; flex: 0 0 auto; transition: .12s; display: inline-flex; align-items: center; justify-content: center; } .copy:hover { border-color: var(--primary); color: var(--primary); } .copy.ok { background: var(--in); border-color: var(--in); color: #fff; } /* -------------------------------------------------------------- tables */ table.tbl { width: 100%; border-collapse: collapse; } .tbl th, .tbl td { text-align: left; padding: 11px 18px; font-size: 13px; border-bottom: 1px solid var(--line); } .tbl th { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; background: var(--surface-2); } .tbl tbody tr { transition: background .12s; } .tbl tbody tr:hover { background: var(--surface-2); } .tbl tbody tr:last-child td { border-bottom: none; } .tbl .num { font-weight: 700; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- misc */ .empty { padding: 20px 18px; color: var(--muted); font-size: 13px; } .hint { color: var(--muted); font-size: 12px; line-height: 1.55; } .mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; } .time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } h2.page-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; } p.page-sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; } /* avatar de iniciais */ .avatar-ini { border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: var(--gold-soft); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; } /* ---------------------------------------------------------- tela login */ /* hero navy: aqui a logo branca+dourada do evento brilha */ .login-screen { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(90% 70% at 80% -20%, rgba(195, 177, 106, .14) 0%, transparent 60%), radial-gradient(120% 80% at 50% -10%, #2a3060 0%, var(--navy) 62%); } .login-screen.on { display: flex; } .login-box { width: 100%; max-width: 392px; background: var(--surface); border-radius: var(--r-lg); padding: 32px 28px 28px; box-shadow: var(--shadow-pop); animation: rise .3s cubic-bezier(.2, .8, .2, 1); } @keyframes rise { from { transform: translateY(12px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } } .login-box .logo-chip { background: linear-gradient(135deg, var(--navy), var(--navy-2)); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 22px; display: flex; align-items: center; justify-content: center; } .login-box .logo-chip img { height: 30px; width: auto; object-fit: contain; } .login-box h1 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 2px; } .login-box > p { color: var(--muted); font-size: 13px; margin-bottom: 8px; } .login-box input { width: 100%; } .login-box .btn { width: 100%; margin-top: 22px; padding: 12px; } .login-err { color: var(--out); font-size: 13px; font-weight: 600; margin-top: 12px; min-height: 18px; } /* ---------------------------------------------------------- animações */ @keyframes slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .anim-in { animation: slide-in .22s ease-out; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }