/* ==========================================================================
   CM Digital — Sección 03: El Análisis
   ========================================================================== */

.analysis {
	background: var(--bg-secondary);
}

.analysis .section__ambient::before {
	background: radial-gradient(ellipse, var(--accent-glow) 0%, rgba(47, 111, 255, 0) 65%);
	opacity: 0.5;
}

/* ---- Report panel ---- */

.analysis__report {
	position: relative;
	z-index: 1;
	background: linear-gradient(165deg, var(--surface-elevated), var(--surface) 60%);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg), var(--shadow-glow);
	padding: var(--space-lg);
	overflow: hidden;
}

/* A thin lit seam along the panel's top edge — echoes the Hero dashboard's
   glow treatment so the report reads as part of the same product. */
.analysis__report::before {
	content: "";
	position: absolute;
	top: 0;
	left: 8%;
	right: 8%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--accent-400), transparent);
	opacity: 0.6;
	z-index: 3;
}

.analysis__report-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

.analysis__report-title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

.analysis__bureaus {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.analysis__bureau-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.02);
	font-size: var(--fs-body-sm);
	color: var(--text-secondary);
	white-space: nowrap;
}

.analysis__bureau-chip strong {
	color: var(--text-primary);
	font-weight: var(--fw-semibold);
}

.analysis__bureau-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 8px 1px rgba(52, 211, 153, 0.6);
	flex-shrink: 0;
}

/* ---- Scanning line ---- */

.analysis__scanline {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 90px;
	background: linear-gradient(180deg, rgba(47, 111, 255, 0) 0%, rgba(47, 111, 255, 0.16) 45%, rgba(139, 173, 255, 0.4) 50%, rgba(47, 111, 255, 0.16) 55%, rgba(47, 111, 255, 0) 100%);
	opacity: 0;
	pointer-events: none;
	z-index: 2;
}

.analysis__report.reveal-armed .analysis__scanline {
	opacity: 1;
	transform: translateY(-90px);
}

.analysis__report.reveal-armed.is-visible .analysis__scanline {
	animation: analysis-scan 2.2s 0.3s cubic-bezier(0.65, 0, 0.35, 1) 1;
}

@keyframes analysis-scan {
	0% {
		transform: translateY(-90px);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateY(480px);
		opacity: 0;
	}
}

/* ---- Rows ---- */

.analysis__rows-header,
.analysis__row {
	display: grid;
	/* Fixed widths (not fr) on every column but the first — each row is its
	   own grid, so fr tracks would resize per-row based on that row's own
	   content and drift out of alignment with its neighbors (verified: up
	   to 63px of drift with fr). Fixed widths make every row resolve to
	   the exact same column edges regardless of content length. */
	grid-template-columns: 28px minmax(0, 1fr) 100px 120px 160px;
	align-items: center;
	gap: var(--space-sm);
}

.analysis__rows-header {
	padding-inline: var(--space-sm);
	margin-bottom: var(--space-2xs);
	font-size: 0.6875rem;
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--text-tertiary);
}

/* Explicit placement — there's no column-1 label (that's the bureau dot's
   column), so auto-placement would otherwise pack these 4 labels into
   columns 1-4 instead of lining up with the 5-column data rows below. */
.analysis__rows-header span:nth-child(1) {
	grid-column: 2;
}
.analysis__rows-header span:nth-child(2) {
	grid-column: 3;
}
.analysis__rows-header span:nth-child(3) {
	grid-column: 4;
}
.analysis__rows-header span:nth-child(4) {
	grid-column: 5;
}

.analysis__rows {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.analysis__row {
	padding: var(--space-sm);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.015);
	transition: border-color var(--transition-base), background-color var(--transition-base);
}

.analysis__row--highlight {
	border-color: rgba(139, 173, 255, 0.35);
	background: rgba(47, 111, 255, 0.07);
	box-shadow: 0 0 0 1px rgba(47, 111, 255, 0.12), 0 12px 32px -16px var(--accent-glow);
}

.analysis__row-bureau {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(47, 111, 255, 0.14);
	color: var(--accent-300);
	font-size: 0.625rem;
	font-weight: var(--fw-bold);
}

.analysis__row-type {
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-medium);
	color: var(--text-primary);
	min-width: 0;
}

.analysis__row-date {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: 0.75rem;
	color: var(--text-tertiary);
	white-space: nowrap;
}

.analysis__row-date svg {
	flex-shrink: 0;
	opacity: 0.7;
}

.analysis__row-balance {
	display: flex;
	align-items: center;
	min-width: 0;
}

.analysis__row-balance-track {
	position: relative;
	width: 100%;
	max-width: 96px;
	height: 4px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.analysis__row-balance-fill {
	position: absolute;
	inset: 0;
	width: var(--w, 50%);
	border-radius: inherit;
	background: linear-gradient(90deg, var(--accent-600), var(--accent-400));
}

.analysis__row-status {
	font-size: 0.6875rem;
	font-weight: var(--fw-medium);
	padding: 0.25rem 0.625rem;
	border-radius: var(--radius-full);
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-secondary);
}

.analysis__row-status--review {
	background: rgba(250, 204, 21, 0.1);
	color: #fbd66b;
}

.analysis__row-status--verify {
	background: rgba(47, 111, 255, 0.14);
	color: var(--accent-300);
}

.analysis__row-status--ok {
	background: rgba(52, 211, 153, 0.12);
	color: #6ee7b7;
}

.analysis__row-status--flag {
	background: rgba(248, 113, 113, 0.12);
	color: #fca5a5;
}

/* ---- Summary + disclosure ---- */

.analysis__summary {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-lg);
	font-size: var(--fs-body-sm);
	color: var(--text-secondary);
}

.analysis__summary-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-500);
	box-shadow: 0 0 10px 2px var(--accent-glow);
	flex-shrink: 0;
}

/* ---- Responsive ---- */

/* 899.98, matching Problem's and Método's mobile breakpoint — see the
   comment in problem.css. */
@media (max-width: 899.98px) {
	.analysis__rows-header {
		display: none;
	}

	.analysis__row {
		grid-template-columns: 24px minmax(0, 1fr) auto;
		grid-template-areas:
			"bureau type status"
			"bureau date balance";
		row-gap: var(--space-2xs);
	}

	.analysis__row-bureau {
		grid-area: bureau;
	}

	.analysis__row-type {
		grid-area: type;
	}

	.analysis__row-status {
		grid-area: status;
		justify-self: end;
	}

	.analysis__row-date {
		grid-area: date;
	}

	.analysis__row-balance {
		grid-area: balance;
		justify-self: end;
	}

	.analysis__row-balance-track {
		max-width: 72px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.analysis__scanline {
		display: none;
	}
}