/* ═══════════════════════════════════════════════════════════
   LA BANDA — la tira de arriba
   ───────────────────────────────────────────────────────────
   Acá vivía todo: logo, escalera, día, cronómetros, cifras y
   pestañas. Doscientos treinta píxeles de alto en una pantalla
   que tiene mil de contenido, y arriba de todo eso el juego
   igual no contestaba de un vistazo cuánta plata tenés.

   La banda dice ahora cuatro cosas y ninguna más: quién sos,
   dónde estás, cuánta plata hay y qué día es. El resto bajó al
   rail, que tiene alto de sobra.
   ═══════════════════════════════════════════════════════════ */
.banda{position:sticky;top:0;z-index:60;height:var(--banda);
  background:var(--umbra);color:var(--tiza);
  box-shadow:0 1px 0 var(--ocre-o),0 10px 22px -16px rgba(0,0,0,.8)}
.banda-i{height:100%;padding:0 20px;display:flex;align-items:center;gap:20px}

/* El logo mide lo que mide el rail: la columna arranca alineada. */
.logo{font-family:var(--disp);font-size:21px;font-weight:500;color:var(--ocre);
  letter-spacing:.04em;line-height:1;white-space:nowrap;flex:none;
  width:calc(var(--rail) - 20px)}

#banda-est{flex:1;min-width:0;display:flex;align-items:center;gap:22px}
.be-t{min-width:0;display:flex;flex-direction:column;gap:1px}
.be-t b{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--tiza);
  line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.be-t i{font-style:normal;font-family:var(--sans);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--umbra5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.be-pl{margin-left:auto;flex:none;display:flex;flex-direction:column;align-items:flex-end}
.be-pl i{font-style:normal;font-family:var(--sans);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--umbra5)}
.be-pl b{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--ocre-c);
  letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.be-pl b.mal{color:var(--almagre-c)}

/* ═══════════════════════════════════════════════════════════
   EL DÍA
   ───────────────────────────────────────────────────────────
   Era un "Día 3" al lado de una raya de dos píxeles que se
   llenaba sin decir de qué. La raya tenía la información y no
   la sabía dar: lo que importa del calendario es que al cambiar
   el día se pagan los jornales, corre el interés y se pudre lo
   que se pudra.

   Ahora es un anillo con el número adentro, y al lado dice
   cuánto falta para que eso pase.
   ═══════════════════════════════════════════════════════════ */
#dia{flex:none;display:flex;align-items:center;gap:10px}
.d-t{text-align:right;line-height:1.25}
.d-t span{display:block;font-family:var(--sans);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--umbra5)}
.d-t b{display:block;font-family:var(--mono);font-size:11.5px;font-weight:500;
  color:var(--tiza4);letter-spacing:-.02em;white-space:nowrap}

.d-r{position:relative;width:36px;height:36px;flex:none}
.d-r svg{width:36px;height:36px;transform:rotate(-90deg);overflow:visible}
.d-r circle{fill:none;stroke-width:2.5}
.d-r .pista{stroke:var(--umbra3)}
.d-r .arco{stroke:var(--ocre);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.d-r em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--tiza);
  letter-spacing:-.05em}

@media(max-width:900px){
  .banda-i{padding:0 13px;gap:13px}
  .logo{width:auto;font-size:18px}
  #banda-est{gap:13px}
}
/* En el teléfono se cae la cuenta regresiva del día —queda el anillo,
   que ya dice el número y cuánto va— pero NO se cae dónde estás: es de
   las cuatro cosas que la banda existe para contestar. Si no entra,
   se corta con puntos suspensivos. */
@media(max-width:600px){
  .d-t{display:none}
  .be-pl b{font-size:17px}
  .be-t b{font-size:14px}
  .be-t i{letter-spacing:.08em}
}

/* ═══════════════════════════════════════════════════════════
   EL RAIL — el menú de la izquierda
   ───────────────────────────────────────────────────────────
   Sigue pegado mientras la página baja, así que las secciones,
   las cifras y los cronómetros se ven desde cualquier lado sin
   robarle alto al contenido.
   ═══════════════════════════════════════════════════════════ */
.rail{background:var(--umbra);color:var(--tiza)}
.rail-i{position:sticky;top:var(--banda);padding:14px 0 26px}

/* ══ SECCIONES ══
   Renglones de menú de verdad: alto de dedo, la activa pintada
   entera. La pestaña subrayada de antes tenía catorce píxeles
   de padding y se leía como un título más. */
#tabs{display:flex;flex-direction:column;gap:2px;padding:0 12px}
button.tab{display:flex;align-items:center;gap:11px;width:100%;min-height:40px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;text-align:left;background:none;border:none;
  border-radius:var(--rad);color:var(--tiza4);padding:0 12px;cursor:pointer;
  white-space:nowrap;transition:background .13s,color .13s}
button.tab svg.i{width:15px;height:15px;flex:none;color:var(--umbra5);transition:color .13s}
button.tab span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
button.tab:hover{background:var(--umbra2);color:var(--tiza)}
button.tab:hover svg.i{color:var(--tiza4)}
button.tab[aria-selected="true"]{background:var(--ocre-o);color:var(--tiza)}
button.tab[aria-selected="true"] svg.i{color:var(--ocre-c)}
button.tab:focus-visible{outline:2px solid var(--ocre);outline-offset:-2px}
button.tab em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:0;
  background:var(--almagre);color:#F2DED9;padding:2px 6px;border-radius:9px;flex:none}
button.tab em.v{background:var(--verde);color:#DDE6DB}

/* ══ BLOQUES DEL RAIL ══ */
.rl{padding:16px 20px 0;margin-top:14px;border-top:1px solid var(--umbra2)}
.rl h4{font-family:var(--sans);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--umbra5);font-weight:700;margin-bottom:9px}

/* ══ CIFRAS ══ */
#cifras{display:grid}
.ci{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:6px 0;border-bottom:1px solid var(--umbra2)}
.ci:last-child{border-bottom:none}
.ci .e{font-family:var(--sans);font-size:8.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--umbra5)}
.ci .v{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--tiza);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ci .v.oro{color:var(--ocre-c)}
.ci .v.bien{color:var(--verde-c)}
.ci .v.mal{color:var(--almagre-c)}
.ci .v.txt{font-family:var(--serif);font-size:14px;font-style:italic;letter-spacing:0}

/* ═══════════════════════════════════════════════════════════
   LA COLA — el instrumento
   ───────────────────────────────────────────────────────────
   Cada cosa en curso es su propio cronómetro: arranca cuando la
   arrancás, termina cuando termina, y las que corren en
   paralelo se apilan. Se cayó la raya de color de la izquierda:
   el tipo de tarea ya lo dicen la barra y el número, y era una
   raya más en una pantalla que estaba llena de rayas.
   ═══════════════════════════════════════════════════════════ */
/* El track va minmax(0,1fr) y no `auto`: con `auto`, "Hachar monte y
   estibar rollizos" no se recortaba —estiraba la columna hasta caber
   entera— y el cronómetro terminaba pintado 85 px afuera del rail,
   encima del contenido. El nombre es lo único que puede ceder acá;
   el tiempo que falta no se recorta nunca. */
#cola{display:grid;grid-template-columns:minmax(0,1fr);gap:13px}
.cr{min-width:0}

.cr-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cr-t b{min-width:0;font-family:var(--serif);font-size:14.5px;font-weight:700;color:var(--tiza);
  line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-t time{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ocre-c);
  letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.cr.pas .cr-t time{color:var(--tiza4)}
.cr.enc .cr-t time{color:var(--verde-c)}
.cr.via .cr-t time{color:var(--almagre-c)}

.cr-b{height:3px;background:var(--umbra3);margin-top:6px;overflow:hidden}
.cr-b i{display:block;height:100%;background:var(--ocre);transition:width 1s linear}
.cr.pas .cr-b i{background:var(--umbra5)}
.cr.enc .cr-b i{background:var(--verde)}
.cr.via .cr-b i{background:var(--almagre)}

.cr-s{display:flex;justify-content:space-between;gap:8px;margin-top:4px}
.cr-s span{min-width:0;font-family:var(--sans);font-size:10px;letter-spacing:.04em;
  color:var(--umbra5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-s .luego{flex:none;font-family:var(--mono);font-size:9.5px;color:var(--umbra4);white-space:nowrap}

.cr-nada{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--umbra5);
  line-height:1.4}

/* ═══════════════════════════════════════════════════════════
   EL RAIL, ACOSTADO
   ───────────────────────────────────────────────────────────
   Abajo de 900 px no hay costado que valga: la misma tira se
   acuesta arriba del contenido. Las secciones quedan en fila y
   corren de lado; las cifras se reparten el ancho.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .rail{box-shadow:inset 0 -1px 0 var(--umbra3)}
  .rail-i{position:static;padding:0 0 14px}

  #tabs{flex-direction:row;gap:4px;padding:8px 13px;overflow-x:auto;scrollbar-width:none}
  #tabs::-webkit-scrollbar{display:none}
  button.tab{width:auto;min-height:38px;padding:0 13px;letter-spacing:.07em}
  button.tab span{flex:none}

  .rl{padding:13px 13px 0;margin-top:0;border-top:1px solid var(--umbra2)}

  /* En columnas parejas y no en fila que desborda: cuatro cifras
     sueltas con flex dejaban una huérfana sola en el segundo renglón. */
  #cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:4px 14px}
  .ci{flex-direction:column;align-items:flex-start;gap:1px;padding:0;border-bottom:none}

  #cola{gap:11px}
  @media(min-width:560px){
    #cola[data-n="2"],#cola[data-n="3"],#cola[data-n="4"],
    #cola[data-n="5"],#cola[data-n="6"]{
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:11px 22px}
  }
}

/* Va después del bloque de arriba a propósito: misma especificidad,
   gana el último. Cuatro cifras en tres columnas dejan una huérfana
   sola en el segundo renglón; dos y dos cierra. */
@media(max-width:600px){#cifras{grid-template-columns:1fr 1fr}}