:root {
  --sidebar-bg: #111827;
  --sidebar-fg: #cbd5e1;
  --sidebar-active: #1f2937;
  --accent: #0d6efd;
  --page-bg: #f4f6fb;
}

body { background: var(--page-bg); }

.brand-mark {
  width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 1.2rem;
}

/* Login / cadastro */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.auth-card { width: 100%; max-width: 440px; border: 0; border-radius: 14px; }

/* Layout do painel */
.panel-layout { display: flex; min-height: 100vh; }
.sidebar { background: var(--sidebar-bg); color: var(--sidebar-fg); width: 248px; flex-shrink: 0; }
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
/* O Bootstrap força fundo transparente no .offcanvas-lg em telas grandes. */
.sidebar.offcanvas-lg { --bs-offcanvas-bg: var(--sidebar-bg); --bs-offcanvas-width: 260px; background-color: var(--sidebar-bg) !important; }
.sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem; color: #fff; }
.sidebar-nav { display: flex; flex-direction: column; padding: .25rem .6rem 1.5rem; width: 100%; }
.nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #64748b; margin: 1rem .6rem .35rem; }
.nav-item { color: var(--sidebar-fg); text-decoration: none; padding: .5rem .65rem; border-radius: 8px; display: flex; gap: .6rem; align-items: center; font-size: .925rem; }
.nav-item:hover { background: var(--sidebar-active); color: #fff; }
.nav-item.active { background: var(--accent); color: #fff; }

.panel-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: .75rem; padding: .6rem 1.25rem; background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 10; }
.org-switch select { max-width: 260px; }
.content { padding: 1.25rem; max-width: 1400px; width: 100%; }
@media (max-width: 575.98px) { .content { padding: 1rem; } .topbar { padding: .6rem 1rem; } }

.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.card { border: 1px solid #e5e7eb; border-radius: 12px; }
.card-header { background: #fff; border-bottom: 1px solid #eef0f4; font-weight: 600; }

/* Indicadores */
.kpi { padding: 1rem 1.1rem; }
.kpi .kpi-label { color: #6b7280; font-size: .8rem; display: flex; gap: .35rem; align-items: center; }
.kpi .kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi .kpi-hint { font-size: .75rem; color: #9ca3af; }
.evidence { font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .4rem; border-radius: 4px; }
.evidence-observed { background: #eef2ff; color: #3730a3; }
.evidence-declared { background: #fef3c7; color: #92400e; }
.evidence-verified { background: #dcfce7; color: #166534; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 1rem; color: #374151; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; }

.table > :not(caption) > * > * { vertical-align: middle; }
.table-responsive { border-radius: 12px; }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* Editor de etapas */
.step-item { display: flex; gap: .75rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid #eef0f4; }
.step-item:last-child { border-bottom: 0; }
.step-icon { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: #eef2ff; color: #3730a3; flex-shrink: 0; }
.step-fixed .step-icon { background: #f3f4f6; color: #6b7280; }

.preset-option input { position: absolute; opacity: 0; }
.preset-option label { display: block; border: 2px solid #e5e7eb; border-radius: 10px; padding: .75rem 1rem; cursor: pointer; height: 100%; }
.preset-option input:checked + label { border-color: var(--accent); background: #eff6ff; }
.preset-option input:focus-visible + label { outline: 3px solid #93c5fd; }

/* Prévia em moldura de celular */
.phone-frame { width: 360px; max-width: 100%; height: 700px; border: 10px solid #111827; border-radius: 36px; overflow: hidden; background: #fff; margin: 0 auto; }
.phone-frame iframe { width: 100%; height: 100%; border: 0; }

.qr-thumb { width: 64px; height: 64px; image-rendering: pixelated; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-control-color { width: 4rem; }
code.secret { background: #f3f4f6; padding: .15rem .4rem; border-radius: 4px; }