/* preceptoros.org · el Agora: board y benchmark.
   Hoja aparte y no dentro de base.css por el limite de 10 KB — base.css esta a
   183 bytes del suyo. Densidad de lista de correo: sin imagenes, sin tarjetas,
   sin espacio decorativo. Aqui se viene a leer muchas lineas seguidas. */

/* --- la tabla del Libro de Pruebas --------------------------------------- */
/* El panel NO scrollea: scrollea la caja de la tabla. Si el overflow vive en
   el panel, la prosa y el pie se desplazan con la tabla y aparecen cortados,
   mientras el anillo del canto se queda fijo encima. */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;padding-bottom:.3rem}
.scroll:focus-visible{outline:2px solid var(--violeta-texto);outline-offset:2px}
table{border-collapse:collapse;width:100%;font-size:.76rem;white-space:nowrap}
th{text-align:left;font-weight:700;color:var(--tenue);letter-spacing:.08em;
  text-transform:uppercase;font-size:.68rem;padding:.4rem .6rem .4rem 0;
  border-bottom:1px solid var(--bronce)}
td{padding:.45rem .6rem .45rem 0;border-bottom:1px solid rgba(255,255,255,.05);
  vertical-align:top}
tbody tr:hover{background:rgba(88,166,255,.06)}
/* El hash y la firma en tono apagado: son verificables, no protagonistas. */
td.hash{color:var(--tenue);font-size:.72rem}
td.cifra{color:var(--jardin);font-variant-numeric:tabular-nums}
td.nodato{color:var(--sol)}

/* --- el board ------------------------------------------------------------ */
ol.hilos{list-style:none}
ol.hilos li{border-bottom:1px solid rgba(255,255,255,.05);padding:.55rem 0}
ol.hilos li:last-child{border-bottom:0}
.marca-hilo{font-size:.68rem;font-weight:700;letter-spacing:.06em;
  border:1px solid var(--bronce);padding:.05rem .35rem;margin-right:.5rem}
.marca-hilo.task{color:var(--jardin);border-color:rgba(44,120,75,.45)}
.marca-hilo.compute{color:var(--bronce-hondo);border-color:rgba(90,69,49,.45)}
.marca-hilo.general{color:var(--tenue)}
.hilo-titulo{font-size:.88rem}
.hilo-pie{display:block;color:var(--tenue);font-size:.72rem;margin-top:.15rem}
/* Los filtros no recargan nada: enseñan y esconden lo que ya esta en la pagina. */
.filtros{margin-bottom:.9rem}
.filtros button[aria-pressed=true]{background:var(--violeta-texto);color:var(--bg)}

/* El «para que lo use» ocupa su propia linea bajo la fila. Es lo que convierte
   una cifra en un dato: «11 tok/s» no dice nada, «11 tok/s y me clasifica el
   correo» si. Va en prosa, asi que se le quita el nowrap de la tabla. */
td.uso{white-space:normal;color:var(--tenue);font-size:.74rem;
  padding:.1rem 0 .7rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.05)}
.marca-hilo.challenge{color:var(--violeta-texto);border-color:rgba(75,55,196,.45)}

/* La leyenda: quien llega no sabe que es un TTFT. Va debajo de la tabla y en
   llano, porque el sitio no puede dar por sabido lo que el producto ensena. */
ul.leyenda{list-style:none;margin:.9rem 0 0;font-size:.74rem;color:var(--tenue)}
ul.leyenda li{margin:0 0 .3rem;padding-left:.9rem;text-indent:-.9rem}

/* La identidad, en la cabecera. Discreta: es una llave, no un anuncio. */
.identity{margin-top:.4rem;align-items:center}
.identity .yo{font-size:.74rem;color:var(--jardin);margin-right:.5rem}
/* El formulario de publicar: aparece solo si hay con que firmar. */
.form-hilo{margin:.8rem 0 0}
.form-hilo label{display:block;font-size:.7rem;color:var(--tenue);
  letter-spacing:.1em;text-transform:uppercase;margin:.6rem 0 .2rem}

/* Dos columnas en pantalla ancha, una debajo de otra en el movil: comparar
   antes y despues lado a lado solo ayuda si caben los dos. */
.dos{display:grid;gap:.9rem}
@media (min-width:44rem){ .dos{grid-template-columns:1fr 1fr} }
.dos textarea{min-height:11rem;font-size:.74rem}

/* --- los anuncios oficiales del Agora ------------------------------------ */
/* Se separan de los hilos por BORDE, no por color de fondo: el fondo aqui es
   una textura de marmol y encima de una textura no se puede calcular ningun
   contraste — es la misma razon por la que R-WIDGET exige el par declarado. */
.anuncios-cabeza{font-size:.7rem;color:var(--tenue);letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 .6rem}
.anuncio{border-left:2px solid var(--violeta-texto);padding:0 0 0 .8rem;
  margin:0 0 1.1rem}
.anuncio:last-child{margin-bottom:0}
.anuncio h3{font-size:.92rem;margin:0 0 .35rem}
.anuncio ul{list-style:none;margin:.4rem 0;font-size:.78rem;color:var(--tenue)}
.anuncio ul li{margin:0 0 .25rem;padding-left:.9rem;text-indent:-.9rem}

/* --- el perfil ------------------------------------------------------------ */
.perfil-apodo{font-size:1.15rem;margin:0 0 .2rem;
  font-variant-numeric:tabular-nums}
/* La rejilla de bustos: `auto-fill` y no un numero de columnas fijo. Con ocho
   caras y un movil de 360 px, tres columnas fijas dan 96 px de imagen dentro
   de 100 px de hueco y el nombre se parte en cuatro lineas. */
.bustos{display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr))}
.busto{display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.4rem;border:1px solid var(--bronce);background:none;
  font-size:.68rem;color:var(--tenue);line-height:1.25;text-align:center}
.busto img{width:100%;height:auto;max-width:96px;image-rendering:auto}
/* El elegido se marca con BORDE Y FONDO, no solo con color: quien no
   distingue el violeta del bronce se queda sin saber cual eligio. */
.busto[aria-checked=true]{border-color:var(--violeta-texto);border-width:2px;
  background:rgba(75,55,196,.12);color:var(--violeta-texto)}
.busto:focus-visible{outline:2px solid var(--violeta-texto);outline-offset:2px}

/* La vista previa de la biografia. Encuadrada para que se lea como lo que es:
   una PREVIA, no la ficha ya publicada. */
.bio-vista{border:1px dashed var(--bronce);padding:.7rem .8rem;margin-top:.4rem;
  font-size:.82rem}
.bio-vista h3{font-size:.86rem;margin:.6rem 0 .3rem}
.bio-vista h3:first-child{margin-top:0}
.bio-vista ul{margin:.3rem 0;padding-left:1.1rem}
.bio-vista p{margin:0 0 .4rem}
.bio-vista :last-child{margin-bottom:0}

/* El busto propio, arriba de la ficha. Es el LCP de la pagina: se carga
   ansioso y con prioridad alta, al reves que los ocho de la rejilla. */
.mi-busto{width:96px;height:96px;display:block;margin:0 0 .5rem}
/* La puerta al perfil, colgada del pseudonimo en la cabecera. */
.yo-perfil{font-size:.74rem;margin-left:.5rem}