.r{font-family:"Segoe UI",Arial,sans-serif;font-size:15px;line-height:1.6;
   background:#fff;border:1.5px solid #d9d3c4;border-radius:12px;
   padding:14px;margin:12px 0;}
.r b{display:block;font-size:16px;margin-bottom:6px;}
.r.bien{border-color:#2f6b3f;background:#eef7f0;} .r.bien b{color:#2f6b3f;}
.r.mal{border-color:#c0564a;background:#fdecec;} .r.mal b{color:#8a2b22;}
.detalle{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;
   white-space:pre-wrap;word-break:break-word;color:#5a6a7d;}
/* EL COLOR DEL TEXTO VA CON EL DEL FONDO, SIEMPRE.
   Esta regla cambiaba el fondo a crema y dejaba el `color` de `estilos.css`,
   que es `--papel` —blanco—. Resultado: «Probar todo» en blanco sobre crema,
   1.12:1. Se veia el boton y no se leia lo que decia. Lo encontro la medida de
   la dimension 6; a ojo pasa, porque el ojo lee lo que ya sabe que pone. */
.boton{font:inherit;font-size:17px;padding:12px 22px;border-radius:10px;
   border:1.5px solid #8a7f66;background:#f6f2e8;color:#1f2933;cursor:pointer;}
.barra{height:16px;border:1.5px solid #d9d3c4;border-radius:8px;
   margin-top:8px;overflow:hidden;background:#f6f2e8;}
.barra span{display:block;height:100%;width:0;background:#2f6b3f;
   transition:width .08s linear;}

/* --- el banco de pruebas ------------------------------------------------- */
.boton--copia{background:#2f6b3f;color:#fff;border-color:#2f6b3f;margin-left:.5rem}
.json{
  /* SE PUEDE SELECCIONAR Y COPIAR A MANO. Si el portapapeles falla —y en un
     teléfono falla más de lo que parece—, esta es la salida que siempre está. */
  width:100%; box-sizing:border-box; margin-top:.6rem;
  font-family:ui-monospace,Menlo,monospace; font-size:11.5px; line-height:1.4;
  border:1px solid #d9d3c4; border-radius:8px; padding:.5rem; background:#fbfaf7;
}
#resumen .r{margin:8px 0}