/* Las pantallas que NO son la mesa: crear un torneo, el panel de admin, el
   historial, el perfil, el reglamento y las insignias.

   Issue #1722 — salieron de `estilo.css` porque ese archivo pasó su tope de
   4000 líneas, y lo pasó de la forma que #1613 ya documentó: `dev` medía 3983 y
   la rama del HUD 3933 —las dos por debajo— y el MERGE de las dos dio 4021. Un
   tope que se cumple por rama y se viola al sumarse no lo prueba nadie hasta
   que cae en `dev`.

   El corte es por dominio y no por tamaño: acá no hay una sola regla del
   tapete. Lo que queda en `estilo.css` es la mesa, el lobby y el club.

   OJO: los guards del CSS leen los DOS archivos. Si alguna vez se agrega un
   tercero, hay que sumarlo también — un guard que mira un archivo y no el otro
   es peor que no tenerlo. */
  /* --- pantalla de crear torneo ---
     Antes eran 21 campos en una grilla plana adentro del lobby, mas un
     "id-del-torneo" que el admin tenia que inventar. Ahora es su propia
     pantalla, agrupada por lo que decide cada cosa. */
  .create-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
  .create-head h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.01em; }
  .create-head p { margin: 0; font-size: 12px; }
  .create-sum { margin-left: auto; display: flex; gap: 20px; text-align: right; }
  .create-sum div span { display: block; font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); }
  .create-sum div strong { font-size: 16px; font-variant-numeric: tabular-nums; }
  .create-sum .prize strong { color: var(--amber); }

  .panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
  .panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-content: start;
    margin: 0; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 16px;
    background: var(--panel); }
  .panel legend { padding: 0 8px; font-size: 11px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .panel label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
  .panel label.wide, .panel .seg, .panel .hint, .panel .buys, .panel > p { grid-column: 1 / -1; }
  .panel input, .panel select { width: 100%; }
  .panel small { font-size: 11px; }
  .hint { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.5; }

  /* Segmentado en vez de <select> para lo que tiene 2-3 opciones: se ve todo de
     una y se elige con un toque, que en el telefono es la diferencia. */
  .seg { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line);
    border-radius: 10px; background: rgba(0,0,0,.35); }
  .seg button { flex: 1; border: 0; background: transparent; color: var(--muted);
    font-size: 12px; padding: 8px 10px; border-radius: 8px; }
  .seg button.active { background: rgba(255,255,255,.10); color: var(--ink); font-weight: 600; }

  /* Interruptor de verdad para el freeroll: una casilla no dice "esto cambia
     todo el formulario", y el freeroll esconde la entrada y la comisión. */
  .panel label.switch { display: flex; flex-direction: row; align-items: center; gap: 10px; cursor: pointer;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
    background: rgba(0,0,0,.25); }
  .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
  .switch .track { flex: none; width: 38px; height: 22px; border-radius: 999px;
    background: rgba(255,255,255,.12); border: 1px solid var(--line); position: relative;
    transition: background .16s ease; }
  .switch .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--muted); transition: transform .16s ease, background .16s ease; }
  .switch input:checked + .track { background: rgba(var(--oro-rgb),.3); border-color: rgba(var(--oro-rgb),.5); }
  .switch input:checked + .track .knob { transform: translateX(16px); background: var(--oro); }
  .switch input:focus-visible + .track { outline: 2px solid var(--oro); outline-offset: 2px; }
  .switch-text { display: flex; flex-direction: column; gap: 2px;
    font-size: 13px; font-weight: 600; color: var(--ink); }
  .switch-text small { font-size: 11px; font-weight: 400; color: var(--muted); }
  .switch:has(input:checked) { border-color: rgba(var(--oro-rgb),.45); background: rgba(var(--oro-rgb),.06); }

  /* Deslizadores para el ritmo: son números que se eligen comparando, y el
     rango ya dice cuáles son razonables. */
  .panel label.rng { gap: 6px; }
  .rng-top { display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12px; color: var(--muted); }
  .rng-top b { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
  .rng input[type=range] { width: 100%; height: 20px; margin: 0; padding: 0;
    accent-color: var(--oro); background: transparent; }

  .buys { display: grid; grid-template-columns: 1fr; gap: 12px; }
  /* El add-on todavía no existe: se ve, no se toca. */
  .buy.off { opacity: .45; }
  .buy.off .sw { cursor: default; }
  .buy { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
    background: rgba(0,0,0,.25); }
  .buy.on { border-color: rgba(var(--oro-rgb),.45); background: rgba(var(--oro-rgb),.06); }
  .buy p { margin: 4px 0 0; font-size: 11px; line-height: 1.45; }
  /* flex-direction explicito: .panel label pone column, y sin esto la casilla
     queda arriba del texto en vez de al lado. */
  .buy .sw { display: flex; flex-direction: row; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
  .buy .sw input { width: 16px; height: 16px; accent-color: var(--oro); }
  .buy-fields { display: flex; gap: 10px; margin-top: 10px; }
  .buy-fields label { flex: 1; display: flex; flex-direction: column; gap: 4px;
    font-size: 11px; color: var(--muted); }

  .buy-fields { flex-wrap: wrap; }
  .sw2 { display: flex; flex-direction: row; align-items: center; gap: 8px;
    font-size: 12px; color: var(--ink); cursor: pointer; }
  .sw2 input { width: 15px; height: 15px; accent-color: var(--oro); flex: none; }
  .sw2 small { font-weight: 400; }
  .buy-fields .sw2 { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 8px;
    font-size: 12px; color: var(--ink); cursor: pointer; }
  .buy-fields .sw2 input { width: 15px; height: 15px; accent-color: var(--oro); flex: none; }
  .buy-fields .hint { flex: 1 1 100%; margin: 2px 0 0; }
  .create-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
  .create-foot button { margin-left: auto; padding: 11px 22px; }
  .create-foot .err { margin: 0; font-size: 12px; }
  /* --- panel de jugadores (admin) --- */
  /* --- estadisticas --- */
  /* Dos grupos, no ocho cajas iguales estiradas a lo ancho: arriba el resultado
     —lo que se mira—, abajo cómo jugás. Y con tope de ancho: una caja de 400px
     para decir "396" es un cartel, no un dato. */
  .statgrid { display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); }
  .statbox { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
    background: var(--panel); }
  .statbox span { display: block; font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
  .statbox strong { font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .statbox small { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }
  .statbox.up strong { color: var(--green); }
  .statbox.down strong { color: var(--red); }
  .statbox.hero { background: var(--panel); }
  .statbox.hero strong { font-size: 24px; }
  /* Las de estilo son porcentajes y se leen distinto: más chicas y en fila. */
  .statbox:not(.hero) { padding: 10px 12px; }
  .statbox:not(.hero) strong { font-size: 15px; }

  .scope { display: flex; align-items: center; gap: 9px; margin-left: auto; }
  .scope-label { font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--muted); font-weight: 700; }

  /* --- historial --- */
  /* Una fila de altura FIJA. El board usaba `.card` a secas, que se mide en
     `cqmin` contra el contenedor del tapete: fuera de él cae al viewport, o sea
     cinco cartas de 90px por fila. Y las manos sin flop quedaban en una franja
     de 30px, así que la misma lista tenía dos alturas. */
  .handrow .board2 { display: flex; gap: 3px; align-items: center;
    width: 158px; height: 34px; flex: none; }
  .handrow .board2 .card { width: 24px; height: 33px; border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,.5); }
  .handrow .board2 .card b { font-size: 12px; }
  .handrow .board2 .card i { font-size: 9px; }
  .handrow .sinflop { font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); }
  .handrow .where { display: flex; gap: 5px; flex-wrap: wrap; }
  .handrow .where .tag.sd { color: var(--amber); border-color: rgba(var(--amber-rgb),.3); }
  .handrow .rnum { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
  .handrow .rnum span { display: block; font-size: 9px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); }
  /* La caja de la fila. El reparto interno lo pone .manos-lista .handrow: hasta
     #1102 esto era un grid de seis columnas a lo ancho de la pantalla, con el
     sobrante cayendo entero en la de las etiquetas. */
  .handrow { padding: 10px 14px; border: 1px solid var(--line);
    border-radius: 12px; background: var(--panel); }
  .handrow .mini2 { display: flex; gap: 3px; }
  .handrow .mini2 .card { width: 22px; height: 30px; border-radius: 4px;
    font-size: 11px; box-shadow: none; }
  .handrow .mini2 .card b { font-size: 11px; }
  .handrow .mini2 .card i { font-size: 9px; }
  .handrow .when { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .handrow .net { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
    text-align: right; }
  .handrow .net.up { color: var(--green); }
  .handrow .net.down { color: var(--red); }

  /* --- Mis manos: filtros y reparto de pantalla (#1102) ---
     La fila era un grid de seis columnas a lo ancho de la pantalla, con
     `minmax(0,1fr)` en la de las etiquetas: todo el sobrante se lo comia esa
     columna, asi que en un monitor ancho quedaba un hueco enorme entre el tag
     CASH y el board, y cada mano ocupaba una franja de lado a lado para decir
     cinco datos. Ahora la lista es una columna angosta y el replay va al lado. */
  .manos-filtros { display: flex; flex-wrap: wrap; align-items: flex-end;
    gap: 10px 18px; margin-top: 14px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--panel); }
  .mf-grupo { display: flex; flex-direction: column; gap: 5px; }
  .mf-label { font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--muted); font-weight: 700; }
  .manos-filtros .chips { display: flex; flex-wrap: wrap; gap: 5px; }
  .manos-filtros .chips button { font-size: 11px; padding: 4px 10px; }
  .mf-limpiar { margin-left: auto; font-size: 11px; }

  /* Las siete cajas de estadísticas entraban en dos filas con un hueco enorme
     al final de la segunda, y empujaban la lista hasta la mitad de la pantalla:
     el mismo desperdicio que este issue vino a arreglar, corrido de lugar. Acá
     se reparten a lo ancho y se achican para que la primera mano se vea sin
     scrollear. */
  #handsView .statgrid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-top: 14px; }
  #handsView .statbox { padding: 9px 12px; }
  #handsView .statbox strong, #handsView .statbox.hero strong { font-size: 17px; }
  #handsView .statbox .bb2 b { font-size: 17px; }
  #handsView .statbox span { margin-bottom: 2px; }
  #handsView .statbox small { margin-top: 1px; }

  /* En el teléfono, por el MISMO motivo que las píldoras del lobby: cuatro
     etiquetas con su fila de chips debajo se comían media pantalla, y a lo que
     se entra es a ver las manos. De a dos, y los chips se deslizan (la regla
     de .chips que hace eso vive en el @media de más arriba).

     Va acá abajo y no en aquel bloque: aquel está ANTES de la regla base de
     .manos-filtros y, con la misma especificidad, ganaba la de después. */
  @media (max-width: 700px) {
    .manos-filtros { display: grid; grid-template-columns: 1fr 1fr;
      align-items: start; padding: 10px; gap: 10px; }
    .mf-grupo { min-width: 0; }
    /* Un renglón por grupo, deslizable: envolviendo, cada grupo mide distinto y
       la barra vuelve a crecer. La regla general de .chips ya hace esto en el
       teléfono, pero .manos-filtros .chips (0,2,0) le ganaba. */
    .manos-filtros .chips { flex-wrap: nowrap; overflow-x: auto;
      scrollbar-width: none; }
    .manos-filtros .chips::-webkit-scrollbar { display: none; }
    .manos-filtros .chips button { flex: 0 0 auto; white-space: nowrap; }
    .mf-limpiar { grid-column: 1 / -1; margin-left: 0; justify-self: start; }
  }

  .manos-split { display: grid; gap: 16px; margin-top: 14px;
    grid-template-columns: minmax(0, 1fr); align-items: start; }
  /* Un cuarto para la lista y tres cuartos para la mesa. El quiebre vive SOLO
     aca: dos columnas de 300px no son dos columnas, son dos listas ilegibles. */
  @media (min-width: 1000px) {
    .manos-split { grid-template-columns: minmax(260px, 1fr) 3fr; }
    .manos-col { position: sticky; top: 0; }
    .manos-lista { max-height: calc(100vh - 260px); overflow-y: auto;
      padding-right: 4px; }
  }
  .manos-cuantas { font-size: 11px; color: var(--muted); margin-bottom: 8px;
    font-variant-numeric: tabular-nums; }
  .manos-panel { border: 1px solid var(--line); border-radius: 14px;
    padding: 14px; background: var(--panel);
    min-height: 320px; display: flex; flex-direction: column; }
  .manos-vacio { margin: auto; text-align: center; display: flex;
    flex-direction: column; gap: 6px; }
  .manos-vacio strong { font-size: 15px; }
  .manos-vacio span { font-size: 12px; color: var(--muted); max-width: 320px; }
  .manos-rp { display: flex; flex-direction: column; gap: 10px; }
  .manos-rp-head { display: flex; align-items: flex-start; gap: 12px; }
  .manos-rp-head h3 { font-size: 15px; }
  .manos-rp-head p { font-size: 11px; }
  .manos-rp-head button { margin-left: auto; }
  /* El tapete se mide en cqmin contra su contenedor: sin esto cae al viewport
     y el replay sale con cartas del tamano de la pantalla. */
  .manos-rp .stage { container-type: size; aspect-ratio: 1.55; width: 100%;
    max-height: 60vh; }

  /* La fila: tres renglones en vez de seis columnas, y la fila ENTERA es el
     boton — en una columna angosta, un "Ver" al final es un blanco de ochenta
     pixeles al borde para la unica accion que la fila tiene. */
  .handrow { width: 100%; text-align: left; font: inherit; color: inherit;
    cursor: pointer; }
  .handrow:hover { border-color: rgba(255,255,255,.18); }
  .handrow.activa { border-color: var(--amber);
    box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb),.35); }
  .manos-lista .handrow { display: flex; flex-direction: column; gap: 6px;
    padding: 9px 11px; }
  .manos-lista .hr-alto, .manos-lista .hr-bajo { display: flex;
    align-items: center; justify-content: space-between; gap: 10px; }
  .manos-lista .board2 { width: auto; height: 30px; }
  .manos-lista .board2 .card { width: 21px; height: 29px; }
  .manos-lista .board2 .card b { font-size: 11px; }
  .manos-lista .board2 .card i { font-size: 8px; }
  .manos-lista .rnum { display: flex; align-items: baseline; gap: 5px;
    font-size: 12px; }
  .manos-lista .rnum span { display: inline; }
  /* Las etiquetas NO envuelven. En una columna de 260px, el nombre largo de un
     torneo más el tag de showdown se irían a un segundo renglón y esa fila
     mediría distinto que las demás: la lista sube y baja y deja de poder
     barrerse, que es medio issue. Se corta con puntos suspensivos. */
  .manos-lista .where { gap: 4px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
  .manos-lista .where .tag { overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; min-width: 0; }
  /* Y la fecha tampoco: es de ancho conocido y pelea con el neto por el lugar. */
  .manos-lista .when { white-space: nowrap; }

  /* bb/100 partido en dos cuando el filtro esta en "todo": cash y torneo no se
     promedian juntos, asi que se muestran los dos numeros y no uno inventado. */
  /* Issue #1697 — una caja partida lleva DOS números, y los de plata son anchos:
     "+124.300 -40.000" no entra en los 146px que le tocan a una caja cuando hay
     ocho en la fila. Se cortaba en seco, sin puntos suspensivos ni scroll, así
     que el segundo número aparecía a medias y parecía otro número.
     Ocupa dos columnas de la grilla, que además es coherente con que sea el dato
     que la pantalla quiere que mires primero. */
  .statbox:has(.bb2) { grid-column: span 2; }
  .statbox .bb2 { display: flex; gap: 12px; align-items: baseline; }
  .statbox .bb2 b { font-size: 20px; font-variant-numeric: tabular-nums; }
  .statbox .bb2 b.up { color: var(--green); }
  .statbox .bb2 b.down { color: var(--red); }
  .serie-row.paused { opacity: .6; }
  .serie-row .badge2 { font-size: 10px; padding: 2px 7px; border-radius: 5px;
    background: rgba(var(--amber-rgb),.18); color: var(--amber); }
  .ptable { display: flex; flex-direction: column; gap: 8px; }
  /* Perfil: tarjetas de datos, una fila por dato. */
  /* --- perfil ---
     Con tope de ancho: los pares etiqueta/valor se estiraban a la pantalla
     entera y el valor quedaba a 1.800px de su etiqueta. Un texto que se lee
     tiene un ancho máximo. */
  /* El tope de 760px venía de cuando el perfil eran cuatro datos y dos
     tarjetas: con esa poca cosa, estirarla a la pantalla entera dejaba cada
     valor a un monitor de distancia de su etiqueta. Ahora hay siete secciones y
     el mismo tope las apila en una columna angosta con media pantalla vacía al
     lado, que es el desperdicio contrario. En ancho se reparten en dos. */
  .prof-wrap { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr);
    max-width: 760px; margin: 0 auto; }
  @media (min-width: 1180px) {
    .prof-wrap { max-width: 1180px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Quién sos y cuánto jugaste van a lo ancho: son la cabecera de todo lo
       demás, no una sección más al lado de otra. */
    .prof-wrap > .prof-hero, .prof-wrap > .prof-warn,
    .prof-wrap > .statgrid, .prof-wrap > #perfilPrefs,
    .prof-wrap > .pcard-ancha { grid-column: 1 / -1; }
  }
  .prof-wrap .pcard .statgrid { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  .prof-wrap .pcard .statbox { padding: 10px 12px; }
  .prof-wrap .pcard .statbox.hero strong { font-size: 19px; }
  .prof-hero { display: flex; align-items: center; gap: 14px; padding: 18px;
    border: 1px solid var(--line); border-radius: 16px;
    background: linear-gradient(135deg, rgba(73,197,142,.10), transparent 55%), #0b0d0d; }
  .prof-avatar { display: grid; place-items: center; flex: none;
    width: 54px; height: 54px; border-radius: 17px;
    background: linear-gradient(160deg, var(--oro), var(--oro-hondo)); color: #17130a;
    font-size: 24px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
  /* Issue #1336 — subir la foto, pegado a la que se ve. La `<input type=file>`
     va escondida y el `<label>` hace de botón: el control nativo no se puede
     estilar y se ve distinto en cada navegador. */
  .prof-foto { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
  .fotobtn { padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: 9px;
    font-size: 12px; cursor: pointer; background: rgba(255,255,255,.04); }
  .fotobtn:hover { background: rgba(255,255,255,.09); }
  .prof-foto button { padding: 6px 10px; font-size: 12px; }
  #fotoError { flex-basis: 100%; margin: 2px 0 0; font-size: 11px; }
  /* La foto llena el redondel: recortada al centro, como el avatar. */
  .prof-avatar img, .pod .avatar img, .pwho .avatar img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .prof-id { min-width: 0; }
  .prof-id h3 { margin: 0; font-size: 19px; letter-spacing: -.015em; }
  .prof-id p { margin: 2px 0 0; font-size: 12px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; }
  .prof-badges { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
  .prof-badges .tag.admin { color: var(--ink); background: rgba(255,255,255,.12); }
  .prof-badges .tag.ok { color: var(--ink); background: rgba(255,255,255,.12); }
  .prof-badges .tag.warn { color: var(--red); border-color: rgba(220,80,80,.35); }

  /* Sin vínculo no se puede jugar: es un aviso, no un dato más. */
  .prof-warn { display: flex; flex-direction: column; gap: 4px; padding: 13px 15px;
    border: 1px solid rgba(var(--amber-rgb),.32); border-radius: 12px;
    background: var(--amber-soft); font-size: 12px; line-height: 1.5; }
  .prof-warn strong { color: var(--amber); font-size: 13px; }
  .prof-warn span { color: var(--muted); }

  .prof-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

  .pcard { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
    background: rgba(255,255,255,.02); margin-bottom: 12px; }
  .pcard h3 { margin: 0 0 10px; font-size: 14px; }
  .prow { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0;
    border-top: 1px solid rgba(255,255,255,.05); font-size: 13px; }
  .prow:first-of-type { border-top: 0; }
  .prow strong { font-variant-numeric: tabular-nums; text-align: right; }
  .prow2 { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 14px;
    align-items: center; padding: 12px 14px; border: 1px solid var(--line);
    border-radius: 12px; background: var(--panel); }
  .prow2 .pwho { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .prow2 .pwho .avatar { width: 30px; height: 30px; font-size: 13px; }
  .prow2 .pname2 { font-weight: 650; font-size: 14px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .prow2 .pmeta { font-size: 11px; color: var(--muted); }
  .prow2 .pchips { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--oro); text-align: right; }
  .prow2 .pchips small { display: block; font-size: 10px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .prow2.broke .pchips { color: var(--red); }
  /* Issue #1663 — el rojo de verdad. `.broke` es "se quedó sin fichas" (cero);
     esto es "debe plata al club", que no es lo mismo y no puede pintarse igual. */
  .prow2.en-rojo .pchips { color: var(--red); font-weight: 700; }
  .prow2.confia .pchips::after { content: " ·bancado"; font-size: .7em; opacity: .75; }
  #statChips.debiendo { color: var(--red); }
  .give { display: flex; gap: 6px; align-items: center; }
  .give input { width: 92px; text-align: right; }
  .give button { padding: 7px 10px; font-size: 12px; }
  .give .quick { color: var(--muted); background: rgba(255,255,255,.05); }
  /* Borrar un bot está al lado de "Dar": contorno y no relleno, para que el
     botón que se aprieta seguido siga siendo el más visible de los dos. */
  .give .danger { background: transparent; border-color: rgba(178,59,59,.5); color: #e08585;
    font-weight: 400; }
  .give .danger:hover { background: rgba(178,59,59,.18); }
  #plTabs b { font-variant-numeric: tabular-nums; opacity: .7; font-weight: 600; }
  .ptag2 { font-size: 10px; padding: 2px 7px; border-radius: 5px;
    background: rgba(var(--amber-rgb),.16); color: var(--amber); }
  @media (max-width: 620px) {
    .prow2 { grid-template-columns: 1fr auto; }
    .prow2 .give { grid-column: 1 / -1; justify-content: flex-end; }
  }
  .admin-title { font-weight: 700; margin: 14px 0 8px; }
  .form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; margin-bottom: 10px; }
  .form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
  .form input, .form select { width: 100%; }
  .form select:disabled, .form option:disabled { opacity: .4; }

  /* --- el reglamento del club, adentro del cliente (#1078) ---------------
     Reusa la caja de TatoClub (`.tc`) para el encabezado; lo de acá es sólo el
     cuerpo. Ancho de lectura acotado: un reglamento a todo el ancho de una
     pantalla grande obliga a barrer con la vista y nadie lo lee. */
  /* La entrada al reglamento vive en la cabecera del TatoClub, no en la barra
     de arriba: ahí van cuatro solapas y ninguna más. Es más ancho que las
     flechas del mes porque lleva palabra, no un signo. */
  .tc-reglas { width: auto; padding: 0 12px; font-size: 12px; letter-spacing: .01em; }

  .reglas-vigencia { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
  .reglas-vigencia b { color: var(--amber); }
  .reglas-bloque { max-width: 68ch; margin: 0 0 20px; }
  .reglas-bloque h3 { font-size: 15px; letter-spacing: .01em; margin: 0 0 8px; }
  .reglas-bloque p { margin: 0 0 8px; line-height: 1.55; color: var(--ink); }
  .reglas-bloque ul { margin: 0 0 8px; padding-left: 20px; }
  .reglas-bloque li { margin-bottom: 5px; line-height: 1.5; }
  .reglas-bloque strong { color: var(--amber); font-weight: 600; }
  /* El período cerrado va apagado: está para consultarlo, no para confundirlo
     con lo que rige hoy. */
  .reglas-antes { max-width: 68ch; margin: 24px 0 0; padding-top: 16px;
    border-top: 1px solid var(--line); }
  .reglas-antes summary { cursor: pointer; color: var(--muted); font-size: 13px; }
  .reglas-antes[open] summary { margin-bottom: 12px; }
  .reglas-antes .reglas-bloque { opacity: .72; }
  .reglas-pie { max-width: 68ch; margin: 24px 0 0; color: var(--muted); font-size: 12px; }

  @media (max-width: 700px) {
    /* En teléfono el ancho lo pone la pantalla, no la tipografía. */
    .reglas-bloque, .reglas-antes, .reglas-pie { max-width: none; }
    .reglas-bloque h3 { font-size: 14px; }
  }

  /* --- Issue #1456: la memoria de un torneo fijo --------------------------
     Tres insignias: quién ganó la última, quién la ganó más veces y quién se
     llevó más plata. Van en fila y se envuelven: en el teléfono entran de a una
     y media, y apilarlas a propósito sería decidir por el ancho de alguien.

     Cada una es ícono + nombre grande + rótulo chico. El NOMBRE es lo que se
     lee de reojo —"¿a quién le tengo que ganar?"— y el rótulo explica de qué
     insignia se trata sin ocupar el lugar del nombre. */
  .insignias { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin: 10px 0 2px; padding-top: 10px; border-top: 1px solid var(--line); }
  .insignias-rot { flex-basis: 100%; font-size: 9px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted); }
  .ins { display: flex; align-items: center; gap: 6px; min-width: 0;
    padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px;
    background: rgba(255,255,255,.03); }
  .ins-ico { font-style: normal; font-size: 13px; line-height: 1; flex: none; }
  .ins-txt { display: flex; flex-direction: column; min-width: 0; }
  .ins-txt b { font-size: 12px; font-weight: 650; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .ins-txt em { font-style: normal; font-size: 9px; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap; }

  /* --- insignias de ganador (#1090) --------------------------------------
     Hasta cinco, de la más reciente a la más vieja. */
  .tc-insignias { display: flex; align-items: center; gap: 2px; justify-content: flex-end;
    font-size: 12px; line-height: 1; overflow: hidden; }
  /* #1801 — eran emoji, y por eso el trofeo y la medalla no se alineaban: cada
     emoji trae sus propias métricas. Ahora son SVG con caja fija, así que la
     alineación no depende de la tipografía. */
  .tc-insignia { font-style: normal; }
  .tc-insignias .chapa { width: 15px; height: 15px; }
  /* El contador de las que no entran: apagado, porque no es un título más. */
  .tc-insignias-mas { font-style: normal; font-size: 10px; color: var(--muted);
    margin-left: 2px; }

  @media (max-width: 700px) {
    /* En el teléfono no entran cinco al lado del nombre. Entran las que quepan
       y el resto se cuenta: la fila no crece de alto y no se pierde nada —
       tocando al jugador se ven todas. */
    .tc-fila { grid-template-columns: 20px minmax(0, 1fr) 44px 40px 24px; }
    /* La columna de jugados se va antes que las insignias: el número de torneos
       ya está en el detalle, y un título ganado no. */
    .tc-fila .tc-jugados { display: none; }
    .tc-insignias { flex-wrap: nowrap; }
  }

  /* --- perfil editable (#1104) ---
     El perfil pasó de ser una pantalla de sólo lectura a una donde se cambian
     cosas, así que necesita la forma que tiene una lista de ajustes: a la
     izquierda QUÉ es y por qué importa, a la derecha las opciones. Un
     `<label>` con los botones al lado no alcanzaba: varias preferencias
     necesitan una línea de explicación, y sin ella "Al entrar, abrir en"
     obliga a probar para entender qué hace. */
  .pref-fila { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 11px 0; border-top: 1px solid var(--line); }
  .pref-fila:first-of-type { border-top: 0; }
  .pref-que { flex: 1 1 240px; min-width: 0; }
  .pref-que strong { display: block; font-size: 13px; }
  .pref-que span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
  .pref-nota { font-size: 11px; margin: 0 0 10px; }
  .pref-fila .chips { flex-wrap: wrap; }
  .pref-fila .chips button { font-size: 11px; padding: 4px 10px; }

  /* El cambio de nombre pide la contraseña, así que es un formulario y no un
     botón: se despliega recién al pedirlo para no ocupar lugar mientras tanto. */
  .pref-nombre { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    padding: 12px; margin-top: 4px; border: 1px solid var(--line); border-radius: 10px; }
  .pref-nombre label { display: flex; flex-direction: column; gap: 4px;
    font-size: 11px; color: var(--muted); }
  .pref-nombre input { width: 190px; }
  .pref-nombre-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pref-nombre-pie .err { font-size: 11px; }

  /* Las insignias del club. Las mismas que la tabla del TatoClub, en el lugar
     donde alguien va a mirar LO SUYO. */
  .ins-lista { display: flex; flex-wrap: wrap; gap: 7px; }
  /* --- Issue #1468: el código de referido ------------------------------- */
  .refrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  /* El código se lee de un vistazo y se puede seleccionar entero de un toque:
     es lo que el jugador va a pegar en un chat, y en el teléfono `user-select`
     parcial obliga a pelear con las manijas de selección. */
  .refcode { flex: 0 1 auto; padding: 8px 14px; border-radius: 12px;
    border: 1px solid rgba(var(--oro-rgb), .35); background: rgba(var(--oro-rgb), .07);
    color: var(--oro-claro); font: 600 17px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .06em; user-select: all; }
  .refbar { height: 6px; margin: 10px 0 6px; border-radius: 999px;
    background: rgba(255,255,255,.08); overflow: hidden; }
  .refbar i { display: block; height: 100%; border-radius: 999px; background: var(--oro); }
  /* #1481 — el progreso hacia el bonus, abajo del contador del código. */
  .ref-bonus { margin-top: 8px; }
  /* Lo que hay para cobrar va en oro: es lo que se gana, que es justamente el
     trabajo que el oro conserva fuera de la marca (ver #1106). */
  .ref-listo { color: var(--oro-claro); }
  .cj-bonus { border-color: rgba(var(--oro-rgb), .35); background: rgba(var(--oro-rgb), .05); }

  /* --- Issue #1490: el formulario de quien arma SU torneo ---------------- */
  /*
     Un torneo custom no es del club: no cobra comisión, no puntúa para el
     ranking y no puede ser el Campeones. Esos campos se esconden acá y no en
     JS por dos razones: es una regla declarativa —"esto es del club, esto no"—
     y `lobby.js` ya está en su tope de líneas, así que meterla ahí obligaba a
     recortar comentarios de otra cosa para que entrara.

     Esconderlos NO es la defensa. El servidor recorta lo que un creador puede
     mandar con una allowlist (`protocol.js`) y el lobby vuelve a comprobar las
     reglas al crear Y al editar. Acá sólo se evita ofrecerle a alguien algo
     que le va a rebotar.

     `body[data-solo-suyo]` lo pone crear.js cuando el que mira puede armar su
     torneo y no es admin. Un admin lo ve todo, como siempre. */
  body[data-solo-suyo] #createView [data-club] { display: none; }
  /* La bajada del formulario cambia con quién mira: las dos están en el html y
     el CSS elige, que es una línea menos de JS en un archivo sin lugar. */
  body[data-solo-suyo] .create-head .club-dice,
  body:not([data-solo-suyo]) .create-head .suyo-dice { display: none; }
  /* El botón propio del creador se esconde con `hidden` desde crear.js, no
     desde acá: el guard de #1035 cuenta las solapas visibles de la barra por
     ese atributo, y una escondida sólo por CSS le mentiría. */
  /* Quien ya tiene el permiso se distingue de un vistazo: la lista del club
     tiene veinte filas y el botón es el mismo para dar y para quitar. */
  .give .armador { border-color: rgba(var(--oro-rgb), .45); color: var(--oro-claro); }
  /* #1801 — esto se llamaba `.ins` y chocaba con la tira del lobby de torneo,
     que usa el mismo nombre más arriba en este archivo. Misma especificidad y
     este bloque va después, así que la tira salía pintada con el ámbar de acá:
     medido en el navegador, su borde daba rgba(241,189,94,.3) en vez del
     `var(--line)` que ella declara. Renombrado el que se estaba rediseñando.

     Ya no es una píldora de texto: es el ícono, y el título va en el popup. */
  .chapa { position: relative; display: inline-flex; align-items: center;
    justify-content: center; width: 30px; height: 30px; padding: 0; flex: none;
    border: 0; background: none; color: inherit; }
  .chapa img { width: 100%; height: 100%; display: block; }
  .chapa-tocable { cursor: pointer; border-radius: 10px; }
  .chapa-tocable:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

  /* El popup. Sale del hover, del foco de teclado y de `.abierta`, que es lo que
     pone el toque en una pantalla sin mouse (insignias-club.js). */
  /* Anclado al borde IZQUIERDO de la insignia y no centrado en ella: centrado,
     la primera insignia de la lista empuja el popup fuera de la pantalla y el
     título sale cortado por el principio — medido, se perdían los primeros 55px
     de "Ganador Torneo de Campeones". Las insignias se alinean a la izquierda,
     así que anclar ahí es lo único que no se sale por ningún lado. */
  /* Hacia ABAJO y no hacia arriba, que es lo convencional en un tooltip: las
     insignias van justo debajo del `<h3>` de la tarjeta, así que abriendo
     hacia arriba el popup tapa el título de la propia sección. Abajo no hay
     nada que tapar — la lista es lo último de la tarjeta. */
  .chapa-pop { position: absolute; top: calc(100% + 7px); left: 0;
    z-index: 5;
    /* `max-content` con tope: sin esto el ancho natural de un absoluto se
       exprime contra su contenedor —la insignia, que mide 30px— y el título
       se parte en cuatro renglones de una palabra. */
    width: max-content; max-width: min(260px, 70vw);
    padding: 6px 10px; border-radius: 8px;
    font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--amber);
    border: 1px solid rgba(var(--amber-rgb),.3);
    background: #14120e;
    opacity: 0; visibility: hidden; transition: opacity .12s ease; }
  .chapa-tocable:hover .chapa-pop,
  .chapa-tocable:focus-visible .chapa-pop,
  .chapa-tocable.abierta .chapa-pop { opacity: 1; visibility: visible; }
  @media (prefers-reduced-motion: reduce) { .chapa-pop { transition: none; } }

  /* En una pantalla angosta un título largo se sale por el costado, así que ahí
     el popup deja de centrarse en la insignia y se ancla al borde de la lista. */
  @media (max-width: 480px) { .chapa-pop { min-width: 140px; } }

  /* Mes a mes: una tabla de verdad, porque son columnas que se comparan entre
     filas. En tarjetas habría que leer cada mes por separado para ver si uno
     viene mejorando, que es justo la pregunta. */
  .ptabla { width: 100%; border-collapse: collapse; font-size: 12px; }
  .ptabla th { text-align: left; font-size: 10px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); font-weight: 700;
    padding: 0 10px 6px 0; }
  .ptabla td { padding: 7px 10px 7px 0; border-top: 1px solid var(--line);
    font-variant-numeric: tabular-nums; }
  .ptabla td:first-child { text-transform: capitalize; }
  .ptabla td.up { color: var(--green); }
  .ptabla td.down { color: var(--red); }
  .prof-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

/* Issue #1155 — los derechos de refiche de cada clasificado al Campeones.
   Una fila por persona, con el texto del reglamento a la vista: lo que se
   escribe abajo tiene que poder leerse contra la regla que lo justifica. */
.campeones { margin: 10px 0 0; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: rgba(0,0,0,.25); display: flex;
  flex-direction: column; gap: 10px; }
.camp-cargar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.camp-fila { display: grid; gap: 8px; align-items: center;
  grid-template-columns: 2.5em minmax(6em, 1fr) minmax(7em, auto) auto auto;
  padding: 7px 0; border-top: 1px solid var(--line); }
.camp-fila:first-child { border-top: 0; }
.camp-puesto { font-weight: 700; color: var(--oro); font-variant-numeric: tabular-nums; }
.camp-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-regla { font-size: 12px; color: var(--muted); }
.camp-fila label { display: flex; flex-direction: column; gap: 2px; font-size: 11px;
  color: var(--muted); }
.camp-fila input { width: 6em; }
@media (max-width: 640px) {
  .camp-fila { grid-template-columns: 2.5em 1fr; }
  .camp-regla { grid-column: 1 / -1; }
}

/* Issue #1157 — la marca de prueba. Color propio y bien distinto del oro del
   club: es lo que separa una mesa donde se juega plata de una donde no, y
   confundirlas con pesos reales adentro es el peor malentendido posible. */
.tag.prueba { border-color: #b2792b; color: #e0a44e; background: rgba(178,121,43,.14);
  font-weight: 700; letter-spacing: .03em; }
.tag.campeones { border-color: var(--oro); color: var(--oro); background: rgba(var(--oro-rgb),.12);
  font-weight: 700; }
.tag.satelite { border-color: #6fc3a0; color: #6fc3a0; background: rgba(111,195,160,.12); }
/* Las casillas que /crear.js inyecta, para que no queden sueltas en el formulario. */
.marcas { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.satelite-panel { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.satelite-panel .hint { flex-basis: 100%; margin: 0; }

/* Issue #1400 — el selector de ilustración del torneo. Ocupa el ancho del
   formulario y scrollea en horizontal: el catálogo crece cada vez que alguien
   deja un archivo nuevo, y no puede empujar el resto del formulario hacia
   abajo cada vez que eso pasa. */
.laminas { grid-column: 1 / -1; margin-top: 12px; }
.lam-rotulo { display: block; font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px; }
.lam-fila { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.lam-op { flex: none; width: 62px; height: 72px; padding: 0; overflow: hidden;
  border: 2px solid var(--line); border-radius: 10px; background: var(--panel);
  cursor: pointer; transition: border-color .15s, opacity .15s; opacity: .62; }
.lam-op img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lam-op:hover { opacity: .85; }
/* La elegida se marca con el oro del club y a opacidad plena: con seis o siete
   miniaturas parecidas, un borde gris no alcanza para ver cuál está puesta. */
.lam-op.activa { border-color: var(--oro); opacity: 1; }
.lam-op:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 2px; }
/* "Auto" y no "Automática": en un cuadro de 62px la palabra entera se desborda,
   y la explicación de qué hace ya está en la ayuda de abajo y en el title. */
.lam-auto { display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); text-align: center; padding: 4px; }
.lam-op.lam-auto.activa { color: var(--ink); }
.sw2 small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }