/* Painel operacional e administrativo. Cor de destaque, tema, menu lateral e densidade vêm de Configurações › Aparência do painel (--brand-accent/--accent-on no , classes no ). */ :root { color-scheme: light; --font: "Inter", "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --bg: #f5f6f8; --surface: #ffffff; --surface-2: #f4f5f7; --border: #e4e7ec; --text: #101828; --text-2: #475467; --muted: #7a8494; --accent: var(--brand-accent, #0f766e); --accent-hover: color-mix(in srgb, var(--accent) 86%, #000); --accent-soft: color-mix(in srgb, var(--accent) 11%, #fff); --accent-contrast: var(--accent-on, #ffffff); --danger: #b42318; --danger-soft: #fdecea; --danger-contrast: #ffffff; --warning: #8a5a00; --warning-soft: #fdf3dc; --success: #117a3a; --success-soft: #e3f4e9; --info: #1f5fae; --info-soft: #e8f0fb; --purple: #5b3fb0; --purple-soft: #eee9fa; --sidebar: #0f1419; --sidebar-text: #c3cad3; --sidebar-muted: #7c8794; --sidebar-active: rgba(255, 255, 255, 0.07); --sidebar-strong: #ffffff; --sidebar-border: rgba(255, 255, 255, 0.07); --sidebar-accent: color-mix(in srgb, var(--accent) 55%, #fff); --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px -6px rgba(16, 24, 40, 0.08); --pad: 20px; /* Gráficos (paleta validada para daltonismo, claro e escuro) */ --chart-surface: #ffffff; --chart-grid: #e4e7ec; --chart-axis: #c3c7cf; --chart-text: #475467; --chart-muted: #8a919c; --series-1: #2a78d6; --series-2: #eb6834; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0b0e12; --surface: #151a20; --surface-2: #1b2129; --border: #28303a; --text: #eef1f5; --text-2: #b4bcc8; --muted: #8a94a3; --accent: color-mix(in srgb, var(--brand-accent, #0f766e) 62%, #fff); --accent-hover: color-mix(in srgb, var(--brand-accent, #0f766e) 50%, #fff); --accent-soft: color-mix(in srgb, var(--brand-accent, #0f766e) 24%, #151a20); --accent-contrast: #081012; --danger: #ff8b7e; --danger-soft: #3b1f1c; --danger-contrast: #2a0c09; --warning: #f2c35b; --warning-soft: #3a2f14; --success: #6fd08f; --success-soft: #173222; --info: #8db9f2; --info-soft: #182b43; --purple: #b8a5f0; --purple-soft: #2b2442; --sidebar: #0a0d11; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --chart-surface: #151a20; --chart-grid: #2a313b; --chart-axis: #39424e; --chart-text: #b4bcc8; --chart-muted: #8a919c; --series-1: #3987e5; --series-2: #d95926; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0b0e12; --surface: #151a20; --surface-2: #1b2129; --border: #28303a; --text: #eef1f5; --text-2: #b4bcc8; --muted: #8a94a3; --accent: color-mix(in srgb, var(--brand-accent, #0f766e) 62%, #fff); --accent-hover: color-mix(in srgb, var(--brand-accent, #0f766e) 50%, #fff); --accent-soft: color-mix(in srgb, var(--brand-accent, #0f766e) 24%, #151a20); --accent-contrast: #081012; --danger: #ff8b7e; --danger-soft: #3b1f1c; --danger-contrast: #2a0c09; --warning: #f2c35b; --warning-soft: #3a2f14; --success: #6fd08f; --success-soft: #173222; --info: #8db9f2; --info-soft: #182b43; --purple: #b8a5f0; --purple-soft: #2b2442; --sidebar: #0a0d11; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --chart-surface: #151a20; --chart-grid: #2a313b; --chart-axis: #39424e; --chart-text: #b4bcc8; --chart-muted: #8a919c; --series-1: #3987e5; --series-2: #d95926; } /* Menu lateral: na cor do painel ou claro */ body.sidebar-marca { --sidebar: color-mix(in srgb, var(--brand-accent, #0f766e) 55%, #05080a); --sidebar-text: rgba(255, 255, 255, 0.82); --sidebar-muted: rgba(255, 255, 255, 0.55); --sidebar-active: rgba(255, 255, 255, 0.14); --sidebar-accent: #ffffff; } body.sidebar-clara { --sidebar: var(--surface); --sidebar-text: var(--text-2); --sidebar-muted: var(--muted); --sidebar-active: var(--accent-soft); --sidebar-strong: var(--text); --sidebar-border: var(--border); --sidebar-accent: var(--accent); } body.sidebar-clara .sidebar { border-right: 1px solid var(--border); } body.sidebar-clara .nav > a.active { color: var(--accent); } body.sidebar-clara .nav-toggle { border-color: var(--border) !important; color: var(--text) !important; } body.density-compacta { --pad: 14px; font-size: 13px; } body.density-compacta .table td { padding: 6px 10px; } body.density-compacta .table th { padding: 6px 10px; } body.density-compacta .main { padding-top: 16px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; } a { color: var(--accent); } h1, h2, h3 { line-height: 1.25; } img, svg { max-width: 100%; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Estrutura */ .app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 16px 12px; background: var(--sidebar); color: var(--sidebar-text); scrollbar-width: thin; } .sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .brand { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 6px; color: var(--sidebar-strong); text-decoration: none; } .brand-mark { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(140deg, var(--brand-accent, #0f766e), color-mix(in srgb, var(--brand-accent, #0f766e) 60%, #000)); color: #fff; } .brand-mark svg { width: 20px; height: 20px; } .brand-logo { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 3px; border-radius: 10px; background: #fff; overflow: hidden; } .brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .brand-text { display: flex; flex-direction: column; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; } .brand-text small { color: var(--sidebar-muted); font-size: 11px; font-weight: 500; } .brand-icon { width: 22px; height: 22px; flex: none; } .nav-toggle { display: none; } .nav { display: flex; flex-direction: column; gap: 1px; margin-top: 12px; } .nav-group-title { margin: 18px 10px 6px; color: var(--sidebar-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .nav > a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--sidebar-text); text-decoration: none; transition: background 0.12s, color 0.12s; } .nav-icon { width: 18px; height: 18px; flex: none; opacity: 0.85; } .nav > a:hover { background: var(--sidebar-active); color: var(--sidebar-strong); } .nav > a.active { background: var(--sidebar-active); color: var(--sidebar-strong); font-weight: 600; } .nav > a.active .nav-icon { color: var(--sidebar-accent); opacity: 1; } .nav-user { display: flex; gap: 10px; margin-top: 22px; padding: 14px 8px 0; border-top: 1px solid var(--sidebar-border); font-size: 13px; } .avatar { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--brand-accent, #0f766e) 35%, #334); color: #fff; font-size: 12px; font-weight: 700; } .nav-user-info { min-width: 0; } .nav-user-name { color: var(--sidebar-strong); font-weight: 600; } .nav-user-role { margin-bottom: 6px; color: var(--sidebar-muted); } .nav-user-links { display: flex; align-items: center; gap: 14px; } .nav-user-links a, .linklike { padding: 0; border: 0; background: none; color: var(--sidebar-text); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .nav-user-links form { margin: 0; } .main { display: flex; flex-direction: column; min-width: 0; padding: 26px 32px 24px; } .main-footer { margin-top: auto; padding-top: 32px; color: var(--muted); font-size: 12px; text-align: center; } .main-footer a { color: inherit; text-decoration: none; } .main-footer strong { color: var(--text-2); letter-spacing: 0.04em; } .topbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .page-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -0.02em; } .page-sub { margin: 4px 0 0; color: var(--text-2); } .actions { display: flex; flex-wrap: wrap; gap: 8px; } .actions form { margin: 0; } .section { margin-top: 16px; } .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-sidebar { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .stack { display: grid; gap: 16px; } .card { min-width: 0; padding: var(--pad); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; font-size: 15px; font-weight: 700; letter-spacing: -0.005em; } .card-hint { margin-right: auto; color: var(--muted); font-size: 12px; font-weight: 400; } .card-link { font-size: 13px; font-weight: 500; } .center { text-align: center; } .muted { color: var(--muted); } .hint { margin-top: 4px; color: var(--muted); font-size: 12px; } .small { font-size: 12px; } .mono { font-family: var(--mono); } .nowrap { white-space: nowrap; } .empty { margin: 0; padding: 28px 8px; color: var(--muted); text-align: center; } /* Botões */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); transition: background 0.12s, border-color 0.12s, box-shadow 0.12s; } .btn:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--border)); background: var(--surface-2); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } .btn:disabled { opacity: 0.55; cursor: default; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-danger { background: var(--danger); border-color: var(--danger); color: var(--danger-contrast); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); box-shadow: none; } .btn-ghost-danger { background: transparent; color: var(--danger); box-shadow: none; } .btn-sm { padding: 5px 10px; font-size: 13px; } .btn-block { width: 100%; } form.inline { display: inline; } .row-actions { text-align: right; white-space: nowrap; } .row-actions .inline + .inline { margin-left: 4px; } /* Avisos */ .alert { margin-bottom: 14px; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-weight: 500; } .alert-success { background: var(--success-soft); color: var(--success); } .alert-error { background: var(--danger-soft); color: var(--danger); } .alert-warning { background: var(--warning-soft); color: var(--warning); } .alert ul { margin: 6px 0 0; padding-left: 18px; } .demo-banner { margin-bottom: 18px; padding: 9px 14px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: 13px; } .demo-banner a { color: inherit; font-weight: 600; } /* Indicadores */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .kpi { position: relative; overflow: hidden; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); opacity: 0.85; } .kpi-label { color: var(--text-2); font-size: 12.5px; font-weight: 600; } .kpi-value { margin: 4px 0 2px; font-size: 28px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .kpi-sub { color: var(--muted); font-size: 12px; } /* Gráficos */ .chart-box { position: relative; height: 240px; } .table-view { margin-top: 10px; } .table-view summary { color: var(--text-2); font-size: 13px; cursor: pointer; } .table-view .table-wrap { max-height: 260px; margin-top: 8px; overflow: auto; } /* Tabelas */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; } .table th { padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; text-align: left; text-transform: uppercase; white-space: nowrap; } .table th:first-child { border-top-left-radius: var(--radius-sm); } .table th:last-child { border-top-right-radius: var(--radius-sm); } .table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); } .table tbody tr:last-child td { border-bottom: 0; } .table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .table-compact th, .table-compact td { padding: 5px 8px; } .cell-sub { color: var(--muted); font-size: 12px; } .check-col { width: 32px; } .table-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; } /* Etiquetas */ .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; } .badge-success { background: var(--success-soft); color: var(--success); } .badge-warning { background: var(--warning-soft); color: var(--warning); } .badge-danger { background: var(--danger-soft); color: var(--danger); } .badge-info { background: var(--info-soft); color: var(--info); } .badge-purple { background: var(--purple-soft); color: var(--purple); } .badge-muted { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); } .code-chip { display: inline-block; padding: 2px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text); font-family: var(--mono); font-weight: 700; letter-spacing: 0.08em; text-decoration: none; } .code-chip.big { padding: 4px 12px; font-size: 18px; } a.code-chip:hover { border-color: var(--accent); } /* Formulários */ .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin-bottom: 14px; } .field > label { color: var(--text-2); font-size: 13px; font-weight: 600; } input, select, textarea { width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); transition: border-color 0.12s, box-shadow 0.12s; } input[type="radio"] { width: auto; padding: 0; accent-color: var(--accent); box-shadow: none; } /* Caixas de marcar com cantos arredondados, iguais às do portal */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; display: grid; place-content: center; flex: none; width: 18px; height: 18px; padding: 0; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--text) 25%, var(--border)); border-radius: 6px; box-shadow: none; cursor: pointer; transition: background 0.12s, border-color 0.12s, box-shadow 0.12s; } input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; background: var(--accent-contrast); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform 0.1s ease-out; } input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } input[type="checkbox"]:checked::before { transform: scale(1); } input[type="checkbox"]:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } input[type="color"] { height: 40px; padding: 3px; cursor: pointer; } input[type="file"] { padding: 7px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } textarea { resize: vertical; } [hidden] { display: none !important; } .check { display: flex; align-items: flex-start; gap: 9px; margin: 6px 0 10px; line-height: 1.5; cursor: pointer; } /* Centraliza a caixa com a primeira linha do texto. */ .check input { margin-top: calc((1.5em - 18px) / 2); } .check.small { margin: 6px 0 0; color: var(--text-2); font-size: 12px; } .field-check { margin-bottom: 8px; } .field-check .check { margin-bottom: 0; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .span-2 { grid-column: span 2; } .fieldset { margin: 6px 0 14px; padding: 12px 14px 4px; border: 1px solid var(--border); border-radius: 8px; } .fieldset legend { padding: 0 6px; color: var(--text-2); font-size: 13px; font-weight: 600; } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; } .input-group { display: flex; gap: 6px; } .input-group select { width: auto; } .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 16px; } .filters .field { margin-bottom: 0; } .filters .field.grow { flex: 1 1 220px; } .filters input[type="date"] { width: 150px; } .field-actions { display: flex; align-items: center; gap: 6px; } .filters-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-left: auto; } .segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .seg { padding: 6px 12px; border-radius: 7px; color: var(--text-2); font-weight: 500; text-decoration: none; } .seg:hover { color: var(--text); } .seg.active { background: var(--surface); color: var(--accent); font-weight: 650; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); font-size: 13px; text-decoration: none; } .chip:hover { border-color: var(--accent); color: var(--accent); } /* Detalhes */ .dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 16px; margin: 0; } .dl dt { color: var(--text-2); } .dl dd { margin: 0; overflow-wrap: anywhere; } .qr-box { display: flex; justify-content: center; } .qr-box svg { width: 180px; height: 180px; } .quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .danger-zone { border-color: var(--danger-soft); } .codes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .code-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; } .code-card:hover { border-color: var(--accent); } .plan-list { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; } .pre { max-width: 520px; max-height: 280px; overflow: auto; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); font-size: 12px; white-space: pre-wrap; word-break: break-word; } .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; } .pagination .muted { margin-right: auto; font-size: 13px; } /* Configurações */ .settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; } .subnav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 1px; max-height: calc(100vh - 32px); overflow-y: auto; } .subnav a { padding: 7px 12px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; } .subnav a:hover { background: var(--surface-2); color: var(--text); } .subnav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 650; } .settings-main { display: grid; gap: 16px; max-width: 800px; } .help { margin-bottom: 18px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--info-soft); color: var(--text); font-size: 13px; border: 1px solid color-mix(in srgb, var(--info) 15%, transparent); } .preview-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .preview-card .card-title { margin-bottom: 2px; } .preview-card .hint { margin: 0; } .bg-preview { display: block; width: 100%; max-height: 160px; margin-bottom: 12px; border-radius: var(--radius-sm); object-fit: cover; } .advanced { margin-top: 12px; padding: 10px 14px; border: 1px dashed var(--border); border-radius: var(--radius-sm); } .advanced summary { color: var(--text-2); font-weight: 600; cursor: pointer; } .advanced[open] summary { margin-bottom: 12px; } .advanced textarea { font-family: var(--mono); font-size: 12.5px; } .help ol { margin: 6px 0 0; padding-left: 18px; } .help li + li { margin-top: 4px; } .help p { margin: 6px 0 0; } .copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; } .copy-row span { min-width: 100px; color: var(--text-2); } .copy-row code { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); font-size: 12px; overflow-wrap: anywhere; } .warning-text { color: var(--warning); } .logo-preview { display: block; max-height: 64px; margin-bottom: 12px; } .banner-thumb { display: block; width: 72px; height: 36px; border-radius: 6px; object-fit: cover; } .banner-thumb-empty { background: var(--surface-2); border: 1px dashed var(--border); } .banner-preview { display: block; width: 100%; max-width: 480px; aspect-ratio: 2 / 1; margin-bottom: 12px; border-radius: 10px; object-fit: cover; } .weekday-picker { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 10px; padding: 0; border: 0; } .weekday-picker legend { width: 100%; margin-bottom: 4px; font-weight: 600; } .weekday-picker .check { margin: 0; } /* Inteligência de visitantes */ .heat-wrap { overflow-x: auto; } .heatmap { display: grid; grid-template-columns: 36px repeat(24, minmax(10px, 1fr)); gap: 3px; align-items: center; min-width: 380px; } .heat-hour { color: var(--text-2); font-size: 11px; text-align: left; white-space: nowrap; } .heat-day { color: var(--text-2); font-size: 12px; font-weight: 600; } .heat-cell { display: block; aspect-ratio: 1; min-height: 14px; border-radius: 3px; } .hbar-row { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 14px; } .hbar-row strong { min-width: 36px; text-align: right; } .hbar { display: block; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .hbar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .hbar.inline { display: inline-block; width: 90px; vertical-align: middle; } .table.compact th, .table.compact td { padding: 6px 8px; } @media print { .sidebar, .no-print, .demo-banner, .flash, .alert, .main-footer { display: none !important; } .kpi::before { display: none; } .app, .main { display: block; margin: 0; padding: 0; } .card, .kpi { break-inside: avoid; box-shadow: none; } body { background: #fff; } .heat-cell, .hbar > span { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* Pesquisa de satisfação */ .kpi-value.nps-great { color: var(--success); } .kpi-value.nps-ok { color: var(--warning); } .kpi-value.nps-bad { color: var(--danger); } .nps-bars { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; align-items: end; height: 180px; } .nps-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .nps-bar-fill { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; } .nps-bar-promotor { background: var(--success); } .nps-bar-neutro { background: var(--warning); } .nps-bar-detrator { background: var(--danger); } .nps-bar-count { font-size: 12px; color: var(--text-2); margin-bottom: 2px; } .nps-bar-label { margin-top: 4px; font-size: 12px; font-weight: 600; } .rating-list { margin: 0; padding: 0; list-style: none; } .rating-list li { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 8px 0; border-bottom: 1px solid var(--border); } .rating-list li:last-child { border-bottom: 0; } .rating-list strong { color: var(--warning); } .rating-list .cell-sub { grid-column: 1 / -1; } .event-picker { margin: 4px 0 10px; padding: 0; border: 0; } .event-picker legend { margin-bottom: 4px; font-weight: 600; } .plain-list { margin: 0; padding-left: 18px; } .plain-list li { margin: 4px 0; } .checklist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .checklist li { display: flex; align-items: center; gap: 10px; } .check-mark { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 50%; font-size: 12px; } .checklist li.done .check-mark { background: var(--success); border-color: var(--success); color: var(--surface); } .checklist li.done a { color: var(--text-2); text-decoration: line-through; } /* Login e erros */ .auth-body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px; background: radial-gradient(900px 500px at 100% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(700px 400px at -10% 110%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--bg); } .auth-card { width: 100%; max-width: 420px; padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 24px 60px -24px rgba(16, 24, 40, 0.25); } .auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: var(--text); } .auth-brand .brand-text small { color: var(--muted); } .auth-logo { max-height: 42px; max-width: 120px; object-fit: contain; } .auth-brand .brand-icon { color: var(--accent); } .auth-card .btn-primary { width: 100%; padding: 11px 14px; } .auth-title { margin: 0 0 18px; font-size: 21px; font-weight: 750; letter-spacing: -0.01em; } .auth-powered { margin: 18px 0 0; color: var(--muted); font-size: 12px; } .auth-powered strong { color: var(--text-2); letter-spacing: 0.04em; } .error-code { color: var(--accent); font-size: 56px; font-weight: 800; letter-spacing: -0.03em; } .narrow { max-width: 460px; } @media (max-width: 1100px) { .grid-sidebar { grid-template-columns: 1fr; } } @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; padding: 10px 12px; } .nav-toggle { display: inline-flex; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-sm); background: transparent; color: #fff; font: inherit; font-weight: 600; } .page-title { font-size: 21px; } .nav { display: none; } .sidebar.open .nav { display: flex; } .main { padding: 16px 16px 48px; } .grid-2, .form-grid { grid-template-columns: 1fr; } .span-2 { grid-column: auto; } .settings-layout { grid-template-columns: 1fr; } .subnav { position: static; flex-direction: row; flex-wrap: wrap; } .filters-inline { margin-left: 0; } .dl { grid-template-columns: 1fr; gap: 2px; } .dl dd { margin-bottom: 8px; } }