/**
 * Personal Race Report (#199) — "Tu Carrera" tab on /evento/ fecha-level.
 *
 * BEM naming: `.ne-personal-report__*`. Uses DS tokens (`--ne-*`).
 * Print-friendly via @media print overrides at the end.
 */

/* ==========================================================================
   Container
   ========================================================================== */

.ne-personal-report {
	padding: var(--ne-space-5, 1.25rem) 0;
}

/* ==========================================================================
   Header (avatar + title)
   ========================================================================== */

.ne-personal-report__header {
	display: flex;
	align-items: center;
	gap: var(--ne-space-4, 1rem);
	margin-bottom: var(--ne-space-6, 1.5rem);
}

.ne-personal-report__avatar img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid var(--ne-border);
}

.ne-personal-report__title h3 {
	margin: 0;
	font-size: 1.15rem;
	font-family: var(--ne-font-display);
	color: var(--ne-text);
}

.ne-personal-report__subtitle {
	margin: var(--ne-space-1, 0.25rem) 0 0;
	font-size: 0.85rem;
	color: var(--ne-text-muted);
}

/* ==========================================================================
   Metrics Grid
   ========================================================================== */

.ne-personal-report__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ne-space-4, 1rem);
}

/* ==========================================================================
   Card (individual metric)
   ========================================================================== */

.ne-personal-report__card {
	background: var(--ne-surface);
	border: 1px solid var(--ne-border);
	border-radius: var(--ne-radius-lg, 0.5rem);
	padding: var(--ne-space-5, 1.25rem);
	overflow: hidden;
}

.ne-personal-report__card--wide {
	grid-column: span 2;
}

.ne-personal-report__card-header {
	display: flex;
	align-items: center;
	gap: var(--ne-space-2, 0.5rem);
	margin-bottom: var(--ne-space-3, 0.75rem);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ne-text-muted);
}

.ne-personal-report__card-header i {
	font-size: 0.85rem;
	opacity: 0.7;
}

.ne-personal-report__card-body {
	display: flex;
	flex-direction: column;
	gap: var(--ne-space-2, 0.5rem);
}

/* ==========================================================================
   Metric 1: Expected Position
   ========================================================================== */

.ne-personal-report__position-compare {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ne-space-3, 0.75rem);
	padding: var(--ne-space-3, 0.75rem) 0;
}

.ne-personal-report__expected,
.ne-personal-report__actual {
	font-family: var(--ne-font-mono, monospace);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--ne-text);
}

.ne-personal-report__expected {
	opacity: 0.5;
}

.ne-personal-report__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 0.9rem;
}

/* Arrow backgrounds use direct rgba() matching tokens.css values.
 * --ne-green: #3DD68C, --ne-red: #FF4F4F, --ne-text-muted: #a3a5bb */
.ne-personal-report__arrow--up {
	background: rgba(61, 214, 140, 0.15);
	color: var(--ne-green);
}

.ne-personal-report__arrow--down {
	background: rgba(255, 79, 79, 0.15);
	color: var(--ne-red);
}

.ne-personal-report__arrow--neutral {
	background: rgba(163, 165, 187, 0.15);
	color: var(--ne-text-muted);
}

/* ==========================================================================
   Verdicts (shared across metrics)
   ========================================================================== */

.ne-personal-report__verdict {
	margin: var(--ne-space-2, 0.5rem) 0 0;
	font-size: 0.85rem;
	text-align: center;
	font-weight: 500;
}

.ne-personal-report__verdict--positive {
	color: var(--ne-green);
}

.ne-personal-report__verdict--negative {
	color: var(--ne-red);
}

.ne-personal-report__verdict--neutral {
	color: var(--ne-text-muted);
}

.ne-personal-report__meta-note {
	margin: 0;
	font-size: 0.75rem;
	color: var(--ne-text-muted);
	text-align: center;
	opacity: 0.7;
}

/* ==========================================================================
   Metric 2: Closest Rival
   ========================================================================== */

.ne-personal-report__rival-duel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ne-space-1, 0.25rem);
}

.ne-personal-report__rival-row {
	display: flex;
	align-items: center;
	gap: var(--ne-space-2, 0.5rem);
}

.ne-personal-report__rival-pos {
	font-family: var(--ne-font-mono, monospace);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--ne-text-muted);
	min-width: 2rem;
	text-align: center;
}

.ne-personal-report__rival-pos--pilot {
	color: var(--ne-accent, #5865f2);
}

.ne-personal-report__rival-name {
	font-size: 0.9rem;
	color: var(--ne-text);
}

.ne-personal-report__rival-name--link {
	color: var(--ne-accent, #5865f2);
	text-decoration: none;
}

.ne-personal-report__rival-name--link:hover {
	text-decoration: underline;
}

.ne-personal-report__rival-gap {
	font-family: var(--ne-font-mono, monospace);
	font-size: 0.8rem;
	color: var(--ne-text-muted);
	padding: var(--ne-space-1, 0.25rem) var(--ne-space-3, 0.75rem);
	background: var(--ne-elevated, rgba(255, 255, 255, 0.05));
	border-radius: var(--ne-radius-sm, 0.25rem);
}

/* ==========================================================================
   Metric 3: Trend Chart

   --pr-top is a unitless number (0-65) output by PHP representing the
   pixel offset from the top of the chart container.  CSS multiplies by
   1px via calc().  This avoids the percentage-padding-top bug (CSS spec:
   percentage padding resolves against parent WIDTH, not height).
   ========================================================================== */

.ne-personal-report__trend-chart {
	display: flex;
	align-items: flex-start;
	justify-content: space-around;
	height: 100px;
	position: relative;
	padding: var(--ne-space-2, 0.5rem) 0;
	overflow: hidden;
}

.ne-personal-report__trend-point {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	padding-top: calc(var(--pr-top, 35) * 1px);
}

.ne-personal-report__trend-dot {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ne-text-muted);
	flex-shrink: 0;
}

/* --ne-accent is #8B7FE8 -> rgb(139, 127, 232) */
.ne-personal-report__trend-dot--latest {
	background: var(--ne-accent, #8B7FE8);
	box-shadow: 0 0 0 3px rgba(139, 127, 232, 0.3);
}

.ne-personal-report__trend-label {
	font-family: var(--ne-font-mono, monospace);
	font-size: 0.7rem;
	color: var(--ne-text-muted);
	margin-top: var(--ne-space-1, 0.25rem);
}

.ne-personal-report__trend-meta {
	text-align: center;
	margin-top: var(--ne-space-2, 0.5rem);
}

/* ==========================================================================
   Metric 4: Consistency
   ========================================================================== */

.ne-personal-report__gauge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ne-space-1, 0.25rem);
}

.ne-personal-report__gauge-value {
	font-family: var(--ne-font-mono, monospace);
	font-size: 2rem;
	font-weight: 700;
	color: var(--ne-text);
}

.ne-personal-report__gauge-label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ne-accent, #8B7FE8);
}

.ne-personal-report__consistency-stats {
	display: flex;
	justify-content: center;
	gap: var(--ne-space-4, 1rem);
	margin-top: var(--ne-space-2, 0.5rem);
}

.ne-personal-report__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.ne-personal-report__stat-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ne-text-muted);
}

.ne-personal-report__stat-value {
	font-family: var(--ne-font-mono, monospace);
	font-size: 0.8rem;
	color: var(--ne-text);
}

/* ==========================================================================
   Metric 5: Safety Rating
   ========================================================================== */

.ne-personal-report__sr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ne-space-1, 0.25rem);
}

.ne-personal-report__sr-score {
	font-family: var(--ne-font-mono, monospace);
	font-size: 2.2rem;
	font-weight: 700;
}

.ne-personal-report__sr-label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ne-personal-report__sr--excellent .ne-personal-report__sr-score,
.ne-personal-report__sr--excellent .ne-personal-report__sr-label {
	color: var(--ne-green);
}

.ne-personal-report__sr--good .ne-personal-report__sr-score,
.ne-personal-report__sr--good .ne-personal-report__sr-label {
	color: var(--ne-accent, #8B7FE8);
}

.ne-personal-report__sr--regular .ne-personal-report__sr-score,
.ne-personal-report__sr--regular .ne-personal-report__sr-label {
	color: var(--ne-yellow);
}

.ne-personal-report__sr--critical .ne-personal-report__sr-score,
.ne-personal-report__sr--critical .ne-personal-report__sr-label {
	color: var(--ne-red);
}

/* ==========================================================================
   Responsive: tablet (768px) — matches steward-report breakpoint
   ========================================================================== */

@media (max-width: 768px) {
	.ne-personal-report__grid {
		grid-template-columns: 1fr;
	}

	.ne-personal-report__card--wide {
		grid-column: span 1;
	}

	.ne-personal-report__header {
		gap: var(--ne-space-3, 0.75rem);
	}

	.ne-personal-report__avatar img {
		width: 44px;
		height: 44px;
	}

	.ne-personal-report__title h3 {
		font-size: 1rem;
	}

	.ne-personal-report__expected,
	.ne-personal-report__actual {
		font-size: 1.4rem;
	}

	.ne-personal-report__gauge-value {
		font-size: 1.6rem;
	}

	.ne-personal-report__sr-score {
		font-size: 1.8rem;
	}

	.ne-personal-report__consistency-stats {
		gap: var(--ne-space-3, 0.75rem);
	}

	.ne-personal-report__trend-chart {
		height: 80px;
	}
}

/* ==========================================================================
   Responsive: mobile (480px) — matches steward-report pattern
   ========================================================================== */

@media (max-width: 480px) {
	.ne-personal-report__expected,
	.ne-personal-report__actual {
		font-size: 1.2rem;
	}

	.ne-personal-report__gauge-value {
		font-size: 1.4rem;
	}

	.ne-personal-report__sr-score {
		font-size: 1.5rem;
	}

	.ne-personal-report__trend-chart {
		height: 70px;
	}

	.ne-personal-report__consistency-stats {
		gap: var(--ne-space-2, 0.5rem);
	}

	.ne-personal-report__stat-value {
		font-size: 0.75rem;
	}
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
	.ne-personal-report {
		padding: 0;
		color: #000;
		background: #fff;
	}

	.ne-personal-report__grid {
		grid-template-columns: 1fr 1fr;
	}

	.ne-personal-report__card {
		border: 1px solid #ccc;
		background: none;
		break-inside: avoid;
	}

	.ne-personal-report__arrow--up {
		color: #28a745;
		background: none;
	}

	.ne-personal-report__arrow--down {
		color: #dc3545;
		background: none;
	}

	.ne-personal-report__arrow--neutral {
		color: #666;
		background: none;
	}

	.ne-personal-report__verdict--positive {
		color: #28a745;
	}

	.ne-personal-report__verdict--negative {
		color: #dc3545;
	}

	.ne-personal-report__sr-score,
	.ne-personal-report__sr-label,
	.ne-personal-report__gauge-value,
	.ne-personal-report__gauge-label {
		color: #000;
	}

	.ne-personal-report__trend-dot--latest {
		box-shadow: none;
		border: 2px solid #333;
	}

	.ne-personal-report a {
		color: #000;
		text-decoration: underline;
	}
}