/* ═══════════════════════════════════════════════════════════
   ANOTACIONES (fichas)
   ───────────────────────────────────────────────────────────
   Se cayó la raya de color de la izquierda. Era el mismo gesto
   en ocho lugares —fichas, cronómetros, ranking, medallas,
   opciones del modal— y cuando un recurso se usa en todos lados
   deja de señalar nada. El pigmento de la cadena queda donde ya
   estaba y se lee mejor: en el ícono del título.

   Las fichas van a escuadra. Redondo es lo que se toca; el
   papel no se toca. Lo que separa una ficha disponible de una
   cerrada es el borde: hairline si podés, punteado si no.
   ═══════════════════════════════════════════════════════════ */
.rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:11px}
.an{background:var(--tiza2);border:1px solid var(--tiza3);padding:13px 15px;
  display:flex;flex-direction:column}
.an.ok{background:#EBE6D4;border-color:var(--ocre-c)}
.an.mia{border-color:var(--verde-c)}
.an.mia h4 svg.i{color:var(--verde)}
.an.no{opacity:.62;border-style:dashed;border-color:var(--tiza4);background:transparent}
.an h4{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--tinta);
  line-height:1.2;display:flex;align-items:center;gap:8px}
.an h4 svg.i{width:15px;height:15px;color:var(--pig,var(--tiza5))}
.an .m{font-family:var(--mono);font-size:10.5px;color:var(--tiza5);margin-top:4px;letter-spacing:-.01em}
.an .d{font-family:var(--serif);font-size:14px;color:var(--tinta2);margin-top:9px;line-height:1.45}
.an .ac{display:flex;gap:8px;margin-top:auto;padding-top:14px;flex-wrap:wrap}
.an dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-family:var(--sans);font-size:13px}
.an dt{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--tiza5);
  font-weight:700;padding-top:4px;white-space:nowrap}
.an dd{font-family:var(--serif);font-size:14px;color:var(--tinta2)}
.an dd.bien{color:var(--verde)}
.an dd.mal{color:var(--almagre)}
.an .nt{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--tiza5);
  margin-top:7px;line-height:1.4}

.cand{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--almagre);
  margin-top:11px;display:flex;align-items:center;gap:6px}
.cand svg.i{width:12px;height:12px}

/* ══ CHIP ══
   Un chip es un rótulo: dice cuántos tenés. Tenía relleno,
   esquinas redondeadas y el mismo alto que un botón chico, así
   que parecía uno. Ahora es una marca al agua sobre el papel —
   sin borde, sin radio, en el gris de los datos. */
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;
  background:rgba(148,139,114,.17);color:var(--tiza5);
  padding:2px 7px;border-radius:0;white-space:nowrap;display:inline-block}
.chip.mal{background:rgba(158,59,44,.15);color:var(--almagre)}

/* ══ TABLA ══ */
.tw{overflow-x:auto;margin:0 -4px}
table{width:100%;border-collapse:collapse;min-width:560px}
th{font-family:var(--sans);font-size:8.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--tiza5);text-align:left;padding:0 9px 7px;border-bottom:1px solid var(--tiza4);
  font-weight:700;white-space:nowrap}
th.r{text-align:right}
th.cn{text-align:center}
td{padding:5px 9px;border-bottom:1px solid rgba(202,195,172,.55);font-family:var(--mono);
  font-size:12.5px;white-space:nowrap;color:var(--tinta2);vertical-align:middle}
td.r{text-align:right}
td.cn{text-align:center}
/* El nombre iba `display:flex`, y un td que deja de ser celda se sale
   de la grilla de la tabla: quedaba unos píxeles más arriba que los
   números de su propia fila. Vuelve a ser celda; el punto de la
   cadena se alinea solo, como texto. */
td.nm{font-family:var(--serif);font-size:15px;color:var(--tinta)}
td.nm i{display:inline-block;width:7px;height:7px;margin-right:8px;
  background:var(--pig,var(--tiza4));vertical-align:middle}
td.sec{color:var(--tiza5)}
td.ten{color:var(--tinta);font-weight:600}
td.pz{font-weight:600;color:var(--tinta)}
tr.cad td{background:none;border-bottom:none;padding:16px 9px 3px}
tr.cad span{font-family:var(--sans);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pig);font-weight:700}
tr.con td.nm{font-weight:700}
td small{font-size:10px;color:var(--tiza5);margin-left:2px}
td .bien{color:var(--verde)}
td .mal{color:var(--almagre)}

/* ══ RANKING ══
   El pigmento de la cadena se mudó de la raya al número. */
.rank{display:grid;gap:4px}
.rk{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;
  background:var(--tiza2);border:1px solid var(--tiza3);padding:7px 12px}
.rk b{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--pig,var(--tiza5))}
.rk span{font-family:var(--serif);font-size:15px;color:var(--tinta)}
.rk em{font-style:normal;font-family:var(--mono);font-size:14px;font-weight:600}

/* ═══════════════════════════════════════════════════════════
   BOTONES
   ───────────────────────────────────────────────────────────
   El problema no era el color: era que un botón medía lo mismo
   que un rótulo, tenía las esquinas iguales que un cartel y el
   relleno del marco. Un botón ahora se reconoce sin leerlo por
   tres cosas juntas, y ninguna la tiene nada que no se toque:
   esquina redondeada, alto de dedo y sombra que se hunde al
   apretar.

   Tres pesos, y no más: la principal en ocre (la acción de la
   ficha), la verde (delegar) y la neutra oscura (todo lo demás).
   ═══════════════════════════════════════════════════════════ */
button.b{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em;
  background:var(--umbra);color:var(--tiza);border:1px solid var(--umbra);
  border-radius:var(--rad);padding:0 16px;min-height:38px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:0 1px 2px rgba(36,29,23,.3);
  transition:background .13s,border-color .13s,box-shadow .13s,transform .06s}
button.b:hover{background:var(--umbra3);border-color:var(--umbra4);
  box-shadow:0 2px 7px rgba(36,29,23,.32)}
button.b:active{transform:translateY(1px);box-shadow:0 0 0 rgba(36,29,23,0)}
button.b:focus-visible{outline:2px solid var(--ocre);outline-offset:2px}

/* la principal: la que el jugador vino a apretar */
button.b.p{background:var(--ocre);border-color:var(--ocre-o);color:var(--umbra);
  box-shadow:0 1px 2px rgba(142,99,23,.4)}
button.b.p:hover{background:var(--ocre-c);border-color:var(--ocre);
  box-shadow:0 2px 8px rgba(142,99,23,.42)}

/* la verde: encargárselo a otro */
button.b.g{background:var(--verde);border-color:#43634A;color:#EDF2EC}
button.b.g:hover{background:#5D8663;border-color:var(--verde)}

/* compacta: más chica, pero sigue siendo un botón.
   Tenía 3 px de relleno y once de letra — un botón de 20 px de
   alto no se puede apretar con el pulgar. */
button.b.c{min-height:32px;padding:0 12px;font-size:12px;gap:5px}

/* cuadrada, para los +/− de la carga */
button.b.sq{min-height:30px;width:30px;padding:0;font-size:15px;font-weight:700;
  letter-spacing:0;line-height:1}

button.b:disabled{background:transparent;color:var(--tiza5);border:1px dashed var(--tiza4);
  box-shadow:none;cursor:not-allowed;transform:none}
button.b:disabled:hover{background:transparent;border-color:var(--tiza4);box-shadow:none}

/* sobre fondo oscuro la neutra desaparecería: se sube un tono */
.rail button.b,.dev button.b,.dia button.b{background:var(--umbra3);border-color:var(--umbra4)}
.rail button.b:hover,.dev button.b:hover,.dia button.b:hover{background:var(--umbra4);
  border-color:var(--umbra5)}
.rail button.b:disabled,.dev button.b:disabled,.dia button.b:disabled{background:transparent;
  border:1px dashed var(--umbra4);color:var(--umbra5)}