/* ==========================================================================
   El Camino DT — EL CLUB Y LA CARRERA, CON LA OFICINA DEL MODO
   --------------------------------------------------------------------------
   5/10/2026. `carrera.html` usa el marcado de `oficina-seleccion.html` y
   toma sus reglas de `seleccion.css`; `club.html` es la sala de la comisión
   desde el 11/10/2026 (`comision-club.css`) y de acá toma el escudo y la marca. Acá va sólo
   lo que el club tiene y la selección no: el escudo en vez de la bandera, el
   marcador de los resultados (que en el modo cuelga de `.en-modo-seleccion`),
   los logos de las marcas y la tribuna.
   ========================================================================== */

/* El escudo en la franja, entero y sin el marco de la bandera. */
:is(.cdir, .carclub) .oficlub__escudo {
  width: 56px; height: 56px; object-fit: contain; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 6px 12px rgb(0 0 0 / 0.5));
}
/* Los escudos chicos de las listas, en el lugar del paño. */
:is(.cdir, .carclub) .oficlub__esc { width: 28px; height: 28px; object-fit: contain; flex: none; }
:is(.cdir, .carclub) .ofi3__cr-eq .oficlub__esc { width: 34px; height: 34px; }
:is(.cdir, .carclub) .oficlub__rec-esc { width: 34px; height: 34px; object-fit: contain; box-shadow: none; border-radius: 0; }

/* El marcador del resultado, el mismo del modo. */
:is(.cdir, .carclub) .marca {
  display: inline-grid; place-items: center; min-width: 3rem; height: 1.6rem; padding: 0 6px;
  border: 1px solid var(--line-strong); border-radius: 5px; background: none;
  font-size: var(--fs-md); font-weight: 800; font-style: normal; line-height: 1; letter-spacing: 0;
  font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap;
}
:is(.cdir, .carclub) .marca--g { border-color: var(--verde-400); color: var(--verde-300); }
:is(.cdir, .carclub) .marca--p { border-color: var(--danger); color: var(--clay-300); }
.carclub .ofisel__pp--e { border-left-color: var(--line-strong); }

/* La tribuna, el otro juez, debajo del reloj. */
.oficlub__tribuna { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px var(--sp-3); }
.oficlub__tribuna > b { font-size: var(--fs-lg); color: var(--text-primary); }
.oficlub__tribuna--bien > b { color: var(--verde-300); }
.oficlub__tribuna--mal > b { color: var(--clay-300); }
.oficlub__tribuna .label { justify-self: end; text-align: right; }
.oficlub__tribuna .ofi3__nota { grid-column: 1 / -1; margin-top: 0; }
.oficlub__barra { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--ink-800, rgb(255 255 255 / 0.08)); position: relative; overflow: hidden; }
.oficlub__barra::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 1%); border-radius: inherit; background: var(--accent); }
.oficlub__tribuna--bien .oficlub__barra::after { background: var(--verde-400); }
.oficlub__tribuna--mal .oficlub__barra::after { background: var(--danger); }



/* Las solapas del club: cada panel rueda dentro de la tarjeta. */
.oficlub__panel { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-2); }
.oficlub__panel .ofi3__ir { margin-top: var(--sp-2); flex-wrap: wrap; }
.oficlub__panel .ofi3__nota { margin-top: 0; }
.oficlub__panel .sel-tit { margin-top: var(--sp-2); }

/* La marca: el logo como máscara (era de `camino.css`) y las ofertas. */
:is(.cdir, .carclub) .marca-logo {
  width: 44px; height: 44px; flex: none; color: var(--text-primary); background-color: currentColor;
  -webkit-mask: var(--marca) center / contain no-repeat; mask: var(--marca) center / contain no-repeat;
}
:is(.cdir, .carclub) .marca-logo--sm { width: 28px; height: 28px; }
.oficlub__marca { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.oficlub__marca b { display: block; font-size: var(--fs-lg); color: var(--text-primary); }
.oficlub__marca small { color: var(--text-secondary); font-size: var(--fs-xs); }
.oficlub__ofertas { margin-top: var(--sp-2); }
.oficlub__ofertas .ofisel__oferta { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-hairline); border-radius: var(--r-md); background: var(--bg-raised); }
.oficlub__oferta-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.oficlub__oferta-txt b { color: var(--text-primary); }
.oficlub__oferta-txt .sube { font-size: var(--fs-sm); font-weight: 600; color: var(--verde-300); }
.oficlub__oferta-txt small { font-size: var(--fs-xs); color: var(--text-muted); }


/* ==========================================================================
   CARRERA: la misma grilla, con la temporada arriba y la historia al lado
   ========================================================================== */
.carclub__ano-sel { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.carclub__ano-sel .label { white-space: nowrap; }
.carclub__campeones { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.carclub__campeones li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: 6px 0; border-bottom: 1px solid var(--line-hairline); font-size: var(--fs-sm); }
.carclub__campeones li > span:first-child { color: var(--text-secondary); }
.carclub__campeones li > :last-child { display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); font-weight: 600; text-align: right; }
.carclub__campeones .carclub__mio > :last-child { color: var(--accent-texto); }
.carclub__campeones .carclub__pend { color: var(--text-muted); font-weight: 500; font-style: italic; }
.carclub__campeones .oficlub__esc { width: 22px; height: 22px; }

/* La tira de temporadas: el año elegido se marca como el «hoy». */
.carclub__temp { cursor: pointer; }
.carclub__temp .ofisel__ano-n .label { display: inline-flex; align-items: center; gap: 6px; }
.carclub__temp .oficlub__esc { width: 20px; height: 20px; }
@media (hover: hover) { .carclub__temp:hover { border-color: var(--line-strong) !important; } }
.carclub__temp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* La pirámide, en la solapa del recorrido. */
.carclub__escalones { margin: 0 0 var(--sp-4); padding: 0; list-style: none; display: grid; gap: 4px; }
.carclub__escalon { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: 6px var(--sp-3); border-radius: var(--r-md); background: var(--bg-raised); color: var(--text-secondary); text-decoration: none; font-size: var(--fs-sm); }
.carclub__escalon img { width: 26px; height: 26px; object-fit: contain; }
.carclub__escalon b { color: var(--text-primary); font-weight: 600; }
.carclub__escalon--mio { box-shadow: inset 3px 0 0 var(--accent); }
.carclub__escalon--mio b { color: var(--accent-texto); }
@media (hover: hover) { a.carclub__escalon:hover { background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-raised)); } }

/* La vitrina del club: el estante con un trofeo por competencia. */
.carclub__estante { grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); }
.carclub__estante .vitc__pieza small b { display: block; color: var(--text-primary); font-size: var(--fs-xs); }
.carclub__estante .vitr__copa { height: 64px; }
.carclub .vitr__grupo + .vitr__grupo { margin-top: var(--sp-3); }
.carclub .vitr__logros { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }

/* Tu historia: el icono del hito delante. */
.carclub .hist__i b { display: block; }

@media (max-width: 720px) {
  .carclub__ano-sel { margin-left: 0; width: 100%; }
}

/* El renglón de arriba del título se parte en dos si no entra. */
:is(.cdir, .carclub) .parsel__ante { white-space: normal; }

/* El año por año rueda entero dentro de su tarjeta (en el modo la campaña
   recorta: acá la lista de campeones es más larga). */
.carclub .ofi3__campana .ofi3__cuerpo { overflow-y: auto; overscroll-behavior: contain; }
.carclub .ofi3__campana .ofi3__dos { flex: none; }
.carclub .ofi3__campana .ofi3__kpi b { font-size: var(--fs-lg); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carclub__campeones .carclub__pend { padding-right: 2px; }