/* Radar Reader — la vista del análisis.

   Esta hoja la comparten el panel del coach y las páginas públicas: el
   informe es EL MISMO objeto en los dos lados, así que no puede tener dos
   juegos de estilos que se vayan separando con el tiempo.
   Se encola en el admin y en el front. */

/* --- Tarjetas de conteo --- */

.rr-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--rr-space-3);
	margin-bottom: var(--rr-space-6);
}

.rr-card {
	background: var(--rr-surface);
	border: 1px solid var(--rr-border);
	border-radius: var(--rr-radius);
	padding: var(--rr-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--rr-space-1);
}

.rr-card__n {
	font-family: var(--rr-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--rr-size-2xl);
	line-height: 1.1;
	color: var(--rr-ink);
}

.rr-card__l {
	font-size: var(--rr-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rr-text-3);
}

/* Un código de palo no se escribe en mayúsculas: "8i" es 8i, y "8I" en un
   informe de golf se lee como otra cosa. */
.rr-card__l--code {
	text-transform: none;
	font-family: var(--rr-font-mono);
	letter-spacing: 0;
}

/* --- Tablas --- */

/*
 * Las tablas DEL INFORME se dibujan enteras acá, con !important.
 *
 * No es capricho: el informe vive adentro del tema del sitio, y casi todos
 * los temas le ponen bordes propios a th y td con la misma especificidad que
 * la nuestra. Gana el que cargue último, que no siempre somos nosotros, y el
 * resultado es una tabla con bordes de dos estilos mezclados y columnas de
 * distinto ancho en cada renglón.
 *
 * table-layout: fixed hace que manden los anchos declarados en el colgroup y
 * no el contenido de cada fila. Sin eso, una celda con texto corto y otra con
 * texto largo terminan definiendo columnas distintas.
 *
 * La clase va SOLO en las tablas del informe: las listas del panel de
 * WordPress usan `widefat`, que ya sabe acomodarse sola.
 */
.rr-table--fixed {
	width: 100% !important;
	table-layout: fixed !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	border: 1px solid var(--rr-border) !important;
	background: var(--rr-surface);
	margin: var(--rr-space-3) 0 0;
}

.rr-table--fixed > thead > tr > th,
.rr-table--fixed > tbody > tr > th,
.rr-table--fixed > tbody > tr > td {
	border: 0 !important;
	padding: var(--rr-space-3) var(--rr-space-4) !important;
	vertical-align: top;
	overflow-wrap: anywhere;
	word-break: normal;
	background: none;
}

.rr-table--fixed > thead > tr {
	border-bottom: 1px solid var(--rr-border);
}

/* En un teléfono, antes que apretar las columnas hasta romperlas, la tabla
   se desliza dentro de .rr-scroll. */
@media (max-width: 640px) {

	.rr-table--fixed {
		min-width: 480px;
	}
}

.rr-table {
	border-color: var(--rr-border);
}

.rr-table th {
	text-align: left;
	font-size: var(--rr-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rr-text-2);
	font-weight: 500;
}

.rr-table td {
	vertical-align: top;
}

/*
 * La línea que separa filas va en la FILA, no en cada celda.
 * Con la línea por celda, una celda cuyo contenido es un inline-block
 * (la columna de notas) dibujaba el borde solo debajo del texto, y la
 * tabla salía impresa con rayitas sueltas de distinto largo.
 */
.rr-table > tbody > tr {
	border-bottom: 1px solid var(--rr-border);
}

.rr-table > tbody > tr:last-child {
	border-bottom: 0;
}

.rr-table > tbody > tr > td,
.rr-table > tbody > tr > th {
	border-bottom: 0;
}

/* Las cifras siempre en mono y tabulares: así alinean los decimales
   y se puede comparar una progresión de un vistazo. */
.rr-table .rr-mono {
	font-family: var(--rr-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--rr-size-sm);
}

.rr-ref {
	color: var(--rr-text-3);
	font-size: var(--rr-size-xs);
	line-height: 1.5;
	display: inline-block;
	margin-top: 2px;
	max-width: 62ch;
}

/* --- Badges de fuente --- */

.rr-badge {
	display: inline-block;
	padding: 2px 7px;
	border-radius: var(--rr-radius);
	font-size: var(--rr-size-xs);
	line-height: 1.6;
	white-space: nowrap;
	border: 1px solid var(--rr-border);
	color: var(--rr-text-2);
	background: var(--rr-surface-alt);
}

.rr-badge--kb_coach {
	border-color: var(--rr-brand);
	color: var(--rr-brand);
	background: var(--rr-brand-soft);
}

.rr-badge--trackman_oficial {
	border-color: var(--rr-positive);
	color: var(--rr-positive);
}

/* Lo que decidió el diseño y no la metodología del coach: se marca
   distinto a propósito, para poder auditarlo de un vistazo. */
.rr-badge--criterio_tecnico {
	border-color: var(--rr-tentative);
	color: var(--rr-tentative);
}

.rr-badge--rel-alta  { color: var(--rr-positive); border-color: var(--rr-positive); }
.rr-badge--rel-media { color: var(--rr-tentative); border-color: var(--rr-tentative); }
.rr-badge--rel-baja  { color: var(--rr-brand); border-color: var(--rr-brand); }

/* --- Análisis --- */

.rr-adn {
	background: var(--rr-surface);
	border: 1px solid var(--rr-border);
	border-left: 3px solid var(--rr-brand);
	border-radius: var(--rr-radius);
	padding: var(--rr-space-6);
	margin: var(--rr-space-6) 0;
}

.rr-adn h2 { margin-top: 0; }

.rr-adn__summary {
	font-size: var(--rr-size-lg);
	color: var(--rr-ink);
	margin: 0;
}

.rr-priority {
	margin-bottom: var(--rr-space-8);
}

.rr-priority h3 {
	color: var(--rr-brand);
	margin-bottom: var(--rr-space-2);
}

.rr-list--ok li { color: var(--rr-positive); }

/* La serie de los cuatro palos: una fila que no se parte. */
.rr-series {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rr-space-3);
	align-items: center;
}

.rr-series__item {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-1);
	white-space: nowrap;
}

.rr-series__item .rr-mono {
	font-size: var(--rr-size-sm);
	min-width: 44px;
	text-align: right;
}

.rr-danger { color: var(--rr-brand); }

.rr-cheatsheet {
	margin: var(--rr-space-6) 0;
	background: var(--rr-surface);
	border: 1px solid var(--rr-border);
	border-radius: var(--rr-radius);
	padding: var(--rr-space-4);
}

.rr-cheatsheet summary {
	cursor: pointer;
	font-weight: 500;
	color: var(--rr-ink);
}

.rr-cheatsheet table { margin-top: var(--rr-space-4); }

/* ============================================================
   LA LÁMINA DEL ARCO
   El dibujo que ARC.docx describe catorce veces y nunca tuvo.
   ============================================================ */

.rr-plates {
	display: grid;
	gap: var(--rr-space-4);
	margin: var(--rr-space-6) 0;
}

.rr-plate {
	width: 100%;
	height: auto;
	background: var(--rr-surface);
	border: 1px solid var(--rr-border);
	border-radius: var(--rr-radius);
	display: block;
}

/* Grilla milimetrada de verdad: líneas cada 0,5° y numeración cada 2°.
   Un gráfico limpio sería más lindo y menos útil: este usuario mide. */
.rr-grid--minor { stroke: var(--rr-border); stroke-width: 0.5; }
.rr-grid--major { stroke: var(--rr-border); stroke-width: 1; }

/* La banda neutra es una franja, no una línea: hace visible el criterio
   de neutralidad sin tener que explicarlo. */
.rr-plate__band { fill: var(--rr-brand-soft); }
.rr-plate__zero { stroke: var(--rr-text-3); stroke-width: 1; }

/* El cruce por cero: la vertical punteada entre los dos palos que cambian
   de signo. Es lo que vuelve visible el concepto de palo neutro. */
.rr-plate__cross {
	stroke: var(--rr-brand);
	stroke-width: 1.5;
	stroke-dasharray: 4 4;
}

.rr-plate__crosslabel {
	fill: var(--rr-brand);
	font-family: var(--rr-font-mono);
	font-size: 11px;
}

.rr-plate__line {
	fill: none;
	stroke: var(--rr-ink);
	stroke-width: 2;
	stroke-linejoin: round;
}

.rr-plate__dot { stroke: var(--rr-surface); stroke-width: 2; }

.rr-plate__value,
.rr-plate__tick,
.rr-plate__n {
	font-family: var(--rr-font-mono);
	font-variant-numeric: tabular-nums;
}

.rr-plate__value { font-size: 12px; font-weight: 500; fill: var(--rr-ink); }
.rr-plate__tick  { font-size: 10px; fill: var(--rr-text-3); }
.rr-plate__n     { font-size: 9px;  fill: var(--rr-text-3); }

.rr-plate__club {
	font-family: var(--rr-font-mono);
	font-size: 12px;
	font-weight: 600;
	fill: var(--rr-ink);
}

.rr-plate__title {
	font-size: 13px;
	font-weight: 600;
	fill: var(--rr-ink);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rr-plate__subtitle { font-size: 12px; fill: var(--rr-text-2); }
.rr-plate__unit     { font-size: 10px; fill: var(--rr-text-3); }

/* --- Mapa de impacto y matriz face/path --- */

.rr-charts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rr-space-6);
	margin: var(--rr-space-6) 0;
}

.rr-chart {
	background: var(--rr-surface);
	border: 1px solid var(--rr-border);
	border-radius: var(--rr-radius);
	max-width: 360px;
	width: 100%;
	height: auto;
}

.rr-face { fill: var(--rr-surface-alt); stroke: var(--rr-border); stroke-width: 1.5; }
.rr-sweet { fill: var(--rr-positive); fill-opacity: 0.12; stroke: var(--rr-positive); stroke-width: 1; stroke-dasharray: 3 3; }
.rr-face__axis { stroke: var(--rr-border); stroke-width: 1; }
.rr-face__dot { stroke: var(--rr-surface); stroke-width: 1.5; }

.rr-matrix__box { fill: var(--rr-surface-alt); stroke: var(--rr-border); stroke-width: 1; }
.rr-matrix__band { fill: var(--rr-positive); fill-opacity: 0.12; }
.rr-matrix__diagonal { stroke: var(--rr-positive); stroke-width: 1.5; }
.rr-matrix__axis { stroke: var(--rr-border); stroke-width: 1; }

.rr-chart__axis { font-size: 10px; fill: var(--rr-text-3); }

.rr-chart-block h3 { margin-bottom: var(--rr-space-2); }
.rr-chart-block p  { max-width: 42ch; }

.rr-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rr-space-3);
	margin: var(--rr-space-2) 0 var(--rr-space-4);
}

.rr-legend__item {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-1);
	font-family: var(--rr-font-mono);
	font-size: var(--rr-size-xs);
	color: var(--rr-text-2);
}

.rr-legend__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

/* --- Utilidades compartidas por las dos vistas --- */

.rr-chip {
	display: inline-block;
	min-width: 34px;
	padding: 1px 8px;
	text-align: center;
	border-radius: var(--rr-radius);
	font-family: var(--rr-font-mono);
	font-size: var(--rr-size-xs);
	font-weight: 500;
	color: var(--rr-on-brand);
	background: var(--c, var(--rr-text-3));
}

.rr-scroll {
	overflow-x: auto;
	max-width: 100%;
}

.rr-list {
	list-style: disc;
	margin-left: var(--rr-space-6);
	color: var(--rr-text-2);
}

.rr-meta {
	color: var(--rr-text-3);
	font-size: var(--rr-size-xs);
	margin-top: var(--rr-space-6);
}


/* --- La nota del coach ---------------------------------------------------
   Lo único del informe escrito por una persona, así que se ve distinto de
   todo lo que calculó el motor. */

.rr-note-card {
	background: var(--rr-surface);
	border: 1px solid var(--rr-border);
	border-left: 3px solid var(--rr-positive);
	border-radius: var(--rr-radius);
	padding: var(--rr-space-6);
	margin: var(--rr-space-6) 0;
}

.rr-note-card h2 { margin-top: 0; }
.rr-note-card p:last-child { margin-bottom: 0; }

/* La sesión anterior, en la lámina comparada: punteada y gris. Lo que pasó
   antes es contexto; lo que se mira es lo de ahora. */

.rr-plate__line--past {
	stroke: var(--rr-text-3);
	stroke-width: 1.5;
	stroke-dasharray: 5 4;
}

.rr-plate__dot--past { stroke-width: 1.5; }


/* --- El informe como hoja -------------------------------------------------
   El informe se lee dentro del tema del sitio, que le impone sus títulos, sus
   serifas y sus interlineados. Acá se le devuelve su tipografía: en una hoja
   de medición, la tipografía es parte del dato. Todo va scopeado a
   .rr-app--report para no pelearse con el resto de las páginas. */

.rr-app--report {
	font-family: var(--rr-font);
	color: var(--rr-ink);
	max-width: 190mm;
	margin: 0 auto;
}

.rr-app--report h1,
.rr-app--report h2,
.rr-app--report h3 {
	font-family: var(--rr-font);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--rr-ink);
}

.rr-app--report h2 {
	font-size: var(--rr-size-lg);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 1px solid var(--rr-border);
	padding-bottom: var(--rr-space-2);
	margin-top: var(--rr-space-8);
}

.rr-report__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--rr-space-4);
	border-bottom: 2px solid var(--rr-ink);
	padding-bottom: var(--rr-space-4);
	margin-bottom: var(--rr-space-6);
}

.rr-report__logo {
	max-height: 46px;
	width: auto;
	display: block;
}

.rr-report__id { text-align: right; }

.rr-report__kicker {
	margin: 0;
	font-family: var(--rr-font-mono);
	font-size: var(--rr-size-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rr-brand);
}

.rr-app--report .rr-report__head h1 {
	margin: 2px 0 0;
	font-size: var(--rr-size-2xl);
	line-height: 1.1;
}

.rr-report__when {
	margin: 2px 0 0;
	font-size: var(--rr-size-sm);
	color: var(--rr-text-2);
}

.rr-report__foot {
	display: flex;
	justify-content: space-between;
	gap: var(--rr-space-4);
	border-top: 1px solid var(--rr-border);
	margin-top: var(--rr-space-8);
	padding-top: var(--rr-space-3);
	font-size: var(--rr-size-xs);
	color: var(--rr-text-3);
}

@media (max-width: 640px) {

	.rr-report__head { align-items: flex-start; }
	.rr-report__id   { text-align: left; }
}


/* La tabla de clasificación: el nombre del patrón en la primera columna,
   como encabezado de fila. Es una tabla de lectura, no una grilla de datos. */

.rr-table--class th[scope="row"] {
	text-align: left;
	font-weight: 600;
	color: var(--rr-ink);
	white-space: normal;
}


/* --- El campo visto desde arriba -----------------------------------------
   Las franjas de referencia van atrás y en verde muy suave: son el contexto,
   no el dato. Lo que se mira son los puntos. */

.rr-chart--map {
	max-width: 420px;
}

.rr-map__band {
	fill: var(--rr-positive);
	fill-opacity: 0.10;
	stroke: var(--rr-positive);
	stroke-opacity: 0.35;
	stroke-width: 0.5;
}

.rr-map__target {
	stroke: var(--rr-text-3);
	stroke-width: 1;
	stroke-dasharray: 4 4;
}


/* --- El número a mover ---------------------------------------------------
   Va adentro del hallazgo y no en una sección aparte: el objetivo sin el
   problema al lado no significa nada. */

.rr-kpi {
	border-left: 3px solid var(--rr-brand);
	padding: var(--rr-space-2) 0 var(--rr-space-2) var(--rr-space-4);
	margin: var(--rr-space-2) 0;
}

.rr-kpi__label {
	font-family: var(--rr-font-mono);
	font-size: var(--rr-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rr-brand);
}

.rr-kpi__nums {
	margin-top: 2px;
	font-size: var(--rr-size-sm);
	color: var(--rr-ink);
}


/* --- Objetivos -----------------------------------------------------------
   Tres números por línea, siempre los mismos tres: de dónde salió, dónde está
   y a dónde tiene que llegar. Con el valor de hoy solo no se sabe nada. */

.rr-goal {
	background: var(--rr-surface);
	border: 1px solid var(--rr-border);
	border-left: 3px solid var(--rr-brand);
	border-radius: var(--rr-radius);
	padding: var(--rr-space-4) var(--rr-space-6);
	margin-bottom: var(--rr-space-4);
}

.rr-goal h3 { margin: 0 0 var(--rr-space-2); }

.rr-goal__track + .rr-goal__track {
	border-top: 1px solid var(--rr-border);
	margin-top: var(--rr-space-4);
	padding-top: var(--rr-space-4);
}

.rr-goal__label {
	font-size: var(--rr-size-sm);
	color: var(--rr-text-2);
}

.rr-goal__nums {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rr-space-4);
	margin: var(--rr-space-2) 0;
	font-size: var(--rr-size-base);
	color: var(--rr-ink);
}


/* --- Ejercicios ----------------------------------------------------------
   Van al final del informe: primero qué pasa y por qué, después qué hacer. */

.rr-drill {
	background: var(--rr-surface);
	border: 1px solid var(--rr-border);
	border-left: 3px solid var(--rr-positive);
	border-radius: var(--rr-radius);
	padding: var(--rr-space-4) var(--rr-space-6);
	margin-bottom: var(--rr-space-4);
	break-inside: avoid;
}

.rr-drill h3 { margin: 0 0 var(--rr-space-2); }

.rr-drill__summary {
	color: var(--rr-text-2);
	margin-top: 0;
}

.rr-drill__img {
	max-width: 100%;
	height: auto;
	border-radius: var(--rr-radius);
}

.rr-drill-picker li { margin-bottom: var(--rr-space-3); }

/* En papel el link no se puede clickear, así que se imprime la dirección. */
@media screen {

	.rr-drill__video + .rr-ref { display: none; }
}

/* --- Impresión ---------------------------------------------------------
   El informe se imprime desde el navegador: sin PDF generado en servidor,
   sin librerías y sin una segunda plantilla que mantener.

   El problema real de imprimir dentro de un tema de WordPress es todo lo que
   NO es el informe: el encabezado del sitio, el pie, el menú, los widgets
   flotantes de traducción o de chat. Ocultarlos uno por uno es una lista que
   nunca termina, así que se invierte: se apaga todo y se vuelve a encender
   solo el informe. */

@media print {

	@page {
		size: A4;
		margin: 16mm 14mm;
	}

	/* Fase 1: nada se ve. */
	body * {
		visibility: hidden;
	}

	/* Fase 2: el informe sí, y todo lo que tenga adentro. */
	.rr-app,
	.rr-app *,
	.rr-print,
	.rr-print * {
		visibility: visible;
	}

	/* Fase 3: el informe manda en la hoja, arriba a la izquierda. */
	.rr-app,
	.rr-print {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		background: #fff;
	}

	.rr-noprint,
	.rr-noprint * {
		display: none !important;
		visibility: hidden !important;
	}

	body,
	#wpcontent,
	#wpbody-content {
		background: #fff !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/*
	 * Los navegadores tiran los fondos al imprimir para ahorrar tinta. Acá el
	 * fondo ES el dato: el color del chip identifica el palo y el punto de la
	 * leyenda es lo único que dice de qué palo es cada bola del gráfico. Sin
	 * esto, la leyenda sale en blanco y el informe deja de entenderse.
	 */
	* {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	/*
	 * Lo que no se parte son los BLOQUES, no las secciones. Una sección
	 * como "Qué te está limitando" mide más que una hoja: pedirle que no
	 * se parta la empuja entera a la página siguiente y deja media hoja en
	 * blanco atrás. Adentro, cada prioridad sí se mantiene junta.
	 */
	.rr-plate,
	.rr-chart,
	.rr-chart-block,
	.rr-adn,
	.rr-note-card,
	.rr-priority,
	.rr-cards {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.rr-priority h3,
	h2,
	h3 {
		break-after: avoid;
		page-break-after: avoid;
	}

	.rr-charts { display: block; }

	.rr-chart { max-width: 300px; }

	a[href]::after { content: ""; }

	/* El encabezado no se parte nunca: es la identidad de la hoja. */
	.rr-report__head {
		break-inside: avoid;
		break-after: avoid;
	}
}


/* ==========================================================================
   EL INFORME, LEGIBLE
   --------------------------------------------------------------------------
   Todo lo de abajo está scopeado a .rr-app--report a propósito: el panel del
   coach y las otras dos labs comparten esta hoja y estos tokens, y no tienen
   por qué cambiar de tamaño porque cambió el informe del jugador.

   Va al final del archivo, después del @media print de arriba, porque varias
   de estas reglas pisan valores de ese bloque y en CSS gana la última.
   ========================================================================== */
/* --- 1. El ancho ---------------------------------------------------------
   El informe estaba clavado en 190mm, que es una medida de HOJA, no de
   pantalla: adentro de un contenedor de 1180 ocupaba el 61%. En papel esa
   medida sigue siendo la correcta; en pantalla no.
   El texto corrido sí se limita, pero por medida de lectura (72 caracteres),
   que es lo que hace legible un párrafo — no por el ancho de una hoja A4. */

.rr-app--report {
	max-width: 1100px;
	font-size: 17px;
	line-height: 1.65;
}

.rr-app--report > p,
.rr-app--report .rr-adn p,
.rr-app--report .rr-section > p {
	max-width: 72ch;
}

/* --- 2. La escala de texto ----------------------------------------------
   El problema no era el cuerpo del texto sino la letra chica: TODO lo que
   explica algo —las notas al pie de los gráficos, el cuerpo de cada
   hallazgo, la descripción de cada score— vivía en 12px. Justo lo que el
   jugador tiene que leer para entender el informe. */

.rr-app--report .rr-ref {
	font-size: 15px;
	line-height: 1.6;
	color: var(--rr-text-2);
	max-width: 72ch;
}

.rr-app--report .rr-chart-block p,
.rr-app--report .rr-chart-block .rr-ref {
	max-width: 72ch;
}

.rr-app--report h2 {
	font-size: 25px;
	letter-spacing: 0.04em;
	padding-bottom: var(--rr-space-3);
	margin-top: var(--rr-space-12);
}

.rr-app--report h3 {
	font-size: 20px;
}

.rr-app--report .rr-table > tbody > tr > td,
.rr-app--report .rr-table > tbody > tr > th,
.rr-app--report .rr-table > thead > tr > th {
	font-size: 16px;
	padding-top: var(--rr-space-3);
	padding-bottom: var(--rr-space-3);
}

.rr-app--report .rr-table .rr-mono {
	font-size: 16px;
}

.rr-app--report .rr-badge {
	font-size: 13px;
	padding: 3px 10px;
}

/* --- 3. El encabezado ----------------------------------------------------
   Es lo primero que ve el jugador y lo que queda arriba del PDF: el nombre
   tiene que pesar. */

.rr-app--report .rr-report__head h1 {
	font-size: 42px;
	letter-spacing: -0.02em;
}

.rr-app--report .rr-report__kicker {
	font-size: 13px;
	letter-spacing: 0.18em;
}

.rr-app--report .rr-report__when {
	font-size: 16px;
}

.rr-app--report .rr-report__logo {
	max-height: 64px;
}

/* --- 4. Las tarjetas de arriba -------------------------------------------
   Mezclaban dos cosas distintas: un puntaje y una calidad de dato por un
   lado, y por el otro cuántas bolas se pegaron con cada palo. Seis cajas
   iguales en fila hacen que las seis pesen lo mismo, y no pesan lo mismo.
   Las dos primeras se agrandan; los conteos por palo se achican. */

.rr-app--report .rr-cards {
	grid-template-columns: repeat(2, minmax(0, 1.4fr)) repeat(4, minmax(0, 1fr));
	gap: var(--rr-space-4);
	margin-bottom: var(--rr-space-8);
}

.rr-app--report .rr-card {
	padding: var(--rr-space-6) var(--rr-space-4);
}

.rr-app--report .rr-card:nth-child(-n + 2) {
	background: var(--rr-ink);
	border-color: var(--rr-ink);
}

.rr-app--report .rr-card:nth-child(-n + 2) .rr-card__n {
	font-size: 46px;
	color: #fff;
}

.rr-app--report .rr-card:nth-child(-n + 2) .rr-card__l {
	color: rgba(255, 255, 255, 0.66);
	font-size: 13px;
}

.rr-app--report .rr-card:nth-child(n + 3) .rr-card__n {
	font-size: 28px;
	color: var(--rr-text-2);
}

@media (max-width: 900px) {

	.rr-app--report .rr-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- 5. El bloque del ADN ------------------------------------------------ */

.rr-app--report .rr-adn {
	border-left-width: 5px;
	padding: var(--rr-space-8);
}

.rr-app--report .rr-adn h2 {
	font-size: 28px;
	border-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
}

.rr-app--report .rr-adn__summary {
	font-size: 19px;
	line-height: 1.55;
	max-width: 72ch;
}

/* --- 6. Los limitantes ---------------------------------------------------
   Es la sección por la que existe el informe y se leía como una planilla:
   cuatro columnas de igual peso, el título del hallazgo en negrita chica y
   la explicación —lo único que dice QUÉ HACER— en gris de 12px.
   Ahora cada prioridad es una tarjeta con su número, y adentro cada hallazgo
   respira: el título grande, el cuerpo legible, y el peso como un número
   que se ve de lejos. */

.rr-app--report .rr-priority {
	background: var(--rr-surface);
	border: 1px solid var(--rr-border);
	border-left: 5px solid var(--rr-brand);
	border-radius: var(--rr-radius-lg);
	padding: var(--rr-space-6);
	margin-bottom: var(--rr-space-6);
}

.rr-app--report .rr-priority h3 {
	margin-top: 0;
	padding-bottom: var(--rr-space-3);
	border-bottom: 1px solid var(--rr-border);
}

/* La segunda prioridad y las siguientes bajan de intensidad: el orden es el
   mensaje, y si todas gritan igual no hay orden. */
.rr-app--report .rr-priority + .rr-priority {
	border-left-color: var(--rr-text-3);
}

.rr-app--report .rr-table--findings > tbody > tr > td {
	padding-top: var(--rr-space-4);
	padding-bottom: var(--rr-space-4);
	vertical-align: top;
}

.rr-app--report .rr-table--findings strong {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	display: block;
	margin-bottom: var(--rr-space-1);
}

/* El título del hallazgo ahora es un bloque, así que el <br> que lo separaba
   del cuerpo dejó un renglón vacío en el medio. */
.rr-app--report .rr-table--findings td br {
	display: none;
}

.rr-app--report .rr-table--findings td .rr-ref {
	margin-top: var(--rr-space-1);
}

.rr-app--report .rr-table--findings > tbody > tr > td:nth-child(3) {
	font-size: 26px;
	line-height: 1.1;
	color: var(--rr-ink);
}

.rr-app--report .rr-table--findings > tbody > tr > td:nth-child(3) .rr-ref {
	font-size: 13px;
	display: inline;
}

/* --- 7. Las fortalezas ---------------------------------------------------
   Estaban como una lista suelta al final. Van en tarjeta verde: es la única
   parte del informe que da una noticia buena y se merece el mismo peso
   visual que los limitantes. */

.rr-app--report .rr-list--ok {
	background: #1f7a3a0f;
	border: 1px solid #1f7a3a33;
	border-left: 5px solid var(--rr-positive);
	border-radius: var(--rr-radius-lg);
	padding: var(--rr-space-6) var(--rr-space-6) var(--rr-space-6) var(--rr-space-12);
	margin: 0;
}

.rr-app--report .rr-list--ok li {
	color: var(--rr-ink);
	margin-bottom: var(--rr-space-3);
	max-width: 72ch;
}

.rr-app--report .rr-list--ok li:last-child {
	margin-bottom: 0;
}

/* --- 8. Los gráficos -----------------------------------------------------
   Estaban topeados en 360px y su pie de foto en 42 caracteres: en una hoja
   de 718px sobraba la mitad del ancho y el texto salía en un chorizo
   angosto. Ahora cada lámina usa el ancho completo del informe.

   Se probó ponerlas de a dos, una al lado de la otra, para compararlas de un
   vistazo. No va: la lámina del arco son cuatro puntos y sus valores, y a
   media hoja los rótulos de los palos y las cifras quedan apretados. Una
   progresión se lee mejor estirada. */

.rr-app--report .rr-plates {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rr-space-6);
	margin-bottom: var(--rr-space-4);
}

.rr-app--report .rr-chart,
.rr-app--report .rr-plate {
	max-width: 100%;
	width: 100%;
}

.rr-app--report .rr-plate__value { font-size: 14px; }
.rr-app--report .rr-plate__label { font-size: 15px; }
.rr-app--report .rr-plate__tick  { font-size: 12px; }
.rr-app--report .rr-plate__n     { font-size: 11px; }
.rr-app--report .rr-plate__title    { font-size: 15px; }
.rr-app--report .rr-plate__subtitle { font-size: 14px; }

/* --- 9. La hoja impresa --------------------------------------------------
   En papel el ancho vuelve a ser el de la hoja, pero la letra chica NO
   vuelve a 12px: el PDF es lo que el jugador se lleva y lo que muchas veces
   termina impreso de verdad. */

@media print {

	.rr-app--report {
		max-width: 190mm;
		font-size: 11.5pt;
	}

	.rr-app--report .rr-ref { font-size: 9.5pt; }
	.rr-app--report h2 { font-size: 15pt; margin-top: 18pt; }
	.rr-app--report h3 { font-size: 12.5pt; }
	.rr-app--report .rr-report__head h1 { font-size: 26pt; }

	.rr-app--report .rr-table > tbody > tr > td,
	.rr-app--report .rr-table > tbody > tr > th,
	.rr-app--report .rr-table .rr-mono { font-size: 10pt; }

	.rr-app--report .rr-table--findings strong { font-size: 11.5pt; }
	.rr-app--report .rr-table--findings > tbody > tr > td:nth-child(3) { font-size: 15pt; }

	.rr-app--report .rr-card:nth-child(-n + 2) .rr-card__n { font-size: 26pt; }
	.rr-app--report .rr-card:nth-child(n + 3) .rr-card__n { font-size: 17pt; }

	/* Una prioridad no se parte al medio entre dos hojas. */
	.rr-app--report .rr-priority,
	.rr-app--report .rr-list--ok,
	.rr-app--report .rr-adn {
		break-inside: avoid;
	}

	/*
	 * En papel el ancho útil es de 190mm ≈ 718px, así que el corte para
	 * pantalla angosta se dispara solo y las seis tarjetas caían de a dos:
	 * media hoja gastada en encabezado. En papel van siempre en una fila.
	 */
	.rr-app--report .rr-cards {
		grid-template-columns: repeat(2, minmax(0, 1.35fr)) repeat(4, minmax(0, 1fr));
		gap: var(--rr-space-2);
	}

	.rr-app--report .rr-card {
		padding: var(--rr-space-3);
	}

	/*
	 * En columnas angostas los rótulos se partían al medio de la palabra
	 * ("CONFIA / NZA"). Un informe que se entrega no puede tener eso.
	 */
	.rr-app--report .rr-table--findings th,
	.rr-app--report .rr-table--findings td {
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
	}

	.rr-app--report .rr-table--findings > thead > tr > th {
		font-size: 8pt;
		letter-spacing: 0;
	}
}

/* ==========================================================================
   DISPERSIÓN POR PALO
   --------------------------------------------------------------------------
   Dos conos superpuestos por eje: la barra clara es el real —lo peor que
   pasó— y la oscura el típico. Cuando la clara sobresale mucho de la oscura
   hay una bola sola arruinando el palo, y se tiene que ver sin leer un
   número.
   ========================================================================== */

.rr-cone {
	border: 1px solid var(--rr-border);
	border-radius: var(--rr-radius-lg);
	padding: var(--rr-space-5) var(--rr-space-6);
	margin-bottom: var(--rr-space-4);
	background: var(--rr-surface);
	break-inside: avoid;
	page-break-inside: avoid;
}

.rr-cone__head {
	display: flex;
	align-items: baseline;
	gap: var(--rr-space-3);
	margin-bottom: var(--rr-space-3);
	padding-bottom: var(--rr-space-2);
	border-bottom: 1px solid var(--rr-border);
}

.rr-cone__club {
	font-family: var(--rr-font-mono);
	font-size: 22px;
	font-weight: 700;
	color: var(--rr-ink);
}

.rr-cone__n {
	font-size: 14px;
	color: var(--rr-text-3);
}

.rr-cone__axis {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	align-items: center;
	gap: var(--rr-space-2) var(--rr-space-4);
	margin-bottom: var(--rr-space-2);
}

.rr-cone__label {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rr-text-3);
}

.rr-cone__read {
	grid-column: 2;
	font-size: 14px;
	color: var(--rr-text-2);
	margin-top: calc(-1 * var(--rr-space-2));
}

.rr-cone__use {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rr-space-8);
	margin: var(--rr-space-4) calc(-1 * var(--rr-space-6)) calc(-1 * var(--rr-space-5));
	padding: var(--rr-space-3) var(--rr-space-6);
	border-top: 1px solid var(--rr-border);
	background: #00000006;
	border-radius: 0 0 var(--rr-radius-lg) var(--rr-radius-lg);
}

.rr-cone__kpi {
	font-size: 14px;
	color: var(--rr-text-3);
}

.rr-cone__kpi strong {
	display: block;
	font-family: var(--rr-font-mono);
	font-size: 20px;
	color: var(--rr-ink);
	font-weight: 700;
}

.rr-spread {
	width: 100%;
	max-width: 520px;
	height: auto;
}

.rr-spread__ref     { fill: var(--rr-positive); opacity: 0.13; }
.rr-spread__real    { fill: var(--rr-brand); opacity: 0.22; }
.rr-spread__typical { fill: var(--rr-brand); opacity: 0.85; }
.rr-spread__mean    { fill: var(--rr-ink); }

.rr-spread__zero {
	stroke: var(--rr-text-3);
	stroke-width: 1;
	stroke-dasharray: 3 3;
}

.rr-spread__end,
.rr-spread__span {
	font-family: var(--rr-font-mono);
	font-size: 11px;
	fill: var(--rr-text-3);
}

.rr-spread__span {
	font-weight: 700;
	fill: var(--rr-ink);
}

@media (max-width: 700px) {

	.rr-cone__axis {
		grid-template-columns: 1fr;
	}

	.rr-cone__read {
		grid-column: 1;
	}
}

/* --- Lo mismo, en golpes -------------------------------------------------
   Es el número que traduce todo lo demás. No reemplaza a los grados: va
   arriba de los conos, y los grados siguen en su sección. */

.rr-cost {
	background: var(--rr-ink);
	color: #fff;
	border-radius: var(--rr-radius-lg);
	padding: var(--rr-space-6);
	margin-bottom: var(--rr-space-5);
	break-inside: avoid;
	page-break-inside: avoid;
}

.rr-cost__lead {
	margin: 0 0 var(--rr-space-2);
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.rr-cost__n {
	margin: 0 0 var(--rr-space-3);
	font-size: 17px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
	max-width: 60ch;
}

.rr-cost__n strong {
	display: block;
	font-family: var(--rr-font-mono);
	font-size: 46px;
	line-height: 1.1;
	color: #fff;
}

/* La clase base es inline-block; con dos párrafos seguidos se pisaban. */
.rr-cost .rr-ref {
	display: block;
	color: rgba(255, 255, 255, 0.62);
	margin: 0 0 var(--rr-space-2);
	max-width: 78ch;
}

.rr-cost .rr-ref:last-child {
	margin-bottom: 0;
}

.rr-cone__kpi--cost strong {
	color: var(--rr-brand);
}

/* Aviso de análisis corrido con un motor anterior. Solo lo ve el coach. */
.rr-stale {
	border: 1px solid #d6a300;
	border-left: 5px solid #d6a300;
	background: #d6a3000f;
	border-radius: var(--rr-radius-lg);
	padding: var(--rr-space-4) var(--rr-space-5);
	margin-bottom: var(--rr-space-5);
	font-size: 15px;
	line-height: 1.6;
}

@media print {

	.rr-stale {
		display: none;
	}
}

/* --- El resumen de la primera página -------------------------------------
   El informe tiene trece secciones y hay gente que lo lee parada al lado del
   cajón de bolas. Esto es lo que se lleva quien no llega a leer las trece. */

.rr-brief {
	border: 1px solid var(--rr-border);
	border-top: 4px solid var(--rr-brand);
	border-radius: var(--rr-radius-lg);
	padding: var(--rr-space-6);
	margin-bottom: var(--rr-space-6);
	background: var(--rr-surface);
	break-inside: avoid;
	page-break-inside: avoid;
}

.rr-brief__lead {
	margin: 0 0 var(--rr-space-4);
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rr-text-3);
}

.rr-brief__row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: var(--rr-space-4);
	padding: var(--rr-space-3) 0;
	border-top: 1px solid var(--rr-border);
	align-items: baseline;
}

.rr-brief__row:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.rr-brief__k {
	font-size: 14px;
	color: var(--rr-text-3);
}

.rr-brief__v {
	font-size: 17px;
	line-height: 1.5;
	color: var(--rr-ink);
	max-width: 66ch;
}

.rr-brief__v .rr-ref {
	display: block;
	margin-top: 2px;
}

@media (max-width: 700px) {

	.rr-brief__row {
		grid-template-columns: 1fr;
		gap: var(--rr-space-1);
	}
}

/* --- Deriva dentro de la sesión ------------------------------------------
   Un aviso sobre cómo leer el resto, no un hallazgo. Por eso es sobrio y no
   lleva el rojo de la marca: no es algo que el jugador tenga que corregir. */

.rr-drift {
	border: 1px solid var(--rr-border);
	border-left: 5px solid var(--rr-text-3);
	border-radius: var(--rr-radius-lg);
	padding: var(--rr-space-5);
	margin-bottom: var(--rr-space-4);
	break-inside: avoid;
	page-break-inside: avoid;
}

.rr-drift__head {
	display: flex;
	align-items: baseline;
	gap: var(--rr-space-3);
	margin-bottom: var(--rr-space-3);
	padding-bottom: var(--rr-space-2);
	border-bottom: 1px solid var(--rr-border);
}

.rr-drift__club {
	font-family: var(--rr-font-mono);
	font-size: 20px;
	font-weight: 700;
	color: var(--rr-ink);
}

.rr-drift__row {
	display: grid;
	/* La columna del medio lleva "188,6 → 182,3 yd" sin partirse. */
	grid-template-columns: minmax(0, 1fr) 200px 80px;
	gap: var(--rr-space-3);
	align-items: baseline;
	padding: var(--rr-space-2) 0;
	font-size: 16px;
}

.rr-drift__row + .rr-drift__row {
	border-top: 1px solid var(--rr-border);
}

.rr-drift__v {
	color: var(--rr-text-2);
	white-space: nowrap;
	text-align: right;
}

.rr-drift__d {
	text-align: right;
	font-weight: 700;
	color: var(--rr-ink);
}

@media (max-width: 700px) {

	.rr-drift__row {
		grid-template-columns: 1fr auto;
	}

	.rr-drift__d {
		grid-column: 2;
	}
}

/* El salto que solo aparece con la distancia confiable: es el dato más útil
   de la tabla del bolso y el que nadie mira. */
.rr-bag__hidden {
	background: #8E18130f;
	border-left: 4px solid var(--rr-brand);
	border-radius: var(--rr-radius-lg);
	padding: var(--rr-space-4) var(--rr-space-5);
	margin: var(--rr-space-3) 0;
	font-size: 16px;
	line-height: 1.55;
	max-width: 78ch;
	break-inside: avoid;
}

/* La referencia de tour, al lado del escalón: contexto, no meta para el martes. */
.rr-kpi__far {
	color: var(--rr-text-3);
}

/* --- El arco con el bolso entero ------------------------------------------
   Va debajo de las láminas del protocolo, no al lado: son dos lecturas del
   mismo swing y se muestran las dos. En gris, porque la que manda sigue
   siendo la de arriba. */

.rr-bagarc {
	border: 1px solid var(--rr-border);
	border-left: 5px solid var(--rr-text-3);
	border-radius: var(--rr-radius-lg);
	padding: var(--rr-space-5);
	margin-bottom: var(--rr-space-4);
	break-inside: avoid;
	page-break-inside: avoid;
}

.rr-bagarc__head {
	display: flex;
	align-items: baseline;
	gap: var(--rr-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--rr-space-3);
	padding-bottom: var(--rr-space-2);
	border-bottom: 1px solid var(--rr-border);
}

.rr-bagarc__name {
	font-size: 19px;
	font-weight: 700;
	color: var(--rr-ink);
}

.rr-bagarc p {
	max-width: 74ch;
}

.rr-bagarc__break,
.rr-bagarc__outlier {
	border-left: 4px solid var(--rr-brand);
	background: #8E18130a;
	border-radius: var(--rr-radius-lg);
	padding: var(--rr-space-3) var(--rr-space-4);
	margin: var(--rr-space-3) 0;
}

.rr-bagarc__outlier {
	border-left-color: var(--rr-text-3);
	background: #00000006;
}

.rr-bagarc td,
.rr-bagarc th {
	text-align: center;
}

/* Explicación larga y links de una combinación de arco. */
.rr-flightbody {
	max-width: 74ch;
	margin: var(--rr-space-3) 0;
}

.rr-flightbody p { margin: 0 0 var(--rr-space-2); }
.rr-flightbody ul,
.rr-flightbody ol { margin: 0 0 var(--rr-space-2) var(--rr-space-6); }

.rr-arclinks {
	border-left: 4px solid var(--rr-brand);
	background: #8E18130a;
	border-radius: var(--rr-radius-lg);
	padding: var(--rr-space-4) var(--rr-space-5);
	margin: var(--rr-space-3) 0;
	max-width: 74ch;
	break-inside: avoid;
}

.rr-arclinks__lead {
	margin: 0 0 var(--rr-space-2);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rr-text-3);
}

.rr-arclinks ul {
	margin: 0;
	padding-left: var(--rr-space-5);
}

.rr-arclinks li {
	margin-bottom: var(--rr-space-2);
	font-size: 16px;
}

.rr-arclinks li:last-child { margin-bottom: 0; }

/* Checkboxes de la biblioteca en la pantalla de arcos. */

/* Aviso de referencia derivada. No es un error ni una advertencia: es una
   aclaración sobre en qué se apoya el número de arriba. */
.rr-derived {
	font-size: 15px;
	line-height: 1.6;
	color: var(--rr-text-2);
	border-left: 3px solid var(--rr-text-3);
	padding: var(--rr-space-2) var(--rr-space-4);
	margin: var(--rr-space-3) 0 0;
	max-width: 78ch;
}

/* --- Qué mide este archivo -----------------------------------------------
   Va arriba de todo. NO es un error ni una advertencia: es el alcance de la
   sesión, dicho antes de que el lector empiece a preguntarse por qué faltan
   cosas. Por eso va en gris y no en rojo. */

.rr-coverage {
	border: 1px solid var(--rr-border);
	border-left: 5px solid var(--rr-text-3);
	border-radius: var(--rr-radius-lg);
	background: var(--rr-surface);
	padding: var(--rr-space-4) var(--rr-space-5);
	margin-bottom: var(--rr-space-5);
	max-width: 78ch;
	break-inside: avoid;
	page-break-inside: avoid;
}

.rr-coverage p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

.rr-coverage p + p {
	margin-top: var(--rr-space-2);
	display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA DE DISEÑO DEL INFORME — v0.45
   ═══════════════════════════════════════════════════════════════════════════

   Va al final a propósito: es la última en cargar y por lo tanto la que gana.
   Toda scopeada a .rr-app--report, así que el panel del coach y las otras
   labs no se enteran.

   QUÉ SE MIDIÓ ANTES DE TOCAR NADA, con Chromium sobre el informe real:
   · el texto explicativo ocupaba 601 px dentro de un contenedor de 1100, en
     15 px, pegado a la izquierda: una columna angosta al lado de medio metro
     de blanco;
   · las secciones tenían margin-top 0 — nada las separaba salvo un título;
   · los bordes izquierdos no coincidían (150 el bloque, 187 el título), así
     que nada estaba alineado con nada;
   · los gráficos arrancaban a la izquierda de su tarjeta en vez de estar
     centrados.

   La idea de fondo: cada sección es una TARJETA con aire propio, todo adentro
   comparte el mismo borde izquierdo, y los gráficos van centrados. El texto
   sigue teniendo medida de lectura, pero ahora respira. */

/* --- 1. El lienzo -------------------------------------------------------- */

.rr-app--report {
	--rr-pad: 40px;      /* Aire interno de cada tarjeta. */
	--rr-gap: 44px;      /* Separación entre secciones. */

	max-width: 1120px;
	font-size: 18px;
	line-height: 1.7;
	color: var(--rr-ink);
}

/* --- 2. Cada sección, una tarjeta ---------------------------------------
   Antes las secciones se tocaban y el único límite era el título. Un informe
   de trece secciones necesita que se vea dónde termina una y empieza otra
   sin tener que leer. */

.rr-app--report .rr-section {
	background: #fff;
	border: 1px solid var(--rr-border);
	border-radius: 14px;
	padding: var(--rr-pad);
	margin: 0 0 var(--rr-gap);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* El título arranca en el mismo borde que todo lo demás de la tarjeta. */
.rr-app--report .rr-section > h2:first-child {
	margin-top: 0;
}

.rr-app--report h2 {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.25;
	color: var(--rr-ink);
	margin: 0 0 var(--rr-pad);
	padding: 0 0 var(--rr-space-4);
	border-bottom: 3px solid var(--rr-brand);
	/* El subrayado va del ancho del texto, no de la tarjeta: marca el
	   título, no divide la sección en dos. */
	display: table;
	max-width: 100%;
}

.rr-app--report h3 {
	font-size: 21px;
	font-weight: 700;
	margin: var(--rr-space-6) 0 var(--rr-space-3);
}

/* --- 3. El texto explicativo, que era el peor problema -------------------
   Estaba en 15 px y gris claro. Es JUSTO lo que el jugador tiene que leer
   para entender cada gráfico, así que ahora es texto de verdad: 17 px, buen
   interlineado y contraste suficiente para leerlo impreso. */

.rr-app--report .rr-ref {
	font-size: 17px;
	line-height: 1.7;
	color: var(--rr-text-2);
	max-width: 76ch;
	margin: var(--rr-space-4) 0 0;
	display: block;
}

.rr-app--report > p,
.rr-app--report .rr-section > p,
.rr-app--report .rr-adn p {
	font-size: 18px;
	line-height: 1.7;
	max-width: 76ch;
	margin: 0 0 var(--rr-space-4);
}

.rr-app--report .rr-section > p:last-child {
	margin-bottom: 0;
}

/* --- 4. Gráficos centrados ----------------------------------------------
   Un gráfico de 360 px pegado al borde izquierdo de una tarjeta de 1040
   parece un error de maquetado. Van al medio, con su pie debajo y también
   centrado como bloque. */

.rr-app--report .rr-charts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--rr-gap);
	margin: var(--rr-space-6) 0;
}

.rr-app--report .rr-chart-block {
	flex: 0 1 420px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.rr-app--report .rr-chart {
	max-width: 100%;
	width: 420px;
	margin: 0 auto;
	padding: var(--rr-space-4);
}

.rr-app--report .rr-chart-block .rr-ref,
.rr-app--report .rr-chart-block p {
	text-align: left;
	max-width: 46ch;
	margin-left: auto;
	margin-right: auto;
}

/* Las láminas de arco: a ancho completo de la tarjeta y centradas. */
.rr-app--report .rr-plate {
	display: block;
	width: 100%;
	max-width: 940px;
	margin: 0 auto var(--rr-space-5);
}

.rr-app--report .rr-legend {
	justify-content: center;
	margin-bottom: var(--rr-space-5);
}

/* --- 5. Tablas ----------------------------------------------------------- */

.rr-app--report .rr-table {
	margin: var(--rr-space-5) 0;
}

.rr-app--report .rr-table > thead > tr > th {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rr-text-3);
	padding-bottom: var(--rr-space-3);
	border-bottom: 2px solid var(--rr-border);
	vertical-align: bottom;
}

.rr-app--report .rr-table > tbody > tr > td,
.rr-app--report .rr-table > tbody > tr > th {
	font-size: 17px;
	padding-top: var(--rr-space-4);
	padding-bottom: var(--rr-space-4);
	vertical-align: middle;
}

/* --- 6. El encabezado y las tarjetas de arriba --------------------------- */

.rr-app--report .rr-report__head {
	padding-bottom: var(--rr-space-6);
	margin-bottom: var(--rr-gap);
	border-bottom: 1px solid var(--rr-border);
}

.rr-app--report .rr-kpis {
	gap: var(--rr-space-4);
	margin-bottom: var(--rr-gap);
}

/* --- 7. Los bloques con aviso, alineados a la tarjeta -------------------
   El de cobertura salía con un ancho distinto al de todo lo demás y parecía
   suelto en la página. Todos comparten ahora el mismo ancho y el mismo aire. */

.rr-app--report .rr-coverage,
.rr-app--report .rr-brief,
.rr-app--report .rr-adn,
.rr-app--report .rr-note,
.rr-app--report .rr-stale {
	max-width: none;
	margin-bottom: var(--rr-gap);
	padding: var(--rr-pad);
	border-radius: 14px;
}

.rr-app--report .rr-coverage p {
	max-width: 76ch;
}

/* --- 8. Prioridades y fortalezas ---------------------------------------- */

.rr-app--report .rr-priority {
	padding: var(--rr-pad);
	border-radius: 14px;
	margin-bottom: var(--rr-space-6);
}

.rr-app--report .rr-priority h3 {
	margin-top: 0;
}

.rr-app--report .rr-strengths {
	padding: var(--rr-pad);
	border-radius: 14px;
}

.rr-app--report .rr-strengths li {
	font-size: 18px;
	line-height: 1.7;
	margin-bottom: var(--rr-space-3);
}

/* --- 9. Impreso ---------------------------------------------------------
   En papel el ancho vuelve a la hoja y las tarjetas pierden sombra y borde
   redondeado, que en impresión solo ensucian. Pero se conserva la
   SEPARACIÓN: es lo que hace que el PDF se lea igual de ordenado. */

@media print {

	.rr-app--report {
		--rr-pad: 0;
		--rr-gap: 26px;

		max-width: 190mm;
		font-size: 10.5pt;
		line-height: 1.55;
	}

	.rr-app--report .rr-section {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
		margin-bottom: var(--rr-gap);
	}

	.rr-app--report .rr-section + .rr-section {
		padding-top: var(--rr-space-4);
		border-top: 1px solid var(--rr-border);
	}

	.rr-app--report h2 {
		font-size: 15pt;
		margin-bottom: var(--rr-space-4);
		border-bottom-width: 2px;
	}

	.rr-app--report h3 { font-size: 12pt; }

	.rr-app--report .rr-ref,
	.rr-app--report .rr-section > p,
	.rr-app--report > p {
		font-size: 9.5pt;
		line-height: 1.5;
		max-width: none;
	}

	.rr-app--report .rr-table > tbody > tr > td,
	.rr-app--report .rr-table > tbody > tr > th { font-size: 9.5pt; }

	.rr-app--report .rr-coverage,
	.rr-app--report .rr-brief,
	.rr-app--report .rr-adn,
	.rr-app--report .rr-priority,
	.rr-app--report .rr-strengths {
		padding: var(--rr-space-4);
		border-radius: 0;
	}

	.rr-app--report .rr-plate { max-width: none; }
	.rr-app--report .rr-chart { width: 100%; }
}

/* --- 10. Detalles que solo aparecen al renderizar ------------------------ */

/* "TRANSFERENCIA" salía partido como "TRANSFERENCI / A". Un encabezado de
   tabla se parte entre PALABRAS o no se parte: nunca a mitad de palabra. */
.rr-app--report .rr-table th,
.rr-app--report .rr-table td {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/* Las láminas ya viven dentro de una tarjeta, así que su marco propio
   duplicaba el borde. Adentro de la sección van sin caja. */
.rr-app--report .rr-plates > .rr-plate,
.rr-app--report .rr-plates > figure {
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* Las tarjetas de arriba: el número grande y el rótulo legible. Los
   contadores por palo se veían como notas al pie de algo. */
.rr-app--report .rr-card__value { font-size: 34px; line-height: 1.1; }
.rr-app--report .rr-card__label { font-size: 13px; letter-spacing: 0.1em; }
.rr-app--report .rr-card { padding: var(--rr-space-5); }

/* El pie del análisis, separado del último bloque. */
.rr-app--report .rr-meta {
	margin-top: var(--rr-gap);
	padding-top: var(--rr-space-5);
	border-top: 1px solid var(--rr-border);
	font-size: 15px;
	color: var(--rr-text-3);
}

/* --- 11. Reglas de impresión que solo se ven imprimiendo ----------------- */

@media print {

	/*
	 * Un título nunca puede quedar solo al pie de una hoja. Pasaba con
	 * "Clasificación": el h2 cerraba la página y la tabla arrancaba en la
	 * siguiente, así que el lector daba vuelta la hoja para saber qué estaba
	 * leyendo.
	 */
	.rr-app--report h2,
	.rr-app--report h3 {
		break-after: avoid;
		page-break-after: avoid;
	}

	/* Una fila de tabla tampoco se parte al medio. */
	.rr-app--report tr,
	.rr-app--report .rr-plate,
	.rr-app--report .rr-priority,
	.rr-app--report .rr-cone,
	.rr-app--report .rr-drift,
	.rr-app--report .rr-bagarc {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* El encabezado de una tabla larga se repite en cada hoja. */
	.rr-app--report thead { display: table-header-group; }

	/*
	 * "CALIDAD DE DATOS" se desbordaba de su tarjeta negra: el rótulo es más
	 * largo que el de al lado y en papel la tarjeta se achica. Se le da aire
	 * y se deja que el texto baje de renglón adentro.
	 */
	.rr-app--report .rr-card {
		padding: var(--rr-space-3);
		min-height: 0;
	}

	.rr-app--report .rr-card__value { font-size: 20pt; }

	.rr-app--report .rr-card__label {
		font-size: 6.5pt;
		line-height: 1.25;
		letter-spacing: 0.06em;
		word-break: normal;
	}
}

/* Un número con su unidad no se parte: "0,90" arriba y "°" abajo se lee
   como si el grado fuera otra cosa. */
.rr-app--report .rr-mono,
.rr-app--report .rr-brief__v .rr-mono,
.rr-app--report .rr-cone__kpi strong {
	white-space: nowrap;
}

/* ── Pestañas del shortcode único ─────────────────────────────────────────
   La navegación es por enlace y no por JavaScript: cada sección tiene su
   propia dirección, se puede compartir, y el botón de atrás funciona. */

.rr-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 2px solid var(--rr-border);
	margin-bottom: var(--rr-space-6);
}

.rr-tabs__link {
	padding: 12px 20px;
	font-size: 16px;
	font-weight: 600;
	color: var(--rr-text-2);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	white-space: nowrap;
}

.rr-tabs__link:hover { color: var(--rr-ink); }

.rr-tabs__link.is-current {
	color: var(--rr-brand);
	border-bottom-color: var(--rr-brand);
}

/* En el teléfono las pestañas se deslizan en vez de apilarse en cinco
   renglones y empujar el contenido fuera de la pantalla. */
@media (max-width: 620px) {

	.rr-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.rr-tabs__link { padding: 10px 14px; font-size: 15px; }
}

@media print {
	.rr-tabs { display: none; }
}

/* ── Panel del coach ──────────────────────────────────────────────────── */

.rr-coach__search {
	display: flex;
	gap: 8px;
	margin-bottom: var(--rr-space-5);
}

.rr-coach__grid {
	display: grid;
	/* 260 y no 240: con el nombre y dos líneas de texto, más angosto queda
	   apretado y el nombre largo se parte. */
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
	margin-bottom: var(--rr-space-6);
}

.rr-coach__card {
	border: 1px solid var(--rr-border);
	border-left: 4px solid var(--rr-brand);
	border-radius: var(--rr-radius-lg);
	/*
	 * Aire de verdad. Con el padding chico el nombre quedaba pegado al borde
	 * izquierdo rojo y la última línea al borde de abajo: la tarjeta parecía
	 * cortada en vez de terminada.
	 */
	padding: 22px 24px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rr-coach__card h3 {
	margin: 0 0 4px;
	font-size: 19px;
	line-height: 1.3;
}

.rr-coach__meta {
	font-size: 15px;
	color: var(--rr-text-3);
	margin: 0;
	line-height: 1.5;
}

.rr-coach__link {
	display: inline-block;
	margin-top: 6px;
	font-weight: 600;
	color: var(--rr-brand);
	text-decoration: none;
}

.rr-coach__link:hover { text-decoration: underline; }

.rr-coach__search input[type="search"] { min-width: 240px; }

.rr-coach__note {
	margin-top: var(--rr-space-6);
	font-size: 15px;
	color: var(--rr-text-3);
	max-width: 74ch;
}