/*
 * Tema do deck Call Signal Layer (sobre o reveal.js "white").
 * Herda as variáveis visuais do deck de arquitetura
 * (apps/architecture-page/public/styles.css).
 */
:root {
	/* Paleta dark (mesmo tom navy da capa) */
	--bg: #0f172a;
	--surface: #1b263b;
	--surface-2: #16203a;
	--ink: #f1f5f9;
	--ink-soft: #cbd5e1;
	--ink-muted: #94a3b8;
	--border: #334155;
	--accent: #7aa2ff;
	--accent-soft: rgba(122, 162, 255, 0.12);
	--success: #34d399;
	--success-bg: rgba(16, 185, 129, 0.14);
	--warning: #fbbf24;
	--warning-bg: rgba(245, 158, 11, 0.14);
	--info: #93c5fd;
	--info-bg: rgba(96, 165, 250, 0.12);

	/* cores por tipo de sinal (espelhadas em deck.js) */
	--t-process-gap: #818cf8;
	--t-commitment: #60a5fa;
	--t-risk: #f87171;
	--t-decision: #fbbf24;
	--t-client: #38bdf8;
	--t-idea: #34d399;
}

/* Fundo escuro em toda a área do deck (sobrescreve o tema black do reveal) */
.reveal-viewport {
	background-color: var(--bg);
}

.reveal {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	color: var(--ink);
	font-size: 30px;
}

.reveal .slides {
	text-align: left;
}

.reveal .slides > section {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

/*
 * O reveal aplica `display:block` inline na section visível, anulando o flex.
 * Forçamos flex só na `.present` (sem afetar as ocultas, que ficam display:none)
 * para centralizar o conteúdo verticalmente no slide.
 */
.reveal .slides > section.present {
	display: flex !important;
	justify-content: center;
	min-height: 100%;
}

/* Headings */
.reveal h1 {
	font-size: 2.2em;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
	text-transform: none;
	color: #fff;
}

.reveal h2 {
	font-size: 1.45em;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 0.15em;
	text-transform: none;
	color: var(--ink);
}

.reveal h3 {
	font-size: 0.72em;
	font-weight: 600;
	margin: 0 0 0.2em;
	text-transform: none;
	color: var(--ink);
}

.reveal p {
	margin: 0;
	line-height: 1.45;
}

.reveal code {
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	background: var(--accent-soft);
	color: var(--accent);
	padding: 0.06em 0.32em;
	border-radius: 5px;
	font-size: 0.92em;
}

.reveal .accent {
	color: var(--accent);
}

.reveal .success {
	color: var(--success);
}

.kicker {
	font-size: 0.55em;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0 0 0.1em;
}

.kicker.accent {
	color: var(--accent);
}

.lead {
	font-size: 0.78em;
	color: var(--ink-soft);
	max-width: 30em;
}

.lead strong {
	color: var(--ink);
}

.takeaway {
	margin-top: 0.4em;
	font-size: 0.72em;
	color: var(--ink-soft);
	border-left: 3px solid var(--accent);
	padding-left: 0.7em;
}

.takeaway.big {
	font-size: 0.92em;
	font-weight: 600;
	color: var(--ink);
}

/* Capa */
.reveal section.cover {
	align-items: flex-start;
	text-align: left;
}

.cover .tagline {
	font-size: 1em;
	color: #cbd5e1;
	max-width: 22em;
	margin-top: 0.5em;
}

.cover .kicker {
	color: #7aa2ff;
}

.cover .cover-meta {
	margin-top: 1.4em;
	font-size: 0.5em;
	color: #94a3b8;
	letter-spacing: 0.02em;
}

/* Slide final — exemplos de /inventa */
.cover.thanks .tagline {
	color: #e2e8f0;
}

.try-examples {
	margin-top: 1em;
	display: flex;
	flex-direction: column;
	gap: 0.45em;
	align-items: flex-start;
}

.try {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 0.45em 0.7em;
	font-size: 0.55em;
}

.try code {
	background: none;
	padding: 0;
	color: #93c5fd;
}

/* Cards genéricos */
.cards {
	display: grid;
	gap: 0.6em;
	margin-top: 0.3em;
}

.cards-2 {
	grid-template-columns: repeat(2, 1fr);
}

.cards-3 {
	grid-template-columns: repeat(3, 1fr);
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 0.7em 0.8em;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.card p,
.lane p {
	font-size: 0.62em;
	color: var(--ink-soft);
}

.card-icon {
	font-size: 1.2em;
	margin-bottom: 0.15em;
}

/* Cards de tipo de sinal (slide 3) */
.signal-cards .card {
	display: flex;
	flex-direction: column;
}

.type-dot {
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	margin-bottom: 0.3em;
}

.type-dot.t1 { background: var(--t-commitment); }
.type-dot.t2 { background: var(--t-decision); }
.type-dot.t3 { background: var(--t-risk); }
.type-dot.t4 { background: var(--t-client); }
.type-dot.t5 { background: var(--t-process-gap); }
.type-dot.t6 { background: var(--t-idea); }

/* Fluxo em passos */
.flow {
	display: flex;
	align-items: stretch;
	gap: 0.3em;
	margin-top: 0.3em;
}

.flow .step {
	flex: 1;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 0.7em 0.7em;
}

.flow .step p {
	font-size: 0.58em;
	color: var(--ink-soft);
}

.step-num {
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.7em;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.35em;
}

.step-icon {
	font-size: 1.3em;
	margin-bottom: 0.2em;
}

.step-arrow {
	display: flex;
	align-items: center;
	color: var(--ink-muted);
	font-size: 1.2em;
}

.flow-rag .step {
	text-align: center;
}

.flow-rag .step-icon {
	text-align: center;
}

/* Lanes de confiança */
.lane {
	border-radius: 14px;
	padding: 0.7em 0.8em;
	border: 1px solid var(--border);
	background: var(--surface);
}

.lane.success {
	border-color: #6ee7b7;
	background: var(--success-bg);
}

.lane.warning {
	border-color: #fcd34d;
	background: var(--warning-bg);
}

.lane.info {
	border-color: #93c5fd;
	background: var(--info-bg);
}

.lane.compact {
	margin-top: 0.4em;
}

.lane .range {
	font-size: 0.6em;
	font-weight: 600;
	color: var(--ink-soft);
	margin: 0.1em 0 0.3em;
}

/* Pergunta e resposta (/inventa) */
.qa {
	margin: 0.3em 0 0.5em;
}

.qa-q,
.qa-a {
	border-radius: 12px;
	padding: 0.55em 0.7em;
	font-size: 0.7em;
}

.qa-q {
	background: #0a1124;
	color: #e2e8f0;
	border: 1px solid var(--border);
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	border-radius: 12px 12px 12px 4px;
}

.qa-a {
	background: var(--surface);
	border: 1px solid var(--border);
	margin-top: 0.35em;
	border-radius: 12px 12px 4px 12px;
}

.qa-a p {
	font-size: 0.95em;
	color: var(--ink);
	margin-top: 0.25em;
}

.qa-tag {
	display: inline-block;
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-muted);
}

.qa-tag.a {
	color: var(--success);
}

.cite {
	color: var(--accent);
	font-weight: 700;
}

.qa-sources {
	font-size: 0.78em !important;
	color: var(--ink-muted) !important;
	margin-top: 0.4em;
}

/* KPIs */
.kpi-grid {
	display: grid;
	gap: 0.55em;
	margin: 0.3em 0;
}

.kpi-3 {
	grid-template-columns: repeat(3, 1fr);
}

.kpi-4 {
	grid-template-columns: repeat(4, 1fr);
}

.kpi {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 0.7em 0.6em;
	text-align: center;
}

.kpi-num {
	font-size: 1.5em;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.kpi-num.success {
	color: var(--success);
}

.kpi-num.accent {
	color: var(--accent);
}

.kpi-label {
	font-size: 0.5em;
	color: var(--ink-soft);
	margin-top: 0.4em;
	line-height: 1.3;
}

/* Gráficos */
.chart-row {
	display: flex;
	gap: 0.8em;
	align-items: stretch;
	margin-top: 0.3em;
}

.chart-box {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 0.7em 0.8em;
	flex: 1.4;
	min-width: 0; /* deixa o canvas do Chart.js encolher dentro do flex */
}

.chart-box.wide {
	flex: 2;
}

.chart-canvas {
	position: relative;
	height: 240px;
	margin-top: 0.3em;
}

.chart-canvas.tall {
	height: 250px;
}

.chart-side {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.4em;
}

.mini-kpi {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 0.5em 0.7em;
}

.mini-kpi span {
	font-size: 1.1em;
	font-weight: 800;
	color: var(--accent);
}

.mini-kpi small {
	display: block;
	font-size: 0.5em;
	color: var(--ink-soft);
	margin-top: 0.1em;
}

.footnote {
	font-size: 0.5em;
	color: var(--ink-muted);
	margin-top: 0.3em;
}

/* Listas */
.reveal ul.check,
.reveal ul.arrow {
	list-style: none;
	margin: 0.2em 0 0;
	padding: 0;
}

.reveal ul.check li,
.reveal ul.arrow li {
	font-size: 0.6em;
	color: var(--ink-soft);
	padding: 0.18em 0 0.18em 1.3em;
	position: relative;
	line-height: 1.4;
}

.reveal ul.check li strong,
.reveal ul.arrow li strong {
	color: var(--ink);
}

.reveal ul.check li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--success);
	font-weight: 700;
}

.reveal ul.arrow li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: 700;
}

/* Controles reveal */
.reveal .progress {
	color: var(--accent);
}

.reveal .controls {
	color: var(--accent);
}

/* Print / PDF */
@media print {
	.reveal .slides section {
		border-bottom: 1px solid var(--border);
	}
}