/* Design system do painel. Mesmos tokens do site público (âmbar/preto), reescritos aqui porque o painel é uma casca separada. */ :root { --amber: #e08b02; --amber-soft: rgba(224, 139, 2, 0.12); --amber-line: rgba(224, 139, 2, 0.28); --bg-0: #08080a; --bg-1: #0e0e11; --bg-2: #141418; --bg-3: #1b1b20; --line: #26262d; --line-strong: #35353e; --ink: #f5f5f7; --ink-2: #b4b4bd; --ink-3: #7c7c87; --danger: #ef4444; --success: #22c55e; /* Texto sobre os fundos tingidos (avisos, tags, totais negativos). Precisa ser token: no tema claro um vermelho-claro some no fundo claro. */ --danger-ink: #fca5a5; --success-ink: #86efac; --info-ink: #93c5fd; --qr-bg: #ffffff; /* o QR do PIX precisa de fundo branco nos dois temas */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --sidebar-w: 244px; --header-h: 62px; } /* ── Tema claro ────────────────────────────────────────────────── O escuro é o padrão: o só ganha data-theme="light" quando o cliente escolhe. Aqui só os tokens mudam — nenhuma regra de layout é reescrita, então as duas versões não têm como divergir. */ :root[data-theme='light'] { --amber-soft: rgba(224, 139, 2, 0.13); --amber-line: rgba(224, 139, 2, 0.42); --bg-0: #f1f1f4; /* fundo da página */ --bg-1: #ffffff; /* cartões */ --bg-2: #f6f6f8; /* campos e cabeçalhos de tabela */ --bg-3: #eaeaef; /* hover */ --line: #e2e2e8; --line-strong: #c9c9d2; --ink: #17171b; --ink-2: #4b4b56; --ink-3: #74747f; /* Escurecidos para ler sobre os fundos tingidos claros. */ --danger-ink: #b42318; --success-ink: #15803d; --info-ink: #1d4ed8; } /* O painel muda de tema sem recarregar: a transição evita o "flash". */ body { transition: background 0.2s ease, color 0.2s ease; } @media (prefers-reduced-motion: reduce) { body { transition: none; } } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg-0); color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, p, figure { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } /* ── Campos ─────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: 0.78rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0.01em; } .input { width: 100%; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); font-size: 0.94rem; font-family: inherit; transition: border-color 0.15s, background 0.15s; } .input::placeholder { color: var(--ink-3); } .input:focus { outline: none; border-color: var(--amber); background: var(--bg-3); } .input[aria-invalid='true'] { border-color: var(--danger); } .input-group { position: relative; display: flex; align-items: center; } .input-group .input { padding-left: 42px; } .input-icon { position: absolute; left: 14px; display: flex; color: var(--ink-3); pointer-events: none; } .input-action { position: absolute; right: 8px; display: flex; padding: 7px; background: none; border: 0; border-radius: var(--r-sm); color: var(--ink-3); cursor: pointer; } .input-action:hover { color: var(--ink); background: var(--bg-3); } .field-error { font-size: 0.78rem; color: var(--danger); } /* ── Botões ─────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid transparent; border-radius: var(--r-md); font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; transition: filter 0.15s, background 0.15s, border-color 0.15s; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-amber { background: var(--amber); color: #000; } .btn-amber:hover:not(:disabled) { filter: brightness(1.08); } .btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-2); } .btn-ghost:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); } .btn-block { width: 100%; } /* ── Avisos ─────────────────────────────────── */ .alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); font-size: 0.86rem; line-height: 1.5; } .alert-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--danger-ink); } .alert-ok { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.28); color: var(--success-ink); } .alert svg { flex-shrink: 0; margin-top: 2px; } /* ── Cartões ────────────────────────────────── */ .card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); } /* ================================================================ TELAS DE AUTENTICAÇÃO ================================================================ */ .auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } .auth-admin { grid-template-columns: 1fr; } /* ── Coluna da marca ─────────────────────────── */ .auth-brand { position: relative; overflow: hidden; background: var(--bg-0); border-right: 1px solid var(--line); display: flex; align-items: center; } .brand-atm { position: absolute; inset: 0; pointer-events: none; } .atm-blob { position: absolute; width: 620px; height: 620px; top: -220px; right: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(224, 139, 2, 0.2) 0%, transparent 65%); filter: blur(80px); animation: breathe 8s ease-in-out infinite; } @keyframes breathe { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } .atm-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 100% 80% at 40% 50%, black 10%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 100% 80% at 40% 50%, black 10%, transparent 100%); } .brand-inner { position: relative; padding: 56px 60px; max-width: 520px; } .wordmark, .mobile-wordmark { display: block; font-size: 0.95rem; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 48px; } .wordmark b, .mobile-wordmark b { color: var(--amber); } .brand-h { font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 900; letter-spacing: -0.05em; line-height: 1.02; margin-bottom: 18px; } .brand-h span { color: var(--amber); } .brand-p { color: var(--ink-2); font-size: 0.94rem; max-width: 380px; margin-bottom: 40px; } .brand-sig { padding: 20px 22px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: var(--r-lg); backdrop-filter: blur(8px); max-width: 340px; } .sig-head { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--ink-2); margin-bottom: 16px; } .sig-head strong { margin-left: auto; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--success); } .sig-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 5px var(--success); } 50% { box-shadow: 0 0 13px var(--success), 0 0 22px rgba(34, 197, 94, 0.4); } } .sig-bars { display: flex; align-items: flex-end; gap: 3px; height: 44px; } .sig-bars span { flex: 1; min-height: 4px; border-radius: 2px 2px 0 0; background: var(--amber); opacity: 0.7; animation: live 1.8s ease-in-out infinite alternate; } @keyframes live { from { opacity: 0.35; transform: scaleY(0.85); } to { opacity: 0.9; transform: scaleY(1); } } /* ── Coluna do formulário ────────────────────── */ .auth-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 24px; background: var(--bg-1); } .auth-admin .auth-panel { background: var(--bg-0); } .auth-card { width: 100%; max-width: 400px; } .auth-admin .auth-card { padding: 40px 36px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } .mobile-wordmark { display: none; } .auth-head { margin-bottom: 28px; } .auth-head h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; } .auth-head p { margin-top: 8px; color: var(--ink-3); font-size: 0.9rem; } .admin-badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; padding: 5px 11px; background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--amber); } .auth-foot { margin-top: 28px; width: 100%; max-width: 400px; font-size: 0.85rem; color: var(--ink-3); text-align: center; } .foot-note { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--ink-3); } /* Formulários */ .form { display: flex; flex-direction: column; gap: 18px; } .form-register { gap: 16px; } .form-register .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .link, .link-sm { color: var(--amber); font-weight: 600; } .link-sm { font-size: 0.78rem; } .link:hover, .link-sm:hover { text-decoration: underline; } .opt, .hint { color: var(--ink-3); font-weight: 400; font-size: 0.76rem; } .turnstile { display: flex; justify-content: center; min-height: 65px; } @media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-brand { display: none; } .mobile-wordmark { display: block; margin-bottom: 28px; } } @media (max-width: 520px) { .form-register .row { grid-template-columns: 1fr; } } /* ================================================================ CASCA DO PAINEL ================================================================ */ .shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column; padding: 22px 14px; background: var(--bg-1); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; } .side-head { padding: 0 10px 22px; } .side-head .wordmark { font-size: 0.9rem; margin-bottom: 0; } .scope { display: block; margin-top: 3px; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); } .side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 11px; border: 0; border-radius: var(--r-md); background: none; font-size: 0.87rem; font-weight: 500; color: var(--ink-2); cursor: pointer; text-align: left; transition: background 0.15s, color 0.15s; } .nav-item:hover { background: var(--bg-2); color: var(--ink); } .nav-item.is-active { background: var(--amber-soft); color: var(--amber); font-weight: 650; } .nav-out { margin-top: 8px; color: var(--ink-3); } .nav-out:hover { color: var(--danger); background: rgba(239, 68, 68, 0.08); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: var(--header-h); display: flex; align-items: center; gap: 14px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--bg-1); position: sticky; top: 0; z-index: 5; } .page-title { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; } .top-right { margin-left: auto; display: flex; align-items: center; gap: 11px; } .who { font-size: 0.84rem; color: var(--ink-2); } .avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--amber-soft); border: 1px solid var(--amber-line); color: var(--amber); font-size: 0.72rem; font-weight: 800; } .icon-btn { display: flex; padding: 8px; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer; } .only-mobile { display: none; } .content { padding: 26px 24px 48px; flex: 1; } .empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 64px 32px; text-align: center; color: var(--ink-3); } .empty h2 { font-size: 1.05rem; font-weight: 700; color: var(--ink-2); } .empty p { font-size: 0.86rem; max-width: 420px; } .empty .btn { margin-top: 10px; } /* ── Barra de ações da página ───────────────── */ .toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .toolbar-info { flex: 1; min-width: 220px; display: flex; flex-direction: column; } .toolbar-info strong { font-size: 0.92rem; font-weight: 700; } .toolbar-info span { font-size: 0.78rem; color: var(--ink-3); } .btn-sm { padding: 8px 14px; font-size: 0.82rem; } .content > .alert { margin-bottom: 18px; } /* ================================================================ LISTA DE PLANOS ================================================================ */ .plan-list { display: flex; flex-direction: column; gap: 10px; } .plan-row { /* flex com wrap em vez de grid de colunas fixas: a área de conteúdo é 244px mais estreita que a janela, então breakpoint por viewport não servia — do jeito antigo a linha estourava para o lado em telas de 1280. */ display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 20px 16px 12px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color 0.15s, background 0.15s; } .plan-row:hover { border-color: var(--line-strong); } .plan-row.is-hi { border-left: 3px solid var(--amber); padding-left: 10px; } .plan-row.is-off { opacity: 0.62; } .plan-row.is-off:hover { opacity: 1; } /* Ordem */ .plan-order { display: flex; flex-direction: column; align-items: center; gap: 2px; } .plan-order .pos { font-size: 0.7rem; font-weight: 700; color: var(--ink-3); line-height: 1; } .arrow { width: 26px; height: 22px; display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; color: var(--ink-2); font-size: 0.8rem; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .arrow:hover:not(:disabled) { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); } .arrow:disabled { opacity: 0.3; cursor: not-allowed; } /* Identificação */ /* Cada bloco ocupa o que precisa; o que não couber desce de linha. */ .plan-order { flex: 0 0 auto; } .plan-id { flex: 1 1 190px; min-width: 0; } .plan-metrics { flex: 0 0 auto; } .plan-state { flex: 0 0 auto; } .plan-actions { flex: 0 0 auto; margin-left: auto; } .plan-id h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 0.98rem; font-weight: 700; letter-spacing: -0.02em; } .plan-sub { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.76rem; color: var(--ink-3); } .plan-sub code { padding: 1px 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; font-size: 0.94em; } /* Números */ .plan-metrics { display: flex; gap: 26px; } .plan-metrics div { display: flex; flex-direction: column; gap: 2px; } .plan-metrics dt { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .plan-metrics dd { margin: 0; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; } .plan-metrics dd small { font-size: 0.72rem; font-weight: 500; color: var(--ink-3); } .plan-metrics dd.amber { color: var(--amber); } /* Estado */ .pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; white-space: nowrap; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; } .pill-on { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: var(--success-ink); } .pill-on .dot { background: var(--success); box-shadow: 0 0 6px var(--success); } .pill-off { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-3); } .pill-off .dot { background: var(--ink-3); } /* Ações */ .plan-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .inline { display: inline-flex; gap: 6px; align-items: center; } .act { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 0.8rem; font-weight: 600; color: var(--ink); white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .act:hover { background: var(--bg-3); border-color: var(--ink-3); } .act svg { color: var(--ink-3); } .act:hover svg { color: var(--amber); } .act-danger { color: var(--ink-2); } .act-danger:hover { color: var(--danger-ink); border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.12); } /* Etiquetas */ .tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); } .tag-amber { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); } @media (max-width: 640px) { .plan-row { padding: 14px; gap: 12px; } .plan-metrics { gap: 18px; } .plan-actions { flex-wrap: wrap; } } /* ================================================================ EDITOR DE PLANO ================================================================ */ .editor { padding: 0; overflow: hidden; } .editor-head { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); background: var(--bg-2); } .editor-head h2 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; } .editor-head p { margin-top: 3px; font-size: 0.8rem; color: var(--ink-3); } .editor-head > div { flex: 1; } .fs { border: 0; margin: 0; padding: 22px 24px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; } .fs > legend { padding: 0; margin-bottom: 2px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); } .fs .hint strong { color: var(--ink-2); font-weight: 600; } .fs-advanced { display: block; padding: 0; } .fs-advanced > summary { padding: 16px 24px; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; } .fs-advanced > summary::before { content: '▸ '; color: var(--ink-3); } .fs-advanced[open] > summary::before { content: '▾ '; } .fs-advanced > summary:hover { color: var(--ink); } .fs-inner { padding: 0 24px 22px; display: flex; flex-direction: column; gap: 16px; } .editor-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; background: var(--bg-2); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } textarea.input { resize: vertical; line-height: 1.6; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86rem; } /* Campo com unidade */ .input-unit { position: relative; display: flex; align-items: center; } .input-unit .input { padding-right: 62px; } .input-unit .unit { position: absolute; right: 12px; font-size: 0.78rem; color: var(--ink-3); pointer-events: none; } .input-unit-left .input { padding-right: 14px; padding-left: 38px; } .input-unit-left .unit { right: auto; left: 14px; } /* Interruptores */ .toggles { display: flex; gap: 12px; flex-wrap: wrap; } .toggle { display: flex; align-items: center; gap: 11px; padding: 11px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color 0.15s, background 0.15s; flex: 1; min-width: 190px; } .toggle:hover { border-color: var(--line-strong); } .toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-box { position: relative; flex-shrink: 0; width: 38px; height: 22px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line-strong); transition: background 0.18s, border-color 0.18s; } .toggle-box::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-3); transition: transform 0.18s, background 0.18s; } .toggle input:checked + .toggle-box { background: var(--amber-soft); border-color: var(--amber); } .toggle input:checked + .toggle-box::after { transform: translateX(16px); background: var(--amber); } .toggle input:focus-visible + .toggle-box { box-shadow: 0 0 0 3px var(--amber-soft); } .toggle-text strong { display: block; font-size: 0.85rem; font-weight: 600; } .toggle-text small { display: block; font-size: 0.72rem; color: var(--ink-3); } @media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .editor-head { flex-direction: column; } } @media (max-width: 900px) { .only-mobile { display: flex; } .sidebar { position: fixed; z-index: 20; transform: translateX(-100%); transition: transform 0.2s; } .sidebar.open { transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ================================================================ VISÃO GERAL ================================================================ */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; } /* Resumo tem 8 cards: 4 por linha, duas linhas certinhas. */ .stat-grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1100px) { .stat-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .stat-grid-4 { grid-template-columns: 1fr; } } .stat { position: relative; padding: 18px 18px 16px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color 0.15s; } .stat:hover { border-color: var(--line-strong); } .stat-ico { position: absolute; top: 16px; right: 16px; display: flex; color: var(--ink-3); } .stat-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); } .stat-value { margin-top: 8px; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; } .stat-note { margin-top: 5px; font-size: 0.75rem; color: var(--ink-3); } /* Blocos com cabeçalho */ .panel-block { padding: 0; overflow: hidden; } .block-head { display: flex; align-items: baseline; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--bg-2); } .block-head h2 { font-size: 0.95rem; font-weight: 700; flex: 1; } .block-note { font-size: 0.76rem; color: var(--ink-3); } .block-empty { padding: 34px 20px; text-align: center; color: var(--ink-3); font-size: 0.86rem; } /* Lista de usuários */ .user-list { display: flex; flex-direction: column; } .user-list li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); } .user-list li:last-child { border-bottom: none; } .user-list li:hover { background: var(--bg-2); } .avatar-sm { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--amber-soft); border: 1px solid var(--amber-line); color: var(--amber); font-size: 0.78rem; font-weight: 800; } .user-id { flex: 1; min-width: 0; } .user-id strong { display: block; font-size: 0.88rem; font-weight: 600; } .user-id small { display: block; font-size: 0.75rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-list time { font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; } .tag-ok { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.3); color: var(--success-ink); } .tag-danger { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); color: var(--danger-ink); } /* ================================================================ CONFIGURAÇÕES ================================================================ */ .editor + .editor { margin-top: 18px; } .test-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .test-row .hint { flex: 1; min-width: 220px; } .hint code, .toolbar-info code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: 0.92em; } .pill-warn { background: rgba(224, 139, 2, 0.12); border: 1px solid var(--amber-line); color: var(--amber); } .pill-warn .dot { background: var(--amber); box-shadow: 0 0 6px var(--amber); } .alert-info { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); } /* ================================================================ AUDITORIA ================================================================ */ .filters { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .filters .field { min-width: 160px; } .filters .grow { flex: 1; min-width: 200px; } .filters-actions { display: flex; gap: 8px; } .log-list { display: flex; flex-direction: column; } .log { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 13px 20px; border-bottom: 1px solid var(--line); } .log:last-child { border-bottom: none; } .log:hover { background: var(--bg-2); } .log-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.87rem; } .log-main strong { font-weight: 600; } .log-entity { font-size: 0.75rem; color: var(--ink-3); } .log-meta { grid-column: 1; display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.75rem; color: var(--ink-3); } .log-meta b { color: var(--ink-2); font-weight: 600; } .log-side { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 0.74rem; color: var(--ink-3); white-space: nowrap; } .log-side code { font-size: 0.92em; color: var(--ink-3); } .tag-admin { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); } .tag-user { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.3); color: var(--info-ink); } .tag-system { background: var(--bg-3); border-color: var(--line); color: var(--ink-3); } .pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--ink-3); } .act.is-off { opacity: 0.4; pointer-events: none; } @media (max-width: 560px) { .log { grid-template-columns: 1fr; } .log-side { grid-column: 1; grid-row: auto; align-items: flex-start; flex-direction: row; gap: 10px; } } /* ================================================================ ABAS ================================================================ */ .tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .tab { padding: 10px 16px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 0.87rem; font-weight: 600; color: var(--ink-3); transition: color 0.15s, border-color 0.15s; } .tab:hover { color: var(--ink); } .tab.is-active { color: var(--amber); border-bottom-color: var(--amber); } .tab-month { margin-left: auto; padding-bottom: 6px; } .tab-month .input { padding: 7px 10px; font-size: 0.82rem; width: auto; } .tab-note { margin-left: auto; font-size: 0.76rem; color: var(--ink-3); padding-bottom: 10px; } /* ================================================================ RESUMO FINANCEIRO ================================================================ */ .stat-ok .stat-value { color: var(--success); } .stat-bad .stat-value { color: var(--danger-ink); } .two-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; margin-bottom: 18px; } /* Gráfico de barras */ .chart { display: flex; align-items: flex-end; gap: 10px; padding: 22px 20px 16px; min-height: 200px; } .chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; } .bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; height: 120px; } .bar { width: 14px; border-radius: 3px 3px 0 0; transition: filter 0.15s; } .bar-net { background: var(--amber); } .bar-cost { background: var(--line-strong); } .chart-col:hover .bar { filter: brightness(1.2); } .chart-label { font-size: 0.7rem; color: var(--ink-3); text-transform: capitalize; } .chart-value { font-size: 0.72rem; font-weight: 700; } .chart-value.up { color: var(--success); } .chart-value.down { color: var(--danger-ink); } .chart-legend { display: flex; gap: 18px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 0.74rem; color: var(--ink-3); flex-wrap: wrap; } .chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; } .chart-legend .muted { margin-left: auto; } /* Ranking por plano */ .rank { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; } .rank-top { display: flex; justify-content: space-between; gap: 12px; font-size: 0.85rem; } .rank-top strong { font-weight: 600; } .rank-bar { height: 6px; margin: 6px 0 3px; background: var(--bg-3); border-radius: 3px; overflow: hidden; } .rank-bar span { display: block; height: 100%; background: var(--amber); border-radius: 3px; } .rank small { font-size: 0.72rem; color: var(--ink-3); } /* Explicação das métricas */ .explain { display: flex; flex-direction: column; } .explain > div { display: flex; gap: 16px; padding: 11px 20px; border-bottom: 1px solid var(--line); } .explain > div:last-child { border-bottom: none; } .explain dt { width: 96px; flex-shrink: 0; font-size: 0.8rem; font-weight: 700; color: var(--amber); } .explain dd { margin: 0; font-size: 0.82rem; color: var(--ink-2); line-height: 1.6; } /* ── Tabela: coluna de taxa ─────────────────── */ .data-table .fee { color: var(--danger-ink); } .data-table tfoot td { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: none; font-weight: 600; } /* ================================================================ BOUQUETS ================================================================ */ .picker { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); } .pick { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 0.84rem; cursor: pointer; } .pick:last-child { border-bottom: none; } .pick:hover { background: var(--bg-3); } .pick input { width: 15px; height: 15px; accent-color: var(--amber); flex-shrink: 0; } .pick span { flex: 1; } .pick small { font-size: 0.72rem; color: var(--ink-3); } .picker-actions { display: flex; gap: 12px; } .mini-link { background: none; border: 0; padding: 0; font-size: 0.76rem; font-weight: 600; color: var(--amber); cursor: pointer; } .mini-link:hover { text-decoration: underline; } /* ================================================================ E-MAILS ================================================================ */ .mail-preview { width: 100%; height: 520px; border: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--bg-0); } .editor-head code, .plan-sub code, .data-table code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: 0.86em; } @media (max-width: 900px) { .two-cols { grid-template-columns: 1fr; } .tab-month, .tab-note { margin-left: 0; } } /* ================================================================ FICHA DO CLIENTE ================================================================ */ .cell-link { display: block; } .cell-link:hover strong { color: var(--amber); } .line { padding: 16px 20px; border-bottom: 1px solid var(--line); } .line:last-child { border-bottom: none; } .line-head { display: flex; align-items: flex-start; gap: 14px; } .line-head > div { flex: 1; min-width: 0; } .line h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.94rem; font-weight: 700; } .line-sub { margin-top: 4px; font-size: 0.78rem; color: var(--ink-3); } .line-sub b { color: var(--ink-2); } .line-url { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 0.76rem; overflow-x: auto; } .line-url span { color: var(--ink-3); flex-shrink: 0; } .line-url code { white-space: nowrap; color: var(--ink-2); } .line-actions { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .line-pass { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 260px; } .line-pass .input { padding: 7px 10px; font-size: 0.82rem; font-family: ui-monospace, Menlo, Consolas, monospace; } .row-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .row-form .grow { flex: 1; min-width: 200px; } .row-form + .row-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .block-head .act { margin-left: auto; } /* Ações de risco na ficha do cliente */ .danger-zone { border-color: rgba(239, 68, 68, 0.28); } .danger-zone .block-head { background: rgba(239, 68, 68, 0.06); border-bottom-color: rgba(239, 68, 68, 0.2); } .danger-zone .block-head h2 { color: var(--danger-ink); } .danger-row { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--line); } .danger-row:last-child { border-bottom: none; } .danger-row > div { flex: 1; } .danger-row strong { display: block; font-size: 0.88rem; font-weight: 600; } .danger-row small { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--ink-3); } .danger-row b { color: var(--ink-2); } /* ================================================================ PAINEL DO CLIENTE ================================================================ */ .stat-ok-text { color: var(--success); } /* Avisos */ .notice-list { display: flex; flex-direction: column; } .notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); } .notice:last-child { border-bottom: none; } .notice > div { flex: 1; } .notice strong { display: block; font-size: 0.88rem; font-weight: 600; } .notice p { margin-top: 3px; font-size: 0.82rem; color: var(--ink-3); line-height: 1.55; } .notice-ico { display: flex; margin-top: 1px; } .notice-danger .notice-ico { color: var(--danger-ink); } .notice-warn .notice-ico { color: var(--amber); } .notice-info .notice-ico { color: var(--ink-3); } .notice .btn { flex-shrink: 0; } /* Blocos de dica */ .tips { display: flex; flex-direction: column; } .tip { padding: 13px 20px; border-bottom: 1px solid var(--line); } .tip:last-child { border-bottom: none; } .tip strong { display: block; font-size: 0.85rem; font-weight: 600; } .tip p { margin-top: 3px; font-size: 0.81rem; color: var(--ink-3); line-height: 1.6; } .tip em { color: var(--ink-2); font-style: normal; font-weight: 600; } /* Credenciais */ .creds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 20px 0; } .cred-wide { grid-column: 1 / -1; } .cred { display: flex; flex-direction: column; gap: 5px; } .cred-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); } .cred-value { display: block; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 0.82rem; color: var(--ink); overflow-x: auto; white-space: nowrap; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .cred-value:hover { border-color: var(--amber-line); background: var(--bg-3); } .cred-value.copied { border-color: var(--success); color: var(--success-ink); } .cred-value.copied::after { content: ' ✓ copiado'; color: var(--success); } .cred-hint { padding: 14px 20px 18px; font-size: 0.78rem; color: var(--ink-3); } .cred-hint b { color: var(--ink-2); } /* Whitelist */ .whitelist-add { padding: 16px 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } /* Teste */ .trial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); } .trial-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 12px; background: var(--bg-1); text-align: center; } .trial-item span { color: var(--amber); display: flex; } .trial-item strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; } .trial-item small { font-size: 0.72rem; color: var(--ink-3); } @media (max-width: 640px) { .creds { grid-template-columns: 1fr; } } /* ── Busca na barra de ações ─────────────────── */ .search-form { display: flex; align-items: center; gap: 8px; } .search-form .input { width: 240px; padding: 9px 12px; font-size: 0.85rem; } /* ── Menu de ações ───────────────────────────── */ .menu { position: relative; } .menu > summary { list-style: none; cursor: pointer; } .menu > summary::-webkit-details-marker { display: none; } .menu[open] > summary { border-color: var(--amber-line); color: var(--amber); } .menu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 250px; padding: 6px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); } .menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; border: 0; border-radius: var(--r-sm); background: none; font-size: 0.83rem; font-weight: 500; color: var(--ink-2); text-align: left; cursor: pointer; } .menu-item:hover:not(:disabled) { background: var(--bg-3); color: var(--ink); } .menu-item:disabled { opacity: 0.4; cursor: not-allowed; } .menu-item svg { color: var(--ink-3); flex-shrink: 0; } .menu-item:hover:not(:disabled) svg { color: var(--amber); } .menu-item small { margin-left: auto; font-size: 0.72rem; color: var(--ink-3); } .menu-danger { color: var(--danger-ink); } .menu-danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.12); color: var(--danger-ink); } .menu-danger:hover:not(:disabled) svg { color: var(--danger-ink); } /* ── Ajustes da lista de clientes ────────────── */ .plan-id h3 a:hover { color: var(--amber); } .plan-metrics dd small { font-size: 0.68rem; font-weight: 500; color: var(--ink-3); margin-left: 2px; } .plan-metrics dd.soft { font-size: 0.82rem; font-weight: 500; color: var(--ink-2); } .pill-danger { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--danger-ink); } .pill-danger .dot { background: var(--danger); } @media (max-width: 640px) { .search-form { width: 100%; } .search-form .input { flex: 1; width: auto; } } /* ── Renovação e pagamento ───────────────────── */ .plan-pick, .pay-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 18px 20px; } .pick-card { position: relative; cursor: pointer; } .pick-card input { position: absolute; opacity: 0; } .pick-body { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color 0.15s, background 0.15s; } .pick-card:hover .pick-body { border-color: var(--line-strong); } .pick-card input:checked + .pick-body { border-color: var(--amber); background: var(--amber-soft); } .pick-card input:focus-visible + .pick-body { box-shadow: 0 0 0 3px var(--amber-soft); } .pick-body strong { display: flex; align-items: center; gap: 7px; font-size: 0.92rem; font-weight: 700; } .pick-body small { font-size: 0.75rem; color: var(--ink-3); } .pick-body b { margin-top: 4px; font-size: 1.05rem; font-weight: 800; color: var(--amber); } .pick-body b i { font-size: 0.72rem; font-weight: 500; font-style: normal; color: var(--ink-3); } /* Períodos são cartões curtos: só rótulo e preço, então cabem mais por linha. */ .plan-pick:has(.pick-sm) { grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); } .pick-sm .pick-body { padding: 12px 14px; gap: 2px; } .pick-sm .pick-body strong { font-size: 0.82rem; } .pick-sm .pick-body b { margin-top: 2px; font-size: 0.98rem; } .pix-box { display: flex; gap: 22px; padding: 20px; flex-wrap: wrap; } .pix-qr { border-radius: var(--r-md); background: var(--qr-bg); padding: 8px; flex-shrink: 0; } .pix-side { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 12px; } .pix-wait { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--ink-2); } .pix-wait .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: pulse 1.6s ease-in-out infinite; } .switch-line { display: flex; align-items: center; gap: 9px; font-size: 0.87rem; cursor: pointer; } .switch-line input { width: 16px; height: 16px; accent-color: var(--amber); } .pay-status { display: flex; flex-direction: column; gap: 10px; } .pay-line { display: flex; align-items: center; gap: 12px; font-size: 0.84rem; color: var(--ink-3); } .pay-line .pill { min-width: 92px; justify-content: center; } /* ── Submenu do menu lateral ─────────────────── */ .nav-group > summary { list-style: none; cursor: pointer; } .nav-group > summary::-webkit-details-marker { display: none; } .nav-caret { margin-left: auto; font-size: 0.7rem; color: var(--ink-3); transition: transform 0.18s; } .nav-group[open] > summary .nav-caret { transform: rotate(180deg); } .nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 26px; padding-left: 10px; border-left: 1px solid var(--line); } .nav-child { padding: 7px 11px; font-size: 0.83rem; } .nav-child.is-active { background: var(--amber-soft); color: var(--amber); font-weight: 650; } /* ================================================================ INTEGRAÇÕES: CARTÕES E MODAL ================================================================ */ .integra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .integra { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 16px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color 0.15s; } .integra:hover { border-color: var(--line-strong); } .integra.is-on { border-left: 3px solid var(--success); padding-left: 18px; } .integra > header { display: flex; align-items: center; gap: 10px; } .integra-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-md); background: var(--amber-soft); border: 1px solid var(--amber-line); color: var(--amber); } .integra > header .tag { margin-left: auto; } .integra h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; } .integra p { font-size: 0.79rem; color: var(--ink-3); line-height: 1.55; flex: 1; } .integra > footer { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; } .integra > footer .btn { margin-left: auto; } .integra > footer small { font-size: 0.72rem; } /* Modal nativo */ .modal { width: min(560px, calc(100vw - 32px)); padding: 0; background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: var(--r-lg); color: var(--ink); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); } .modal::backdrop { background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(3px); } .modal-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; background: var(--bg-2); border-bottom: 1px solid var(--line); } .modal-head > div { flex: 1; } .modal-head h2 { display: flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; } .modal-head h2 svg { color: var(--amber); } .modal-head p { margin-top: 4px; font-size: 0.79rem; color: var(--ink-3); line-height: 1.5; } .modal-x { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-3); font-size: 1.1rem; line-height: 1; cursor: pointer; } .modal-x:hover { color: var(--ink); border-color: var(--line-strong); } .modal-body { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; max-height: min(60vh, 520px); overflow-y: auto; } .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; background: var(--bg-2); border-top: 1px solid var(--line); } /* ── Ações dentro de tabela ──────────────────── */ .row-actions { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; } .act-icon { width: 30px; height: 30px; padding: 0; justify-content: center; flex-shrink: 0; } .act-icon svg { color: var(--ink-2); } .act-icon:hover:not(:disabled) svg { color: var(--amber); } .act-icon.act-danger:hover:not(:disabled) svg { color: var(--danger-ink); } /* Cada bloco de débito tem seu total no rodapé */ .data-table tfoot td:first-child { color: var(--ink-3); font-weight: 500; } /* ================================================================ TABELA DE DADOS As regras base tinham sido perdidas numa reescrita: sem elas a tabela não ocupa o cartão e as células ficam sem respiro. ================================================================ */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .data-table th { padding: 11px 16px; text-align: left; background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .data-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: var(--bg-2); } .data-table tr.is-off td { opacity: 0.55; } .data-table th.right, .data-table td.right { text-align: right; } .data-table .nowrap { white-space: nowrap; } .data-table .muted { color: var(--ink-3); } .data-table small.muted { display: block; margin-top: 3px; font-size: 0.74rem; color: var(--ink-3); } /* A coluna de ações não deve roubar espaço das de conteúdo. */ .data-table th:last-child, .data-table td:last-child { width: 1%; } .empty-row { padding: 34px 16px !important; text-align: center; color: var(--ink-3); } /* Cabeçalho do bloco e a tabela logo abaixo compartilham o mesmo fundo: sem isso o cabeçalho da tabela some dentro do cabeçalho do bloco. */ .panel-block .block-head + .table-scroll .data-table th { background: var(--bg-1); } /* Blocos empilhados na mesma tela precisam de respiro entre si. */ .panel-block + .panel-block, .panel-block + .card, .card + .panel-block { margin-top: 14px; } /* Convite ao próximo passo (contratar plano, subir de plano). Fica no fim de uma tela, então precisa se distinguir de um cartão comum sem gritar. */ .upsell { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px 20px; border-color: var(--amber-line); } .upsell-text { display: flex; align-items: flex-start; gap: 13px; flex: 1; min-width: 260px; } .upsell-text strong { display: block; font-size: 0.93rem; font-weight: 700; } .upsell-text p { margin-top: 4px; font-size: 0.83rem; color: var(--ink-3); line-height: 1.5; } .upsell-ico { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-md); background: var(--amber-soft); color: var(--amber); } /* Botões lado a lado que precisam quebrar linha no celular. */ .btn-row { display: flex; gap: 10px; flex-wrap: wrap; } /* ================================================================ BANNER DE RENOVAÇÃO Aparece no topo do painel do cliente quando o acesso venceu ou está perto de vencer. Precisa competir com o resto da tela sem virar um pop-up: cor forte na borda, ação à direita. ================================================================ */ .renew-banner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; margin-bottom: 18px; border: 1px solid; border-left-width: 4px; border-radius: var(--r-lg); } .renew-banner.is-down { background: rgba(239, 68, 68, 0.09); border-color: rgba(239, 68, 68, 0.42); } .renew-banner.is-warning { background: var(--amber-soft); border-color: var(--amber-line); } .renew-ico { flex-shrink: 0; display: flex; } .is-down .renew-ico { color: var(--danger-ink); } .is-warning .renew-ico { color: var(--amber); } .renew-text { flex: 1; min-width: 240px; } .renew-text strong { display: block; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.02em; } .renew-text p { margin-top: 5px; font-size: 0.86rem; color: var(--ink-2); line-height: 1.5; } .renew-note { font-size: 0.82rem; color: var(--ink-3); } /* O botão do banner é o maior da tela, de propósito. */ .renew-banner .btn-lg { padding: 14px 24px; font-size: 0.95rem; } /* Pulsa uma vez ao abrir a tela: chama atenção sem ficar piscando sem parar. */ .renew-banner.is-down .btn-amber { animation: renew-call 1.1s ease-out 2; } @keyframes renew-call { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 139, 2, 0); } 50% { box-shadow: 0 0 0 7px rgba(224, 139, 2, 0.22); } } @media (prefers-reduced-motion: reduce) { .renew-banner.is-down .btn-amber { animation: none; } } @media (max-width: 620px) { .renew-banner { flex-direction: column; align-items: flex-start; } .renew-banner .btn-lg { width: 100%; } } /* Quantidade personalizada de conexões, no fim da lista de planos. */ .pick-custom .pick-body { border-style: dashed; } .pick-custom input:checked + .pick-body { border-style: solid; } .custom-seats { padding: 0 20px 18px; } .custom-seats .field { max-width: 300px; } /* Título de bloco em destaque (âmbar do tema), nos cartões que o cliente precisa achar rápido — cada linha em Dados de acesso, por exemplo. */ .head-accent { display: flex; align-items: center; gap: 9px; color: var(--amber); } .head-accent svg { flex-shrink: 0; } /* Troca de senha da linha pelo próprio cliente: fechada por padrão, para não competir com as credenciais, que é o que ele veio ver. */ .pass-swap { border-top: 1px solid var(--line); } .pass-swap > summary { display: flex; align-items: center; gap: 8px; padding: 13px 20px; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; } .pass-swap > summary::-webkit-details-marker { display: none; } .pass-swap > summary:hover { color: var(--amber); background: var(--bg-2); } .pass-swap[open] > summary { color: var(--amber); border-bottom: 1px solid var(--line); } .pass-form { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 18px 20px; } .pass-form .field { flex: 1; min-width: 240px; } /* ── Botão de tema (dia/noite) ─────────────────────────────────── Mostra a lua no escuro e o sol no claro: o ícone é o que a pessoa está vendo agora, e um clique troca. */ .theme-toggle { position: relative; width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .theme-toggle:hover { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); } .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--amber-soft); } /* As duas faces ocupam a mesma célula: a troca é um giro, não um pulo. */ .theme-face { grid-area: 1 / 1; display: flex; transition: opacity 0.2s ease, transform 0.25s ease; } .theme-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); } .theme-moon { opacity: 1; transform: rotate(0) scale(1); } :root[data-theme='light'] .theme-sun { opacity: 1; transform: rotate(0) scale(1); } :root[data-theme='light'] .theme-moon { opacity: 0; transform: rotate(90deg) scale(0.6); } @media (prefers-reduced-motion: reduce) { .theme-face { transition: opacity 0.2s ease; } .theme-sun, .theme-moon, :root[data-theme='light'] .theme-sun, :root[data-theme='light'] .theme-moon { transform: none; } }