/* ==========================================================================
   Muestra de informe · /muestra-informe/
   ==========================================================================
   Las tres partes del informe se ven como láminas: una superficie propia con
   la marca «Muestra ilustrativa» en cada una, para que ninguna captura suelta
   pueda leerse como un informe real. Todo lo demás —tablas, títulos, rótulos—
   es el sistema de siempre. */

.jn-muestra__aviso {
  padding: 22px 24px;
  border: 1px solid var(--jn-border-2);
  border-left: 3px solid var(--jn-medium);
  border-radius: var(--jn-r-card);
  background: var(--jn-raised);
}
.jn-muestra__aviso .jn-body { margin-top: 8px; }

.jn-muestra__ficha {
  display: grid; gap: 16px 32px;
  margin-top: 28px;
}
@media (min-width: 700px) { .jn-muestra__ficha { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .jn-muestra__ficha { grid-template-columns: repeat(5, 1fr); } }
.jn-muestra__ficha dt,
.jn-muestra__campos dt {
  font-family: var(--jn-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--jn-text-3);
}
.jn-muestra__ficha dd { margin: 6px 0 0; color: var(--jn-text); line-height: 1.45; }

/* La lámina */
.jn-muestra__lamina {
  position: relative;
  margin-top: 36px;
  padding: 36px 24px 32px;
  border: 1px solid var(--jn-border-2);
  border-radius: var(--jn-r-card);
  background: var(--jn-raised);
}
@media (min-width: 800px) { .jn-muestra__lamina { padding: 44px 44px 40px; } }
.jn-section--raised .jn-muestra__lamina { background: var(--jn-base); }

.jn-muestra__marca {
  position: absolute; top: 14px; right: 18px;
  font-family: var(--jn-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--jn-medium);
}

/* Resultado global: tres cifras */
.jn-muestra__global { display: grid; gap: 24px; margin-top: 20px; }
@media (min-width: 700px) { .jn-muestra__global { grid-template-columns: repeat(3, 1fr); } }
.jn-muestra__global > div { padding-top: 16px; border-top: 1px solid var(--jn-border-2); }
.jn-muestra__valor { font-size: 34px; line-height: 1.1; color: var(--jn-text); }
.jn-muestra__nombre { margin-top: 6px; font-weight: 600; color: var(--jn-text); }
.jn-muestra__global .jn-small { margin-top: 4px; }

/* Criticidad: el color dice el nivel, la palabra también (no depende del color). */
.jn-muestra__nivel {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.jn-muestra__nivel--alta  { color: var(--jn-critical); }
.jn-muestra__nivel--media { color: var(--jn-medium); }
.jn-muestra__nivel--baja  { color: var(--jn-low); }
.jn-label .jn-muestra__nivel { letter-spacing: 0; text-transform: none; }

/* Madurez por función: barra sobre 4,0 con el objetivo marcado en 3,0 */
.jn-muestra__madurez { display: grid; gap: 14px; margin-top: 20px; }
.jn-muestra__fila {
  display: grid; align-items: center; gap: 8px 16px;
  grid-template-columns: 1fr 44px;
}
@media (min-width: 700px) { .jn-muestra__fila { grid-template-columns: 180px 1fr 44px; } }
.jn-muestra__funcion { color: var(--jn-text); grid-column: 1 / -1; }
@media (min-width: 700px) { .jn-muestra__funcion { grid-column: auto; } }
.jn-muestra__funcion .jn-num { color: var(--jn-text-3); margin-right: 6px; }
.jn-muestra__barra {
  position: relative; height: 10px;
  border-radius: 999px;
  background: var(--jn-overlay);
}
.jn-muestra__barra span {
  display: block; height: 100%;
  border-radius: 999px;
  background: var(--jn-action-link);
}
.jn-muestra__barra::after {
  content: ""; position: absolute; top: -4px; bottom: -4px; left: 75%;
  width: 2px; background: var(--jn-text-2);
}
.jn-muestra__cifra { text-align: right; color: var(--jn-text); }

/* El hallazgo: campo y texto, uno debajo del otro */
.jn-muestra__campos { display: grid; gap: 22px; margin-top: 28px; }
@media (min-width: 800px) { .jn-muestra__campos > div { display: grid; grid-template-columns: 200px 1fr; gap: 28px; } }
.jn-muestra__campos dd { margin: 6px 0 0; color: var(--jn-text-2); line-height: 1.6; }
@media (min-width: 800px) { .jn-muestra__campos dd { margin-top: 0; } }

.jn-muestra__indice { margin: 0; padding-left: 22px; display: grid; gap: 8px; color: var(--jn-text-2); }

/* Las tablas del sistema tienen un ancho mínimo de 680 px y se desplazan en
   móvil. Las de la lámina tienen tres o cuatro columnas cortas: envuelven el
   texto y se leen enteras, sin desplazar. */
@media (max-width: 699px) {
  .jn-muestra__lamina .jn-table { min-width: 0; font-size: 14.5px; }
  .jn-muestra__lamina .jn-table th, .jn-muestra__lamina .jn-table td { padding: 12px 8px; }
  .jn-muestra__lamina .jn-table th:first-child, .jn-muestra__lamina .jn-table td:first-child { padding-left: 0; }
}