/* ═══════════════════════════════════════════════════════════
   PIEZAS DE LOS SISTEMAS NUEVOS
   reputación por pueblo · oficios · medallas · carga
   ═══════════════════════════════════════════════════════════ */

/* ── repetición en la cola ──
   Un botón de 15 px que decidía si el encargo sigue solo. Ahora
   es un control redondo de 26, con el estado pintado y no
   solamente insinuado en el color del glifo. */
.cr-x{flex:none;display:flex;align-items:center;gap:8px}
button.cr-r{width:26px;height:26px;flex:none;background:var(--umbra2);border:1px solid var(--umbra3);
  border-radius:50%;color:var(--umbra5);font-size:13px;line-height:1;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .13s,color .13s,border-color .13s}
button.cr-r:hover{background:var(--umbra3);border-color:var(--umbra4);color:var(--tiza3)}
button.cr-r.on{background:var(--ocre-o);border-color:var(--ocre);color:var(--tiza)}
button.cr-r.on:hover{background:var(--ocre);color:var(--umbra)}
button.cr-r:focus-visible{outline:2px solid var(--ocre);outline-offset:1px}

/* ── cómo te trata el pueblo ── */
.trato{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:2px 0 10px;
  padding-bottom:9px;border-bottom:var(--lin)}
.t-n{font-family:var(--serif);font-size:17px;color:var(--tinta)}
.t-n b{font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:.03em}
.t-r,.t-f{font-family:var(--mono);font-size:11px;color:var(--tiza5)}
.t-f{color:var(--verde)}

/* barrita de escalones, sirve para reputación y para grados */
.repb{display:flex;gap:3px;margin-bottom:8px}
.repb i{flex:1;height:3px;background:var(--tiza3)}
.repb i.ll{background:var(--tiza5)}
.repb i.aq{background:var(--ocre)}

/* rótulo de oficio al lado del título de sección */
h3 em.of{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:0;
  text-transform:none;color:var(--tiza4);margin-left:auto;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════
   LA HACIENDA — lo que tenés, de un vistazo
   ───────────────────────────────────────────────────────────
   Abre la pantalla de Vos porque es de lo que va el juego. Un
   número grande por bien, y abajo la única línea que lo hace
   interesante: los bueyes que faltan, la carreta que armaste
   vos y no la que compraste.
   ═══════════════════════════════════════════════════════════ */
.haber{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:2px}
.hb{background:var(--tiza2);border:1px solid var(--tiza3);padding:11px 13px;
  display:flex;flex-direction:column;gap:1px;min-width:0}
.hb .e{font-family:var(--sans);font-size:8.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--tiza5)}
.hb .v{font-family:var(--mono);font-size:25px;font-weight:600;color:var(--tinta);
  letter-spacing:-.04em;line-height:1.12;font-variant-numeric:tabular-nums}
.hb .v.oro{color:var(--ocre-o)}
.hb .v.mal{color:var(--almagre)}
.hb .v.txt{font-family:var(--disp);font-size:21px;letter-spacing:.02em;font-weight:600}
.hb i{font-style:normal;font-family:var(--serif);font-size:12.5px;color:var(--tiza5);
  line-height:1.3;margin-top:2px;overflow:hidden;text-overflow:ellipsis}

/* fila de acciones sueltas debajo de una sección */
.acs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* ── medallas ──
   La ganada se distingue por el papel y por el ícono, no por
   otra raya de tres píxeles a la izquierda. */
.meds{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:8px}
.med{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:2px 9px;background:var(--tiza2);border:1px solid var(--tiza3);padding:10px 12px;
  align-items:center}
.med svg.i{width:16px;height:16px;grid-row:1/3;color:var(--tiza4)}
.med b{font-family:var(--serif);font-size:14.5px;font-weight:700;color:var(--tinta);line-height:1.2}
.med span{font-family:var(--serif);font-size:12.5px;color:var(--tiza5);line-height:1.35}
.med.no{opacity:.5;background:transparent;border-style:dashed;border-color:var(--tiza4)}
.med.si{background:#E9E4D2;border-color:var(--ocre-c)}
.med.si svg.i{color:var(--ocre)}
.med.mala{background:#E9DBD7;border-color:var(--almagre-c)}
.med.mala svg.i{color:var(--almagre)}

/* ═══════════════════════════════════════════════════════════
   CARGAR LA CARRETA
   La decisión que antes no existía: el inventario te seguía a
   todos lados y el juego solo sabía decirte "vendé algo".
   ═══════════════════════════════════════════════════════════ */
.carga{background:var(--tiza2);border:1px solid var(--tiza3);padding:13px 15px;margin-bottom:14px}
.carga-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.carga-h>span:first-child{font-family:var(--serif);font-size:15px;color:var(--tinta2);white-space:nowrap}
.carga-h b{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--tinta)}
.carga-b{flex:1;min-width:70px;height:4px;background:var(--tiza3);overflow:hidden}
.carga-b i{display:block;height:100%;background:var(--ocre);transition:width .2s ease}

.carga-l{display:grid;gap:1px}
.cg{display:grid;grid-template-columns:7px minmax(0,1fr) 42px auto 74px;align-items:center;gap:9px;
  padding:5px 0;border-bottom:1px solid rgba(202,195,172,.55)}
.cg:last-child{border-bottom:none}
.cg>i{width:7px;height:7px;background:var(--pig,var(--tiza4))}
.cg-n{font-family:var(--serif);font-size:14px;color:var(--tinta2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cg-n small{font-family:var(--mono);font-size:9.5px;color:var(--tiza5);margin-left:4px}
.cg-d{text-align:right;font-family:var(--mono);font-size:11px}
.cg-c{display:flex;align-items:center;gap:5px}
.cg-c b{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--tinta);
  min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.cg-c b.sec{color:var(--tiza4);font-weight:400}
.cg-g{text-align:right;font-family:var(--mono);font-size:10px;color:var(--tiza5);white-space:nowrap}
@media(max-width:600px){
  .cg{grid-template-columns:7px minmax(0,1fr) auto;gap:7px}
  .cg-d,.cg-g{display:none}
}

/* ── el candado, ahora explica qué falta ── */
.cand{align-items:flex-start;line-height:1.35}
.cand svg.i{margin-top:2px}