/* Radar Reader — front.
   Derivado íntegramente de rr-tokens.css: ni un hex suelto. */

.rr-app {
	color: var(--rr-ink);
	font-family: var(--rr-font);
	max-width: var(--rr-maxw);
	margin-inline: auto;
}

/* OJO CON EL ORDEN: app.css se encola DESPUES de analysis.css, asi que estas
   tres reglas genericas —con la misma especificidad que las del informe— le
   ganaban a la capa del informe y le imponian su ancho de prosa y sus tamanos
   de titulo. Sintoma: el texto del informe en una columna angosta y los
   graficos apilados en vez de lado a lado. Por eso se excluye explicitamente
   `.rr-app--report`, que trae los suyos. */
.rr-app:not(.rr-app--report) h2 {
	color: var(--rr-ink);
	font-size: var(--rr-size-xl);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 var(--rr-space-2);
}

.rr-app:not(.rr-app--report) h3 {
	font-size: var(--rr-size-lg);
	font-weight: 600;
	margin: 0 0 var(--rr-space-3);
}

.rr-app:not(.rr-app--report) p {
	color: var(--rr-text-2);
	line-height: 1.6;
	max-width: 62ch;
}

/* --- Estados vacíos.
   No son un error: son una invitación a hacer algo. Cada uno dice qué
   falta y cuál es el próximo paso. --- */

.rr-empty {
	background: var(--rr-surface);
	border: 1px solid var(--rr-border);
	border-radius: var(--rr-radius);
	padding: var(--rr-space-8) var(--rr-space-6);
	text-align: center;
}

.rr-empty p {
	margin-inline: auto;
}

.rr-btn {
	display: inline-block;
	margin-top: var(--rr-space-4);
	padding: var(--rr-space-2) var(--rr-space-4);
	background: var(--rr-brand);
	color: var(--rr-on-brand);
	border-radius: var(--rr-radius);
	text-decoration: none;
	font-weight: 500;
	transition: background 0.15s ease;
}

.rr-btn:hover,
.rr-btn:focus {
	background: var(--rr-brand-hover);
	color: var(--rr-on-brand);
}

/* --- Tarjeta del protocolo --- */

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

.rr-protocol__t {
	width: auto;
	min-width: 220px;
	border-collapse: collapse;
	margin-bottom: var(--rr-space-4);
}

.rr-protocol__t th {
	text-align: left;
	font-size: var(--rr-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rr-text-3);
	font-weight: 500;
	padding: var(--rr-space-1) var(--rr-space-4) var(--rr-space-2) 0;
	border-bottom: 1px solid var(--rr-border);
}

.rr-protocol__t td {
	padding: var(--rr-space-2) var(--rr-space-4) var(--rr-space-2) 0;
	border-bottom: 1px solid var(--rr-border);
}

/* El color del chip codifica la longitud del palo, no decora. */
.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-note {
	font-size: var(--rr-size-sm);
	color: var(--rr-text-2);
	margin: 0;
}

/* --- Tablas y listas ---
   Base de las tablas del front. Las del informe además llevan
   .rr-table--fixed, que vive en analysis.css porque se comparte con el panel
   del coach. */

.rr-app .rr-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--rr-surface);
	border: 1px solid var(--rr-border);
}

.rr-app .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;
	padding: var(--rr-space-3) var(--rr-space-4);
	border-bottom: 1px solid var(--rr-border);
}

.rr-app .rr-table td {
	padding: var(--rr-space-3) var(--rr-space-4);
}

.rr-dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--rr-space-2) var(--rr-space-6);
	margin: 0 0 var(--rr-space-6);
}

.rr-dl dt {
	font-size: var(--rr-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rr-text-3);
	align-self: center;
}

.rr-dl dd {
	margin: 0;
	color: var(--rr-ink);
}

@media (max-width: 600px) {
	.rr-empty { padding: var(--rr-space-6) var(--rr-space-4); }
	.rr-dl { grid-template-columns: 1fr; gap: 0 0; }
	.rr-dl dd { margin-bottom: var(--rr-space-3); }
}

/* --- Barra de la pantalla: título a la izquierda, acción a la derecha.
   No se imprime: en el papel el botón de imprimir no tiene sentido. --- */

.rr-app__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rr-space-3);
	margin-bottom: var(--rr-space-4);
}

.rr-app__bar h2 { margin: 0; }

button.rr-btn {
	border: 1px solid var(--rr-brand);
	cursor: pointer;
	font: inherit;
}

/* --- Encabezado del informe impreso --- */

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

.rr-report__head h1 { margin: 0 0 var(--rr-space-1); }
.rr-report__head .rr-meta { margin-top: 0; }

/* --- Selector de sesiones a comparar --- */

.rr-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rr-space-3);
	margin: var(--rr-space-4) 0;
}

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


/* --------------------------------------------------------------------------
   CELULAR (0.49.1)
   El resto de las tablas del informe van dentro de .rr-scroll, que ya se
   desliza sola. Esta es la unica que se arma suelta (Shortcodes.php), asi que
   en pantalla chica estiraba la pagina entera en vez de deslizarse.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.rr-protocol { max-width: 100%; min-width: 0; }
	.rr-protocol__t {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}
}


/* --------------------------------------------------------------------------
   IMPORTAR EN EL SITIO (0.52.0)
   La pantalla es la del panel, asi que trae marcado de wp-admin: .notice,
   .widefat, .form-table, .description. En el escritorio eso lo estila
   WordPress; aca no existe nada de eso y quedaria texto pelado. Es la capa
   minima para que se lea bien, no un rediseno.
   -------------------------------------------------------------------------- */
.rr-import { max-width: 100%; }
.rr-import h1 { font-size: 1.6em; margin: 0 0 var(--rr-space-3); }
.rr-import h2 { margin-top: var(--rr-space-5); }
.rr-import form { margin-bottom: var(--rr-space-4); }
.rr-import input[type="file"],
.rr-import input[type="url"],
.rr-import input[type="text"],
.rr-import input[type="date"],
.rr-import select {
	padding: 8px 10px;
	border: 1px solid var(--rr-line);
	border-radius: 6px;
	max-width: 100%;
}
.rr-import .large-text { width: 100%; }
.rr-import .description { color: var(--rr-muted); font-size: .92em; margin-top: 6px; }

.rr-btn {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--rr-line);
	border-radius: 6px;
	background: #fff;
	color: var(--rr-ink);
	cursor: pointer;
	font: inherit;
}
.rr-btn--primary {
	background: var(--rr-brand, #8E1813);
	border-color: var(--rr-brand, #8E1813);
	color: #fff;
}
.rr-btn:hover { filter: brightness(1.06); }

/* Los avisos: mismo significado que en el escritorio, con el color a la izquierda. */
.rr-import .notice {
	background: #fff;
	border: 1px solid var(--rr-line);
	border-left: 4px solid #72aee6;
	border-radius: 4px;
	padding: 10px 14px;
	margin: var(--rr-space-3) 0;
}
.rr-import .notice-success { border-left-color: #1f7a3a; }
.rr-import .notice-warning { border-left-color: #dba617; }
.rr-import .notice-error   { border-left-color: #8E1813; }

.rr-import .widefat,
.rr-import .form-table { width: 100%; border-collapse: collapse; }
.rr-import .widefat th,
.rr-import .widefat td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--rr-line);
	text-align: left;
	vertical-align: top;
}
.rr-import .form-table th { text-align: left; padding: 8px 10px 8px 0; width: 200px; }
.rr-import .form-table td { padding: 8px 0; }

/* La tabla de la muestra de golpes es ancha: que se deslice sola. */
@media (max-width: 640px) {
	.rr-import .widefat { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.rr-import .form-table th { display: block; width: auto; }
}


/* Gestion de alumnos y sesiones en el sitio (0.54.0). Comparten el envoltorio
   .rr-import, que ya normaliza el marcado de wp-admin. Esto es lo poco que
   faltaba. */
.rr-import .page-title-action {
	display: inline-block;
	margin-left: 10px;
	padding: 6px 14px;
	border: 1px solid var(--rr-line);
	border-radius: 6px;
	text-decoration: none;
	font-size: .9em;
}
.rr-import .rr-filters { margin: var(--rr-space-3) 0; display: flex; gap: 8px; align-items: center; }
.rr-import .rr-filters p { margin: 0; }
.rr-import .rr-empty-admin {
	background: #fff;
	border: 1px dashed var(--rr-line);
	border-radius: 8px;
	padding: var(--rr-space-4);
	text-align: center;
	color: var(--rr-muted);
}
.rr-import .wp-heading-inline { display: inline-block; }


/* --------------------------------------------------------------------------
   RESPIRO EN LAS PANTALLAS DE GESTION (0.55.0)
   [stated] Maxi: "esta desprolijo el diseno frontend, dejaria espacios entre
   campos y las celdas de la columna en compartir".
   El marcado viene de wp-admin, donde .form-table trae su propio espaciado
   desde la hoja del escritorio. En el sitio esa hoja no existe, asi que las
   filas quedaban pegadas y los botones encimados.
   -------------------------------------------------------------------------- */

/* Tablas de formulario: aire vertical y una linea que separe cada campo. */
.rr-import .form-table { border-collapse: separate; border-spacing: 0; }
.rr-import .form-table > tbody > tr > th,
.rr-import .form-table > tbody > tr > td,
.rr-import .form-table > tr > th,
.rr-import .form-table > tr > td {
	padding: 16px 18px 16px 0;
	border-bottom: 1px solid var(--rr-line);
	vertical-align: top;
}
.rr-import .form-table > tbody > tr:last-child > th,
.rr-import .form-table > tbody > tr:last-child > td { border-bottom: 0; }
.rr-import .form-table th { width: 190px; font-weight: 600; }

/* Los campos, con su propio alto y sin pegarse a la etiqueta de ayuda. */
.rr-import .form-table input[type="text"],
.rr-import .form-table input[type="email"],
.rr-import .form-table input[type="url"],
.rr-import .form-table input[type="number"],
.rr-import .form-table input[type="date"],
.rr-import .form-table select,
.rr-import .form-table textarea { margin-bottom: 6px; }
.rr-import textarea { width: 100%; min-height: 110px; padding: 10px 12px; }
.rr-import .description { margin: 6px 0 0; }
.rr-import label { display: inline-block; margin-bottom: 4px; }

/* Compartir el informe: el link es un input de solo lectura, no un bloque.
   Se le da aire y aspecto de caja para que se vea que es para copiar. */
.rr-import input.code,
.rr-import input.large-text {
	width: 100%;
	padding: 12px 14px;
	background: #f7f7f7;
	border: 1px solid var(--rr-line);
	border-radius: 6px;
}
.rr-import input[readonly] { cursor: text; }

/* Botones: que no se encimen ni se peguen entre si. */
.rr-import .rr-btn,
.rr-import .button,
.rr-import .page-title-action { margin: 0 10px 10px 0; }
.rr-import p > .rr-btn:last-child { margin-right: 0; }

/* Un titulo de seccion tiene que separarse de lo de arriba. */
.rr-import h2 { margin-top: var(--rr-space-5); padding-top: var(--rr-space-2); }
.rr-import h2:first-child { margin-top: 0; padding-top: 0; }

@media (max-width: 640px) {
	.rr-import .form-table th,
	.rr-import .form-table td { display: block; width: auto; padding: 10px 0; }
	.rr-import .form-table th { border-bottom: 0; padding-bottom: 2px; }
}


/* --------------------------------------------------------------------------
   BOTONERA Y HOJA IMPRESA (0.56.0)
   Los tres botones de la sesion se encimaban: son enlaces con mucho padding
   dentro de un parrafo, y el interlineado del tema no alcanza para su alto.
   Con flex el problema desaparece y se acomodan solos en cualquier ancho.
   -------------------------------------------------------------------------- */
.rr-import .rr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	line-height: 1.2;
	margin: var(--rr-space-3) 0 var(--rr-space-4);
}
.rr-import .rr-actions > * { margin: 0; }

/* Bloques que solo existen en el papel: la marca del informe impreso. */
.rr-printonly { display: none; }

@media print {
	.rr-printonly { display: block; }
	.rr-noprint { display: none !important; }
	.rr-import .rr-actions { display: none !important; }
}


/* ==========================================================================
   CAPA "APP" — el lenguaje visual de la app que ya tenia Hernan (0.57.0)

   [stated] A Maxi le gusto el estilo de hrgaonline.app y pidio copiarlo.
   Decidio: se copia el lenguaje de TARJETAS; el FONDO lo sigue poniendo el
   sitio y la TIPOGRAFIA se sigue heredando. Por eso aca no hay ni background
   de pagina ni font-family.

   Valores sacados del HTML de la app, no estimados de una captura:
     texto #2A3547 y secundario #5A6A85 (mas suaves que el negro de antes)
     esquinas de 16px en las tarjetas y 8px en controles
     sombra en GRIS AZULADO, no en negro: es la mitad del efecto
     32px de aire entre bloques

   Va al final del archivo para pisar lo anterior sin tocarlo: se borra este
   bloque y todo vuelve como estaba.
   ========================================================================== */
.rr-app, .rr-import {
  --rr-app-radius:   16px;
  --rr-app-radius-s: 8px;
  --rr-app-ink:      #2A3547;
  --rr-app-ink-2:    #5A6A85;
  --rr-app-line:     #EEF2F6;
  --rr-app-shadow:   rgba(145, 158, 171, .30) 0 0 2px 0,
                      rgba(145, 158, 171, .12) 0 12px 24px -4px;
  --rr-app-gap:      32px;
}

.rr-app .rr-card,
.rr-app .rr-panel,
.rr-app .rr-note-card,
.rr-app .rr-coach__card,
.rr-import .rr-empty-admin {
  border-radius: var(--rr-app-radius);
  border: 1px solid var(--rr-app-line);
  box-shadow: var(--rr-app-shadow);
  background: #fff;
}

.rr-app, .rr-import {
  color: var(--rr-app-ink);
}

.rr-app .rr-btn,
.rr-app .button,
.rr-import input,
.rr-import select,
.rr-import textarea {
  border-radius: var(--rr-app-radius-s);
}


/* ==========================================================================
   ARREGLO DE LA CAPA APP EN LAS PANTALLAS DE GESTION (0.57.1)

   [stated] Maxi: "fiero eh". Tenia razon y el error fue mio: en 0.57.0 le puse
   borde, sombra y esquinas a los bloques PERO NO RELLENO. Una tarjeta sin
   padding no es una tarjeta: el titulo queda montado sobre el borde y el
   contenido pegado a los costados. Ademas la tabla de compartir arrastraba
   las lineas divisorias de 0.55.0, que dentro de una tarjeta sobran.
   ========================================================================== */

/* Los bloques del detalle SI son tarjetas: `.rr-panel` los envuelve. */
.rr-import .rr-panel {
	padding: 24px 26px;
	margin-bottom: var(--rr-app-gap, 32px);
}

/* El titulo va ADENTRO y no tiene que empujar el borde de arriba. */
.rr-import .rr-panel > h2:first-child,
.rr-import .rr-panel > h3:first-child {
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 14px;
}

/* El ultimo elemento no deja hueco muerto abajo. */
.rr-import .rr-panel > *:last-child { margin-bottom: 0; }

/* Dentro de una tarjeta las lineas por fila sobran: ya separa el aire. */
.rr-import .rr-panel .form-table > tbody > tr > th,
.rr-import .rr-panel .form-table > tbody > tr > td,
.rr-import .rr-panel .form-table > tr > th,
.rr-import .rr-panel .form-table > tr > td {
	border-bottom: 0;
	padding: 10px 16px 10px 0;
}

/* La columna de etiquetas no necesita 190px cuando dice "Enviar a". */
.rr-import .rr-panel .form-table th { width: 130px; }

/* La botonera: que entre en un renglon y no parezca tres bloques sueltos. */
.rr-import .rr-actions .rr-btn,
.rr-import .rr-actions .button {
	padding: 9px 16px;
	font-size: .9em;
	white-space: nowrap;
}

/* El estado vacio no es una tarjeta: es un aviso. Sin sombra. */
.rr-import .rr-empty-admin {
	box-shadow: none;
	background: #fbfcfd;
	border-style: dashed;
}


/* El informe embebido dentro de la pantalla del coach (0.57.2).
   Se envuelve en .rr-app--report para que reciba su capa de diseno; aca solo
   se evita que herede el ancho y el padding del envoltorio de gestion. */
.rr-import .rr-app--report {
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin-top: var(--rr-app-gap, 32px);
}


/* ==========================================================================
   REVISION DE DISENO (0.58.0)

   Contexto: la mitad de los problemas que se veian NO eran de diseno sino
   declaraciones muertas. `--rr-space-5` se usaba en 20 lugares y no existia,
   y una variable inexistente hace que el navegador tire la declaracion
   ENTERA en silencio: por eso habia tarjetas del informe SIN relleno, con el
   texto tocando el borde. Eso se arreglo en los tokens. Lo de aca abajo es lo
   que si es diseno.
   ========================================================================== */

/* --- El menu, en un solo renglon ---------------------------------------
   Con ocho secciones se partia en dos filas y la ultima quedaba sola abajo.
   Las etiquetas se acortaron, y ademas se prohibe el corte: si algun dia no
   entran, se deslizan en vez de apilarse. */
.rr-tabs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	gap: 2px;
}
.rr-tabs__link {
	white-space: nowrap;
	flex: 0 0 auto;
}

/* --- El texto usa el ancho de la tarjeta --------------------------------
   [stated] Maxi: "no entiendo por que lo cortas". La medida de lectura de
   72-76ch se definio cuando el informe media 190mm; con el lienzo actual de
   1120px sobraba media pantalla a la derecha. Se sube a 92ch, que en la
   practica llena la tarjeta y solo pone un tope en pantallas muy anchas,
   donde un renglon de 140 caracteres seria ilegible. */
.rr-app--report p,
.rr-app--report li,
.rr-app--report .rr-ref,
.rr-app--report .rr-lead {
	max-width: min(100%, 92ch);
}

/* Los pies de los graficos van con su grafico, no a media medida. */
.rr-app--report .rr-chart-block p {
	max-width: 100%;
}

/* --- Los chips de puntaje no desbordan ----------------------------------
   "CALIDAD DE DATOS" se salia de su tarjeta: el numero manda el alto y la
   etiqueta no tenia donde cortar. */
.rr-app--report .rr-cards { gap: var(--rr-space-4); }
.rr-app--report .rr-card {
	padding: var(--rr-space-4);
	min-width: 0;
	overflow-wrap: anywhere;
}
.rr-app--report .rr-card__l {
	font-size: 11px;
	line-height: 1.3;
	white-space: normal;
}
.rr-app--report .rr-card__n { line-height: 1.1; }

/* --- Nada pegado al borde ----------------------------------------------
   Red de seguridad: cualquier bloque suelto dentro de una seccion que no
   traiga relleno propio recibe uno minimo. Mas vale que sobre a que el texto
   toque la linea. */
.rr-app--report .rr-section > table,
.rr-app--report .rr-section > .rr-scroll { margin-top: var(--rr-space-4); }


/* ==========================================================================
   EL ANCHO DEL TEXTO, DE VERDAD (0.58.1)

   En 0.58.0 escribi `.rr-app--report p`, que pesa menos que
   `.rr-app--report .rr-section > p` de analysis.css, asi que mi regla no
   ganaba y el texto seguia cortado a media tarjeta. Error mio de
   especificidad.

   Ahora se repiten LOS MISMOS selectores que fijan la medida de lectura. A
   igual peso gana la hoja que se carga despues, y app.css se carga despues.
   La lista salio de leer analysis.css, no de memoria.

   El tope pasa a `min(100%, 92ch)`: en la practica llena la tarjeta, y solo
   corta en pantallas muy anchas, donde un renglon de 140 caracteres se
   vuelve dificil de seguir.
   ========================================================================== */

.rr-ref,
.rr-chart-block p,
.rr-app--report > p, .rr-app--report .rr-adn p, .rr-app--report .rr-section > p,
.rr-app--report .rr-ref,
.rr-app--report .rr-chart-block p, .rr-app--report .rr-chart-block .rr-ref,
.rr-app--report .rr-adn__summary,
.rr-app--report .rr-list--ok li,
.rr-cost__n,
.rr-cost .rr-ref,
.rr-brief__v,
.rr-bag__hidden,
.rr-bagarc p,
.rr-flightbody,
.rr-arclinks,
.rr-derived,
.rr-coverage,
.rr-app--report > p, .rr-app--report .rr-section > p, .rr-app--report .rr-adn p,
.rr-app--report .rr-chart-block .rr-ref, .rr-app--report .rr-chart-block p,
.rr-app--report .rr-coverage p,
.rr-coach__note {
	max-width: min(100%, 92ch);
}

/* Tipografia un punto mas grande, que era el otro pedido. */
.rr-app--report {
	font-size: 19px;
}

.rr-app--report .rr-ref,
.rr-app--report .rr-section > p,
.rr-app--report .rr-adn p {
	font-size: 18px;
}


/* ==========================================================================
   TRES CORRECCIONES (0.58.2)
   ========================================================================== */

/* --- 1. El bloque oscuro "Lo mismo, en golpes" ---------------------------
   [stated] "no se lee, fondo negro y texto medio gris".
   Tenia el texto en blanco al 60% de opacidad. Sobre un fondo claro un gris
   asi se lee; sobre este azul oscuro, no. Se sube casi a blanco pleno y se
   deja la bajada un escalon abajo, que alcanza para jerarquizar sin perder
   legibilidad. */
.rr-app--report .rr-cost,
.rr-app--report .rr-cost p,
.rr-app--report .rr-cost .rr-ref,
.rr-app--report .rr-cost .rr-ref:last-child {
	color: rgba(255, 255, 255, .94);
}

.rr-app--report .rr-cost__lead {
	color: rgba(255, 255, 255, .75);
}

.rr-app--report .rr-cost__n {
	color: #fff;
}

/* --- 2. El menu no tiene barra vertical ---------------------------------
   [stated] "no quiero navegacion vertical en el menu".
   `overflow-x: auto` sin decir nada del eje vertical deja que el navegador
   muestre tambien la barra de arriba a abajo. Se apaga explicitamente. */
.rr-tabs {
	overflow-x: auto;
	overflow-y: hidden;
}

/* Y que la barra horizontal tampoco se vea cuando no hace falta. */
.rr-tabs::-webkit-scrollbar { height: 3px; }
.rr-tabs::-webkit-scrollbar-thumb { background: var(--rr-border); border-radius: 3px; }

/* --- 3. Trazabilidad tampoco se ensancho --------------------------------
   Se me habia escapado: ese bloque usa `.rr-list` y `.rr-meta`, que no
   estaban en la lista de selectores que repeti en 0.58.1. */
.rr-app--report .rr-list,
.rr-app--report .rr-list li,
.rr-app--report .rr-meta,
.rr-app--report .rr-section > ul,
.rr-app--report .rr-section > ul li {
	max-width: min(100%, 92ch);
}


/* ==========================================================================
   TRAZABILIDAD, BIEN ARMADA (0.58.3)

   El problema NO era el ancho del texto: cada renglon es un codigo de regla
   mas un titulo corto, asi que ninguna linea llega al borde por naturaleza.
   Lo que estaba mal era la forma: las metricas que faltaron caian en una
   segunda linea suelta debajo de cada regla, con un hueco al medio, y la
   mitad derecha quedaba vacia.

   Ahora cada item es UNA fila: codigo, titulo, y las metricas alineadas a la
   derecha. Se lee como una tabla y usa el ancho porque hay algo del otro
   lado, no porque se haya estirado el texto.
   ========================================================================== */

.rr-app--report .rr-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--rr-border);
	max-width: 100%;
}

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

/* El codigo, ancho fijo, para que los titulos arranquen alineados. */
.rr-app--report .rr-list li > .rr-mono:first-child {
	flex: 0 0 auto;
	min-width: 92px;
	color: var(--rr-text-3);
}

/* Las metricas que faltaron se van al borde derecho. */
.rr-app--report .rr-list li > .rr-ref {
	display: inline;
	margin: 0 0 0 auto;
	text-align: right;
	font-size: 15px;
	color: var(--rr-text-3);
	max-width: none;
}

/* La lista sin las vinetas: con filas separadas ya no hacen falta. */
.rr-app--report .rr-list {
	list-style: none;
	margin: var(--rr-space-4) 0 0;
	padding: 0;
	max-width: 100%;
}

@media (max-width: 640px) {
	.rr-app--report .rr-list li > .rr-ref {
		margin-left: 0;
		text-align: left;
		flex-basis: 100%;
	}
}


/* ==========================================================================
   LOS FORMULARIOS, COMO FORMULARIOS (0.58.4)

   [stated] "esto sigue fiero". Y si: la caja con lineas, la columna vacia a
   la izquierda y el boton montado sobre el borde de abajo.

   DOS CAUSAS. La primera es que el tema del sitio estila TODAS las <table>
   con borde y separadores, y esto viene de wp-admin como `.form-table`, o sea
   una tabla usada para maquetar un formulario. En el escritorio WordPress le
   saca esos bordes con su propia hoja; en el sitio esa hoja no existe y el
   tema hace lo suyo. Por eso hace falta `!important`: no es capricho, es que
   el tema gana por especificidad.

   La segunda es que una tabla de dos columnas para un formulario ya no se
   usa: la etiqueta va ARRIBA del campo. Asi entra en cualquier ancho, no deja
   columna vacia y se lee en celular sin tocar nada.
   ========================================================================== */

.rr-import .form-table,
.rr-import .form-table tbody,
.rr-import .form-table tr,
.rr-import .form-table th,
.rr-import .form-table td {
	display: block;
	width: 100%;
	border: 0 !important;
	background: none !important;
	padding: 0;
}

.rr-import .form-table tr {
	margin-bottom: 22px;
}

.rr-import .form-table tr:last-child { margin-bottom: 0; }

.rr-import .form-table th {
	font-weight: 600;
	font-size: .95em;
	margin-bottom: 6px;
	text-align: left;
}

.rr-import .form-table td > input[type="text"],
.rr-import .form-table td > input[type="email"],
.rr-import .form-table td > input[type="url"],
.rr-import .form-table td > input[type="date"],
.rr-import .form-table td > input[type="number"],
.rr-import .form-table td > select,
.rr-import .form-table td > textarea {
	width: 100%;
	max-width: 520px;
}

.rr-import .form-table td > textarea { max-width: 100%; }

/* El boton, separado de lo de arriba y sin montarse en ningun borde. */
.rr-import .rr-panel form > p:last-child {
	margin: 22px 0 0;
}

/* El link para copiar ocupa el ancho de la tarjeta. */
.rr-import .rr-panel input.code,
.rr-import .rr-panel input.large-text {
	max-width: 100%;
}


/* ==========================================================================
   FIN DE LA PELEA POR ESPECIFICIDAD (0.58.5)

   Vengo repitiendo selectores para ganarle a los originales, y cada vez
   aparece uno que pesa mas: `.rr-cost .rr-ref` (dos clases) le gana a lo
   que escribi con una sola. En vez de seguir adivinando cual falta, se cierra
   con una regla que pesa mas que cualquiera de las de analysis.css.

   El truco es repetir la clase del contenedor: `.rr-app--report.rr-app--report`
   selecciona exactamente el mismo elemento pero cuenta como DOS clases. Es
   valido, no cambia que elemento matchea, y sube el peso lo suficiente.

   Se aplica al TEXTO del informe. Se dejan afuera a proposito las tablas y
   los graficos, que tienen su propio ancho por buenos motivos.
   ========================================================================== */

.rr-app--report.rr-app--report p,
.rr-app--report.rr-app--report li,
.rr-app--report.rr-app--report .rr-ref,
.rr-app--report.rr-app--report .rr-meta,
.rr-app--report.rr-app--report .rr-cost__n,
.rr-app--report.rr-app--report .rr-cost__lead,
.rr-app--report.rr-app--report .rr-lead,
.rr-app--report.rr-app--report .rr-list,
.rr-app--report.rr-app--report .rr-coverage,
.rr-app--report.rr-app--report .rr-derived,
.rr-app--report.rr-app--report .rr-flightbody,
.rr-app--report.rr-app--report .rr-arclinks,
.rr-app--report.rr-app--report .rr-adn__summary {
	max-width: min(100%, 92ch);
}

/* El pie de un grafico va con el grafico: ese si se queda angosto. */
.rr-app--report.rr-app--report .rr-chart-block p,
.rr-app--report.rr-app--report .rr-chart-block .rr-ref {
	max-width: 100%;
}


/* La marca de la hoja impresa cuando no hay logo cargado (0.58.6). */
.rr-report__brand {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin: 0;
	color: var(--rr-brand);
}

@media print {
	/* El encabezado y el pie impresos no heredan el borde de tarjeta. */
	.rr-printonly.rr-app--report {
		border: 0;
		box-shadow: none;
		padding: 0;
		margin: 0 0 12px;
		max-width: 100%;
	}
}


/* ==========================================================================
   REPASO DE TODAS LAS PESTANAS (0.59.0)

   [stated] "en importar tampoco usamos todo el ancho y se ve feo, podes
   revisar todos los tabs de este plugin".

   Hasta ahora venia arreglando el INFORME, que tiene su propia capa, y las
   demas pantallas quedaron con la medida de lectura vieja: 62ch, que en la
   tipografia del sitio son unos 460px dentro de una tarjeta de 740. Se
   unifica el criterio en todo el front: mismo ancho de texto, misma
   tipografia y mismo aire que en el informe.
   ========================================================================== */

/* El texto de CUALQUIER pantalla del plugin usa el ancho de su contenedor.
   Clase repetida para ganarle a las reglas anteriores sin ir una por una. */
.rr-app.rr-app p,
.rr-app.rr-app li,
.rr-app.rr-app .rr-lead,
.rr-app.rr-app .description,
.rr-app.rr-app .rr-ref {
	max-width: min(100%, 92ch);
}

/* Tipografia pareja con la del informe: la de antes quedaba chica. */
.rr-app {
	font-size: 16.5px;
	line-height: 1.65;
}

.rr-app .rr-lead {
	font-size: 17px;
	color: var(--rr-text-2);
}

.rr-import .description {
	font-size: 15px;
}

/* Titulos con el mismo peso y el mismo subrayado que el informe, para que
   las pestanas no parezcan de dos plugins distintos. */
.rr-import h1,
.rr-app:not(.rr-app--report) h1 {
	font-size: 27px;
	font-weight: 700;
	margin: 0 0 var(--rr-space-3);
}

.rr-import h2 {
	font-size: 22px;
	font-weight: 700;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--rr-brand);
	display: table;
	max-width: 100%;
	margin: var(--rr-space-8) 0 var(--rr-space-4);
}

.rr-import h2:first-child { margin-top: 0; }

/* El campo de archivo y el del link, con el mismo alto que los botones. */
.rr-import input[type="file"] {
	padding: 10px 12px;
	background: #fff;
}

/* Cada formulario de la pantalla de importar es un bloque con aire propio. */
.rr-import > form {
	margin-bottom: var(--rr-space-8);
}


/* ==========================================================================
   DOS ARREGLOS DE BLOQUES CONCRETOS (0.59.1)
   ========================================================================== */

/* --- 1. Fortalezas: texto pegado al borde -------------------------------
   ERROR MIO DE LA 0.58.3. Cuando arme trazabilidad como filas escribi
   `.rr-list li` a secas, y esa regla —que saca la sangria y las vinetas—
   se aplico TAMBIEN a la lista de fortalezas, que comparte la clase base.
   Por eso el texto verde toca el borde de su recuadro.

   Se acota lo de trazabilidad a la lista que NO es de fortalezas, y esta
   recupera su aire. */
.rr-app--report .rr-list--ok {
	list-style: none;
	padding: var(--rr-space-4) var(--rr-space-5);
	margin: 0;
}

.rr-app--report .rr-list--ok li {
	display: list-item;
	border-bottom: 0;
	padding: 0 0 var(--rr-space-3);
	margin: 0;
}

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

/* --- 2. El codigo de regla ---------------------------------------------
   El ancho de esa columna NO estaba en el CSS: viene escrito en el HTML como
   `<col style="width:8%">`, y en una tabla de ancho fijo el `<col>` manda
   sobre cualquier regla. Por eso poner `width` aca no cambiaba nada; el
   porcentaje se corrigio en AnalysisView (8% -> 16%).

   Aca solo queda que el codigo no se parta: con el ancho nuevo entra entero,
   y partirlo en "KB-" / "DLIE-" / "01" es peor que cualquier alternativa. */
.rr-app--report .rr-table--findings > tbody > tr > td:first-child,
.rr-app--report .rr-table--findings > tbody > tr > td:first-child .rr-mono {
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: keep-all;
	font-size: 14px;
	line-height: 1.4;
}


/* ==========================================================================
   LA COLUMNA "CUANTO PESA" (0.59.3)

   La celda se arma como `4<span class="rr-ref"> / 10</span>`, y en el
   informe `.rr-ref` es `display: block`. O sea que el "/ 10" se iba a su
   propio renglon, debajo y corrido: el numero quedaba flotando arriba y la
   fraccion abajo, sin parecer un solo valor.

   Ahora es una sola linea: el numero grande y el "/ 10" chico al lado, como
   se lee una fraccion. Y la columna del tipo ("Medido") baja un punto: venia
   mas grande que el dato principal de la fila, que es el titulo del hallazgo.
   ========================================================================== */

.rr-app--report .rr-table--findings > tbody > tr > td:nth-child(4) {
	white-space: nowrap;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--rr-ink);
}

.rr-app--report .rr-table--findings > tbody > tr > td:nth-child(4) .rr-ref {
	display: inline;
	font-size: 14px;
	font-weight: 400;
	color: var(--rr-text-3);
	margin: 0;
	max-width: none;
}

/* "Medido" / "Calculado" no es el dato principal de la fila. */
.rr-app--report .rr-table--findings > tbody > tr > td:nth-child(3) {
	font-size: 15px;
	font-weight: 600;
	color: var(--rr-text-2);
}

/* Las tres columnas cortas, alineadas arriba con el titulo del hallazgo. */
.rr-app--report .rr-table--findings > tbody > tr > td:nth-child(3),
.rr-app--report .rr-table--findings > tbody > tr > td:nth-child(4),
.rr-app--report .rr-table--findings > tbody > tr > td:nth-child(5) {
	vertical-align: top;
	padding-top: var(--rr-space-4);
}