/* Porra del Mundial 2026 — activity page (Tus pronósticos tab).
 *
 * Campaign-only chrome: the gradient hero, the gold trophies podium and the
 * score pick-rows. Generic containers reuse the shared .card primitive (this
 * file only skins it); the tab nav reuses .entity-tabs. Mobile-first.
 */

@layer components {
  .porra-activity {
    position: relative;
    font-family: var(--font-body);
  }

  /* Gradient wash behind the slim nav + big hero, fading out as it reaches the
     tabs (mirrors the entity `body::before` wash). Sits behind everything; the
     sticky hero-nav is transparent so this reads through it at scroll=0. */
  .porra-activity::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 340px;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(80% 70% at 18% 12%, rgb(232 25 91 / 45%) 0%, transparent 60%),
      radial-gradient(80% 80% at 88% 40%, rgb(0 200 245 / 28%) 0%, transparent 60%),
      linear-gradient(180deg, var(--color-porra-purple) 0%, transparent 72%);
  }

  .porra-activity > * {
    position: relative;
    z-index: 1;
  }

  /* NOTE: the slim hero-nav + tabs-wrapper sticky positioning lives in an
     `@layer pages` block at the end of this file — it must beat team-detail.css
     `.entity-tabs-wrapper` (also `@layer pages`); a components-layer rule loses
     on layer order. The `.hero-nav` LAYOUT still comes from entity-hero.css. */

  /* ─── Big hero (user-strip) — scrolls away under the slim nav. ─── */
  .porra-hero {
    position: relative;
    padding: var(--space-2) var(--space-4) var(--space-4);
    color: #fff;
  }


  /* ─── User strip (glass card) ─── */
  .porra-userstrip {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: rgb(0 0 0 / 35%);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / 8%);
  }

  /* The logged-in strip stacks the avatar/meta/rank row over the progress bar;
     the base strip (anon button) stays a single row. */
  .porra-userstrip--player {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .porra-userstrip__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .porra-userstrip__prog {
    margin-top: 0;
  }

  .porra-userstrip__avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-porra-magenta), var(--color-porra-cyan));
    border: 2px solid rgb(255 255 255 / 20%);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 18px;
    color: #fff;
  }

  /* Anonymous user-strip — /me is 501 (no personalized stats). Neutral avatar
     + sign-in hint instead of fake rank/progress. */
  .porra-userstrip__avatar--anon {
    background: rgb(255 255 255 / 8%);
    color: rgb(255 255 255 / 70%);
  }

  .porra-userstrip__anon-hint {
    color: rgb(255 255 255 / 65%);
  }

  .porra-userstrip__meta {
    flex: 1;
    min-width: 0;
  }

  .porra-userstrip__name {
    display: block;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 14px;
    letter-spacing: 0.3px;
    color: #fff;
  }

  .porra-userstrip__status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 2px;
    font-size: 11px;
    color: rgb(255 255 255 / 65%);
  }

  /* Logged-in stats: covered (grand + match) / total + max points in play.
     Live-computed by porra-progress. The points stat is gold (campaign accent);
     the right side of the strip is reserved for rank/points during the comp. */
  .porra-userstrip__stats {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-1);
  }

  .porra-userstrip__stat {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }

  .porra-userstrip__stat-val {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 16px;
    color: #fff;
  }

  .porra-userstrip__stat-val small {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: rgb(255 255 255 / 50%);
  }

  .porra-userstrip__stat--gold .porra-userstrip__stat-val {
    color: var(--color-porra-gold);
  }

  .porra-userstrip__stat-lbl {
    margin-top: 1px;
    font-family: var(--font-title);
    font-weight: var(--weight-semibold);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgb(255 255 255 / 55%);
  }

  .porra-userstrip__rank {
    flex-shrink: 0;
    text-align: right;
  }

  .porra-userstrip__rank-label {
    display: block;
    font-family: var(--font-title);
    font-weight: var(--weight-semibold);
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgb(255 255 255 / 60%);
  }

  .porra-userstrip__rank-pos {
    display: block;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 22px;
    line-height: 1;
    color: #fff;
  }

  .porra-userstrip__rank-of {
    display: block;
    font-size: 11px;
    color: rgb(255 255 255 / 60%);
  }

  /* Campaign status pill (no generic pill primitive exists to reuse). */
  .porra-pill {
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: rgb(0 255 135 / 15%);
    color: var(--color-accent);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .porra-pill--warn {
    background: rgb(255 211 77 / 18%);
    color: var(--color-porra-gold);
  }

  /* ─── Content column ─── */
  .porra-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .porra-content .card {
    margin-bottom: var(--space-3);
  }

  /* Tab panels: each stacks its own cards; only the active panel is shown
     (porra-tabs toggles `hidden`). */
  .porra-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .porra-panel[hidden] {
    display: none;
  }

  /* ─── Grandes pronósticos (gold skin over .card) ─── */
  .porra-trophies {
    position: relative;
    overflow: hidden;
    border-color: rgb(255 211 77 / 25%);
    background:
      radial-gradient(60% 80% at 50% 0%, rgb(255 211 77 / 14%) 0%, transparent 70%),
      linear-gradient(180deg, var(--color-porra-purple) 0%, var(--color-surface) 60%);
  }

  .porra-trophies__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: #fff;
  }

  .porra-trophies__title svg {
    color: var(--color-porra-gold);
  }

  /* Cerrado para cambios: candado + motivo. El .card-header ya es flex +
     space-between, así que cae solo a la derecha del título. Mismo naranja que
     el candado de las filas de partido (.porra-pickrow__lockicon). */
  .porra-trophies__lock {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-warning-strong);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
  }

  /* Cuenta atrás al cierre, en el mismo hueco que luego ocupa el candado. Oro
     (no naranja): informa, no alarma — el naranja se reserva para "cerrado".
     Empieza vacío (lo rellena porra-countdown al conectar), así que no reserva
     alto ni deja un hueco visible si el JS no llega. */
  .porra-trophies__deadline {
    flex-shrink: 0;
    color: var(--color-porra-gold);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
  }

  .porra-trophies__deadline[hidden] {
    display: none;
  }

  .porra-podium {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .porra-trophy {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 4%);
    border: 1px solid rgb(255 255 255 / 7%);
  }

  .porra-trophy--champion {
    grid-column: span 2;
    border-color: rgb(255 211 77 / 45%);
    background: linear-gradient(160deg, rgb(255 211 77 / 18%) 0%, rgb(255 211 77 / 2%) 100%);
  }

  .porra-trophy--runner-up {
    grid-column: span 2;
    border-color: rgb(199 202 209 / 35%);
    background: linear-gradient(160deg, rgb(199 202 209 / 10%) 0%, transparent 100%);
  }

  .porra-trophy--third {
    border-color: rgb(205 127 50 / 35%);
    background: linear-gradient(160deg, rgb(205 127 50 / 10%) 0%, transparent 100%);
  }

  .porra-trophy--fourth {
    border-color: rgb(255 255 255 / 10%);
  }

  .porra-trophy__label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .porra-trophy--champion .porra-trophy__label {
    color: var(--color-porra-gold);
  }

  .porra-trophy--runner-up .porra-trophy__label {
    color: var(--color-porra-silver);
  }

  .porra-trophy--third .porra-trophy__label {
    color: var(--color-porra-bronze);
  }

  .porra-trophy__pts {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: rgb(255 255 255 / 55%);
    background: rgb(0 0 0 / 35%);
    padding: 2px var(--space-1);
    border-radius: var(--radius-full);
  }

  .porra-trophy__pick {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .porra-trophy__pick img {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 2px;
    object-fit: contain;
  }

  .porra-trophy__pick img[hidden] {
    display: none;
  }

  .porra-trophy__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-title);
    font-weight: var(--weight-semibold);
    font-size: 15px;
    color: #fff;
  }

  .porra-trophy--champion .porra-trophy__name {
    font-size: 22px;
  }

  .porra-trophy__edit {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  /* ─── Individual awards ─── */
  .porra-awards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  .porra-award {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 3%);
    border: 1px solid rgb(255 255 255 / 6%);
    text-align: center;
  }

  /* Points pill, top-right corner (same skin as .porra-trophy__pts) so the
     label stays clean and the card doesn't grow wider for the "+N". */
  .porra-award__pts {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: rgb(255 255 255 / 55%);
    background: rgb(0 0 0 / 35%);
    padding: 2px var(--space-1);
    border-radius: var(--radius-full);
  }

  .porra-award__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    line-height: 1;
  }

  .porra-award__label {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgb(255 255 255 / 60%);
  }

  .porra-award__pick {
    font-family: var(--font-title);
    font-weight: var(--weight-semibold);
    font-size: 14px;
    line-height: 1.1;
    color: #fff;
  }

  .porra-award__team {
    font-size: 11px;
    color: rgb(255 255 255 / 40%);
  }

  /* ─── Editable triggers (Pronósticos tab) ───
     In the editable tab each trophy/award is a <button> that opens the
     candidate picker; on the read-only ficha they stay <div>s. Reset the UA
     button chrome so the gold skin renders identically, then add a hover +
     focus affordance and the corner edit pencil. */
  button.porra-trophy,
  button.porra-award {
    width: 100%;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
  }

  button.porra-trophy {
    text-align: left;
  }

  button.porra-award {
    position: relative;
  }

  @media (hover: hover) {
    button.porra-trophy:hover,
    button.porra-award:hover {
      filter: brightness(1.08);
    }
  }

  button.porra-trophy:focus-visible,
  button.porra-award:focus-visible {
    outline: 2px solid var(--color-porra-gold);
    outline-offset: 2px;
  }

  .porra-trophy__edit-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-left: var(--space-1);
    color: var(--color-accent);
    opacity: 0.65;
  }

  .porra-award__edit-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 13px;
    height: 13px;
    color: var(--color-accent);
    opacity: 0.55;
  }

  /* ─── Jornada blocks ───
     The old `.porra-jornada__head` chrome was retired with Opción D: every
     jornada (populated, empty, knockout) now leads with the gradient
     `.porra-jornada-banner` (further down). Only the neutral hint copy under an
     empty/locked state card survives. */
  .porra-jornada__hint {
    padding: var(--space-4);
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted);
  }

  /* ─── Pick rows ─── */
  .porra-pickrows {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .porra-pickrow {
    display: grid;
    /* `when` is a FIXED track (not `auto`): the score box sits between the two
       1fr columns, so its centre is `total/2 + when/2`. If `when` resized with
       its content (hora "21:00" ≈30px vs candado 13px) the score would drift
       left on locked/finished rows. A constant width keeps every row's score
       perfectly aligned regardless of whether it shows the hora or the candado. */
    grid-template-columns: 36px 1fr auto 1fr;
    /* Row 1 = equipos ↔ caja de resultado (centrados verticalmente entre sí);
       row 2 = la sub-etiqueta ("Cierra en X" / "Tu X-Y") bajo el score. Tenerla
       en su propia fila evita que empuje los equipos hacia abajo respecto al
       resultado (antes se apilaba dentro del score y descentraba la fila). */
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--space-2);
    row-gap: 0;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    color: inherit;
    text-decoration: none;
  }

  /* Fila 1: equipos + caja de resultado comparten el centro vertical. */
  .porra-pickrow__team--home {
    grid-column: 2;
  }

  .porra-pickrow__scorecol {
    grid-column: 3;
    grid-row: 1;
  }

  .porra-pickrow__team--away {
    grid-column: 4;
  }

  .porra-pickrow__team {
    grid-row: 1;
  }

  /* Sub-etiquetas bajo el score, fila 2, alineadas con la columna del resultado. */
  .porra-pickrow__sublabels {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Group chip stacked over the kickoff time (two rows, one left column). */
  .porra-pickrow__when {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }

  .porra-pickrows li:last-child .porra-pickrow {
    border-bottom: 0;
  }

  @media (hover: hover) {
    .porra-pickrow:hover {
      background: var(--color-surface-hover);
    }
  }

  .porra-pickrow__grp {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: var(--color-text-subtle);
    background: rgb(255 255 255 / 5%);
    padding: 2px 5px;
    border-radius: var(--radius-sm);
  }

  .porra-pickrow__time {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .porra-pickrow__team {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }

  .porra-pickrow__team--home {
    justify-content: flex-end;
    text-align: right;
  }

  /* Sportmonks crests are square logos (not flag aspect): contain-fit on a
     small square; logo-brightness paints a white backdrop on dark escudos. */
  .porra-pickrow__team img {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    object-fit: contain;
  }

  .porra-pickrow__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-title);
    font-weight: normal;
    font-size: 15px;
    letter-spacing: 0.2px;
    color: #fff;
  }

  .porra-pickrow__score {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
  }

  .porra-pickrow__score.is-filled {
    background: rgb(0 255 135 / 8%);
    border-color: rgb(0 255 135 / 30%);
  }

  .porra-pickrow__cell {
    width: 22px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 16px;
    color: #fff;
  }

  .porra-pickrow__cell.is-empty {
    color: var(--color-text-subtle);
  }

  .porra-pickrow__sep {
    font-weight: var(--weight-bold);
    font-size: 12px;
    color: var(--color-text-subtle);
  }

  /* ── Fixture bloqueado (≤5 min al kickoff / ya empezado): no editable. ── */
  .porra-pickrow {
    position: relative; /* ancla el chip de puntos arriba a la derecha */
  }

  .porra-pickrow.is-locked {
    opacity: 0.55;
    cursor: not-allowed;
  }

  @media (hover: hover) {
    .porra-pickrow.is-locked:hover {
      background: none;
    }
  }

  /* Candado naranja — estado no-editable (cerrado o terminado). Tamaño fijo, no
     mueve el layout (a diferencia de un texto "Cerrado"/"Final"). */
  .porra-pickrow__lockicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-warning-strong);
  }

  .porra-pickrow__lockicon[hidden] {
    display: none;
  }

  /* Chip de puntos del pick (arriba a la derecha), estilo porra-trophy__pts.
     Color-coded: verde = acierto exacto, amarillo = parcial, gris = +0. */
  .porra-pickrow__pts {
    position: absolute;
    top: 4px;
    right: 6px;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12.5px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: var(--radius-sm);
  }

  .porra-pickrow__pts[hidden] {
    display: none;
  }

  .porra-pickrow__pts--exact {
    color: var(--color-prediction-hit);
    background: color-mix(in srgb, var(--color-prediction-hit) 18%, transparent);
  }

  .porra-pickrow__pts--partial {
    color: var(--color-warning-strong);
    background: color-mix(in srgb, var(--color-warning-strong) 18%, transparent);
  }

  .porra-pickrow__pts--zero {
    color: var(--color-text-subtle);
    background: rgb(255 255 255 / 6%);
  }

  /* ── Columna del score: caja (pick o resultado real) + debajo el "Cierra en X"
     (abierto) o "Tu X-Y" (terminado). ── */
  .porra-pickrow__scorecol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }

  /* "Cierra en X" — cierre por partido bajo el score (solo mientras abierto). La
     urgencia (ámbar/rojo) vive AQUÍ ahora, no en la hora del kickoff. */
  .porra-pickrow__closein {
    font-family: var(--font-title);
    font-weight: var(--weight-semibold);
    font-size: 11px;
    letter-spacing: 0.2px;
    color: var(--color-text-muted);
    white-space: nowrap;
    margin-top: 3px;
  }

  .porra-pickrow__closein[hidden] {
    display: none;
  }

  .porra-pickrow__closein[data-level="soon"] {
    color: var(--color-warning);
  }

  .porra-pickrow__closein[data-level="urgent"] {
    color: var(--color-loss);
  }

  /* "Tu X-Y" — el pronóstico, como BADGE coloreado por acierto (igual que los
     puntos): verde exacto / ámbar parcial / gris fallo. El resultado real
     (en la caja) se queda neutro. */
  .porra-pickrow__pick {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11.5px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    color: var(--color-text-subtle);
    background: rgb(255 255 255 / 6%);
    margin-top: 5px;
  }

  .porra-pickrow__pick[hidden] {
    display: none;
  }

  .porra-pickrow__pick--exact {
    color: var(--color-prediction-hit);
    background: color-mix(in srgb, var(--color-prediction-hit) 18%, transparent);
  }

  .porra-pickrow__pick--partial {
    color: var(--color-warning-strong);
    background: color-mix(in srgb, var(--color-warning-strong) 18%, transparent);
  }

  .porra-pickrow__pick--zero {
    color: var(--color-text-subtle);
    background: rgb(255 255 255 / 6%);
  }

  /* "Sin pronóstico" — partido terminado que el usuario (o un anónimo) no llegó
     a pronosticar: sin badge de color, texto tenue, para que se distinga de un
     pick real que falló (que sí lleva fondo gris). */
  .porra-pickrow__pick--none {
    color: var(--color-text-subtle);
    background: transparent;
    font-weight: var(--weight-semibold);
    font-style: italic;
  }

  /* Fila terminada: opacidad plena (no el dim del lock) + raya-acento izquierda
     por resultado. La caja del score se queda neutra (el color va en "Tu X-Y"). */
  .porra-pickrow.is-finished {
    opacity: 1;
    cursor: default;
    border-left: 3px solid var(--color-border);
    padding-left: calc(var(--space-4) - 3px);
  }

  .porra-pickrow.is-finished[data-hit="exact"] {
    border-left-color: var(--color-prediction-hit);
  }

  .porra-pickrow.is-finished[data-hit="partial"] {
    border-left-color: var(--color-warning-strong);
  }

  .porra-pickrow.is-finished[data-hit="zero"] {
    border-left-color: var(--color-text-subtle);
  }

}

@layer components {
  /* ─── Opción D: jornada banner (gradient) over the per-date cards ─── */
  .porra-jornada-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-porra-magenta) 0%, var(--color-porra-purple) 70%);
  }

  .porra-jornada-banner__badge {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgb(0 0 0 / 25%);
    color: #fff;
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 13px;
  }

  .porra-jornada-banner__text {
    flex: 1;
    min-width: 0;
  }

  .porra-jornada-banner__title {
    display: block;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #fff;
  }

  .porra-jornada-banner__meta {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    color: rgb(255 255 255 / 70%);
  }

  .porra-jornada-banner__progress {
    flex-shrink: 0;
    text-align: right;
  }

  .porra-jornada-banner__num {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 18px;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }

  .porra-jornada-banner__num small {
    font-size: 12px;
    font-weight: var(--weight-normal);
    color: rgb(255 255 255 / 70%);
  }

  .porra-jornada-banner__lbl {
    display: block;
    font-family: var(--font-title);
    font-weight: var(--weight-semibold);
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgb(255 255 255 / 70%);
  }

  /* Muted figure — empty jornada / locked knockout (no live counter yet). */
  .porra-jornada-banner__num--muted {
    color: rgb(255 255 255 / 55%);
  }

  /* Gold accent — knockout placeholder banner (mirrors the old gold head). */
  .porra-jornada-banner--gold {
    background: linear-gradient(135deg, var(--color-porra-gold-dark) 0%, var(--color-porra-purple) 70%);
  }

  .porra-jornada-banner__badge--gold {
    background: rgb(255 211 77 / 22%);
    color: var(--color-porra-gold);
  }

  /* ─── Opción D: per-date cards ─── */
  .porra-datecard {
    margin-bottom: var(--space-3);
  }

  .porra-datecard__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .porra-datecard__badge {
    flex-shrink: 0;
    width: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-1) 0;
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    line-height: 1.1;
  }

  .porra-datecard__weekday {
    font-family: var(--font-title);
    font-weight: var(--weight-semibold);
    font-size: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .porra-datecard__day {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 15px;
    color: #fff;
  }

  .porra-datecard__text {
    flex: 1;
    min-width: 0;
  }

  .porra-datecard__label {
    display: block;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #fff;
  }

  .porra-datecard__sub {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: var(--color-text-muted);
  }

}

@layer components {
  /* ─── Ranking: vertical rhythm ───
     The 6 stacked blocks (summary card, scope pills, search, list card,
     load-more, note) share one consistent gap. The parent `.porra-content`
     already supplies the lateral padding, so children only own this column
     gap — no ad-hoc margins (kept in sync below by zeroing them out). */
  .porra-ranking {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* ─── Ranking: summary (3 figures on .card) ─── */
  .porra-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .porra-summary__cell {
    text-align: center;
    padding: 0 var(--space-1);
    border-right: 1px solid var(--color-border-subtle);
  }

  .porra-summary__cell:last-child {
    border-right: 0;
  }

  .porra-summary__value {
    display: block;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 18px;
    color: var(--color-text);
  }

  .porra-summary__value--accent {
    color: var(--color-accent);
  }

  .porra-summary__label {
    display: block;
    margin-top: 3px;
    font-family: var(--font-title);
    font-weight: var(--weight-semibold);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  /* ─── Ranking: leaderboard list ─── */
  .porra-ranklist {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .porra-ranklist__empty {
    padding: var(--space-5) var(--space-4);
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
  }

  .porra-rank-row {
    display: grid;
    grid-template-columns: 24px 32px 1fr auto 16px;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    color: inherit;
    text-decoration: none;
  }

  .porra-rank-row[hidden] {
    display: none;
  }

  .porra-ranklist li:last-child .porra-rank-row {
    border-bottom: 0;
  }

  @media (hover: hover) {
    .porra-rank-row:hover {
      background: var(--color-surface-hover);
    }
  }

  .porra-rank-row--you {
    background: rgb(0 255 135 / 6%);
  }

  .porra-rank-row__pos {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 16px;
    text-align: center;
    color: var(--color-text-muted);
  }

  /* 3-digit ranks (≥100) overflow the fixed-width cell on mobile — shrink the
     glyph so the position still fits. Added by the ranking controller. */
  .porra-rank-row__pos--wide {
    font-size: 11px;
  }

  .porra-rank-row--gold .porra-rank-row__pos {
    color: var(--color-porra-gold);
  }

  .porra-rank-row--silver .porra-rank-row__pos {
    color: var(--color-porra-silver);
  }

  .porra-rank-row--bronze .porra-rank-row__pos {
    color: var(--color-porra-bronze);
  }

  .porra-rank-row--you .porra-rank-row__pos {
    color: var(--color-accent);
  }

  .porra-rank-row__avatar {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border: 1.5px solid rgb(255 255 255 / 10%);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 14px;
    color: #fff;
  }

  .porra-rank-row__avatar--0 {
    background: linear-gradient(135deg, var(--color-porra-magenta), var(--color-porra-purple));
  }

  .porra-rank-row__avatar--1 {
    background: linear-gradient(135deg, var(--color-porra-cyan), var(--color-porra-purple));
  }

  .porra-rank-row__avatar--2 {
    background: linear-gradient(135deg, var(--color-porra-gold), var(--color-porra-gold-dark));
  }

  .porra-rank-row__avatar--3 {
    background: linear-gradient(135deg, var(--color-accent), var(--color-porra-cyan));
  }

  .porra-rank-row__avatar--4 {
    background: linear-gradient(135deg, var(--color-porra-purple), var(--color-porra-magenta));
  }

  .porra-rank-row__meta {
    min-width: 0;
  }

  .porra-rank-row__name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-title);
    font-weight: var(--weight-semibold);
    font-size: 15px;
    letter-spacing: 0.2px;
    color: var(--color-text);
  }

  .porra-rank-row__you {
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: rgb(0 255 135 / 15%);
    color: var(--color-accent);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }

  .porra-rank-row__champion {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: 1px;
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .porra-rank-row__champion img {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    object-fit: contain;
  }

  /* "Campeón: {team}" prefix + name read on one line, ellipsis if long. */
  .porra-rank-row__champion-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Completion status — one of two states, replacing the old cover line. */
  .porra-rank-row__status {
    display: block;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 2px;
  }

  .porra-rank-row__status--complete {
    color: var(--color-accent);
  }

  .porra-rank-row__status--partial {
    color: var(--color-porra-gold);
  }

  /* The `hidden` attribute must beat the `display` rules above — both lines are
     JS-toggled per row (champion only when a champion is picked, status only
     when the player has saved a pick). Without this the display rule neutralises
     `hidden` and an empty "Campeón:" / status span leaks (logo-brightness §
     hidden-attribute bug). */
  .porra-rank-row__champion[hidden],
  .porra-rank-row__status[hidden] {
    display: none;
  }

  .porra-rank-row__pts {
    text-align: right;
  }

  .porra-rank-row__pts-val {
    display: block;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 20px;
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .porra-rank-row__pts-lbl {
    display: block;
    margin-top: 2px;
    font-family: var(--font-title);
    font-weight: var(--weight-semibold);
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .porra-rank-row__chev {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-subtle);
  }

  /* ─── Ranking: public note ─── */
  .porra-ranking-note {
    text-align: center;
    font-size: 11px;
    font-style: italic;
    color: var(--color-text-muted);
  }

  /* ─── Ranking: search ─── */
  .porra-ranksearch {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
  }

  .porra-ranksearch__icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
  }

  .porra-ranksearch__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 14px;
  }

  .porra-ranksearch__input::placeholder {
    color: var(--color-text-subtle);
  }

  .porra-ranksearch__input:focus {
    outline: none;
  }

  /* ─── Ranking: load-more ─── */
  .porra-ranklist__more {
    display: block;
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-title);
    font-weight: var(--weight-semibold);
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
  }

  .porra-ranklist__more[hidden] {
    display: none;
  }

  /* ─── Ranking: loading skeleton ─── */
  .porra-ranklist__skeleton {
    display: flex;
    flex-direction: column;
  }

  .porra-ranklist__skeleton[hidden] {
    display: none;
  }

  .porra-rank-skel {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .porra-rank-skel:last-child {
    border-bottom: 0;
  }

  .porra-rank-skel__avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface-hover);
  }

  .porra-rank-skel__line {
    flex: 1;
    height: 12px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-hover);
  }
}

@layer components {
  /* ─── Reglas · Premios: standalone section title ─── */
  .porra-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text);
  }

  .porra-section-title svg {
    color: var(--color-porra-gold);
    flex-shrink: 0;
  }

  .porra-section-title--magenta svg {
    color: var(--color-porra-magenta);
  }

  /* Group header — splits Reglas into "Partidos" vs "Grandes pronósticos". */
  /* Labeled divider (mockup "Banner sutil / divisor etiquetado"): a subtle group
     header — accent left-border + a left-to-right accent wash + an accent icon,
     with the label itself in white Oswald. Green by default, gold variant. */
  .porra-group-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0 var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--color-accent);
    background: linear-gradient(90deg, color-mix(in oklab, var(--color-accent) 12%, transparent), transparent 80%);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 18px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #fff;
  }

  .porra-group-title svg {
    /* Beat the global `svg { display: block }` reset; the icon carries the accent. */
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-accent);
  }

  .porra-group-title--gold {
    border-left-color: var(--color-porra-gold);
    background: linear-gradient(90deg, color-mix(in oklab, var(--color-porra-gold) 12%, transparent), transparent 80%);
  }

  .porra-group-title--gold svg {
    color: var(--color-porra-gold);
  }

  /* Section subtitle ("frase chula") tucked under a section title. */
  .porra-section-sub {
    margin: calc(-1 * var(--space-1)) 0 var(--space-2);
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-muted);
  }

  /* ─── Prizes grid ─── */
  .porra-prizes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .porra-prize {
    position: relative;
    overflow: hidden;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
  }

  .porra-prize--top {
    grid-column: span 2;
    border-color: rgb(255 211 77 / 40%);
    background:
      radial-gradient(70% 100% at 80% 0%, rgb(255 211 77 / 25%) 0%, transparent 65%),
      linear-gradient(135deg, var(--color-porra-gold-dark) 0%, var(--color-surface) 55%);
  }

  .porra-prize__place {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .porra-prize--top .porra-prize__place {
    color: var(--color-porra-gold);
  }

  .porra-prize__reward {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 18px;
    line-height: 1.1;
    color: var(--color-text);
  }

  .porra-prize--top .porra-prize__reward {
    font-size: 26px;
    color: var(--color-porra-gold);
  }

  .porra-prize__reward small {
    display: block;
    margin-top: 3px;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
  }

  .porra-prize__graphic {
    position: absolute;
    right: -10px;
    bottom: -10px;
    opacity: 0.15;
    pointer-events: none;
    color: var(--color-porra-gold);
  }

  .porra-prize--top .porra-prize__graphic {
    opacity: 0.3;
  }

  .porra-prize__graphic svg {
    width: 80px;
    height: 80px;
  }

  /* ─── Gran premio (sorteo) — hero del viaje a NYC ─── */
  .porra-grandprize {
    position: relative;
    overflow: hidden;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid rgb(255 211 77 / 35%);
    background:
      radial-gradient(90% 120% at 85% -10%, rgb(0 200 245 / 22%) 0%, transparent 55%),
      linear-gradient(150deg, var(--color-porra-purple) 0%, #1a0838 58%, var(--color-surface) 125%);
    box-shadow: 0 10px 30px rgb(0 0 0 / 30%);
  }

  .porra-grandprize__skyline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: var(--color-porra-cyan);
    opacity: 0.16;
    pointer-events: none;
    line-height: 0;
  }

  .porra-grandprize__skyline svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .porra-grandprize__eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-porra-gold);
  }

  .porra-grandprize__title {
    position: relative;
    margin: var(--space-2) 0 0;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 26px;
    line-height: 1.05;
    color: #fff;
  }

  .porra-grandprize__chips {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-2);
  }

  .porra-grandprize__chip {
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    background: rgb(255 255 255 / 12%);
    border: 1px solid rgb(255 255 255 / 18%);
  }

  .porra-grandprize__raffle {
    position: relative;
    margin: var(--space-3) 0 0;
    max-width: 30em;
    font-size: 12.5px;
    line-height: 1.45;
    color: rgb(255 255 255 / 78%);
  }

  /* ─── Resultado del sorteo del viaje (gran premio) ───
   * Vive DENTRO del hero, sobre el degradado: por eso el bloque se separa con
   * una regla translúcida en vez de una card propia — es el desenlace del
   * premio que anuncia el hero, no una sección aparte. */
  .porra-grandprize__pending {
    position: relative;
    margin: var(--space-3) 0 0;
    max-width: 30em;
    font-size: 12.5px;
    line-height: 1.45;
    color: rgb(255 255 255 / 70%);
  }

  .porra-grandprize__result {
    position: relative;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid rgb(255 255 255 / 18%);
  }

  .porra-grandprize__winner-label,
  .porra-grandprize__reserves-label {
    display: block;
    font-family: var(--font-title);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgb(255 255 255 / 70%);
  }

  .porra-grandprize__winner {
    display: block;
    margin-top: 2px;
    font-family: var(--font-title);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: #fff;
    overflow-wrap: anywhere;
  }

  .porra-grandprize__reserves-label {
    margin-top: var(--space-3);
  }

  /* Los suplentes son el plan B: mismo bloque, un escalón por debajo en peso. */
  .porra-grandprize__reserves {
    list-style: none;
    margin: var(--space-1) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    font-size: var(--text-sm);
    color: rgb(255 255 255 / 88%);
  }

  /* ─── Premios del ranking — lista TOP 10 con podio ─── */
  .porra-prizelist {
    overflow: hidden;
  }

  /* Puesto sin cubrir (menos participantes que premios). */
  .porra-prizerow__vacant {
    color: var(--color-text-muted);
  }

  .porra-prizerow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .porra-prizerow:last-child {
    border-bottom: 0;
  }

  .porra-prizerow__rank {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border-radius: 8px;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 13px;
    color: var(--color-text-muted);
    background: color-mix(in oklab, var(--color-text) 8%, transparent);
  }

  .porra-prizerow--tier1 .porra-prizerow__rank {
    color: #1a0838;
    background: linear-gradient(135deg, var(--color-porra-gold-light), var(--color-porra-gold));
  }

  .porra-prizerow--tier2 .porra-prizerow__rank {
    color: #1a1a1a;
    background: linear-gradient(135deg, #eef0f3, var(--color-porra-silver));
  }

  .porra-prizerow--tier3 .porra-prizerow__rank {
    color: #2a1404;
    background: linear-gradient(135deg, #e6a763, var(--color-porra-bronze));
  }

  .porra-prizerow__place {
    flex: 1;
    min-width: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: 14px;
    color: var(--color-text);
  }

  /* Nombre + puntos apilados: `__place` es el flex-item que crece, así que sus
     hijos en bloque se apilan sin tocar el layout de la fila (ni el de
     `--total`, que reutiliza `__place` en una sola línea). */
  .porra-prizerow__name {
    display: block;
  }

  .porra-prizerow__points {
    display: block;
    margin-top: 1px;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: 12px;
    color: var(--color-text-muted);
  }

  /* Fila-enlace a la ficha del ganador: hereda el color del texto (no debe
     leerse como un link azul dentro de una tabla) y tiñe SOLO el
     background-color al hover, para no pisar el degradado de podio de las
     tier1-3 (que va en background-image). */
  .porra-prizerow--link {
    color: inherit;
    text-decoration: none;
  }

  .porra-prizerow--link:hover {
    background-color: color-mix(in oklab, var(--color-text) 6%, transparent);
  }

  /* `.porra-prizelist` recorta con overflow:hidden, así que un anillo de foco
     con offset POSITIVO se comería en la primera y la última fila: negativo,
     por dentro. */
  .porra-prizerow--link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }

  .porra-prizerow__amount {
    flex-shrink: 0;
    text-align: right;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 17px;
    color: var(--color-text);
  }

  .porra-prizerow--tier1 .porra-prizerow__amount {
    font-size: 20px;
    color: var(--color-porra-gold);
  }

  .porra-prizerow--tier2 .porra-prizerow__amount {
    color: var(--color-porra-silver);
  }

  .porra-prizerow--tier3 .porra-prizerow__amount {
    color: var(--color-porra-bronze);
  }

  /* Podio — top 3 destacan: tinte de fila + medalla circular con brillo. */
  .porra-prizerow--tier1 {
    background: linear-gradient(90deg, rgb(255 211 77 / 14%), transparent 62%);
  }

  .porra-prizerow--tier2 {
    background: linear-gradient(90deg, rgb(199 202 209 / 13%), transparent 62%);
  }

  .porra-prizerow--tier3 {
    background: linear-gradient(90deg, rgb(205 127 50 / 14%), transparent 62%);
  }

  .porra-prizerow--tier1 .porra-prizerow__rank,
  .porra-prizerow--tier2 .porra-prizerow__rank,
  .porra-prizerow--tier3 .porra-prizerow__rank {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border-radius: 50%;
    font-size: 15px;
    box-shadow:
      0 2px 8px rgb(0 0 0 / 28%),
      inset 0 1px 1px rgb(255 255 255 / 45%);
  }

  .porra-prizerow--tier1 .porra-prizerow__place,
  .porra-prizerow--tier2 .porra-prizerow__place,
  .porra-prizerow--tier3 .porra-prizerow__place {
    font-size: 15px;
  }

  .porra-prizerow__amount small {
    display: block;
    margin-top: 1px;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .porra-prizerow--total {
    justify-content: center;
    background: color-mix(in oklab, var(--color-porra-gold) 8%, transparent);
  }

  .porra-prizerow--total .porra-prizerow__place {
    flex: 0 1 auto;
    text-align: center;
    font-family: var(--font-title);
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-porra-gold-dark);
  }

  /* ─── Importes y entrega (fiscalidad) ─── */
  .porra-prize-note {
    padding: var(--space-3);
  }

  .porra-prize-note__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .porra-prize-note__list li {
    position: relative;
    padding-left: 18px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--color-text-muted);
  }

  .porra-prize-note__list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-porra-magenta);
  }

  /* ─── Bases legales + privacidad — botón único al pie ─── */
  .porra-legal-cta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: 13px;
    transition:
      border-color 0.15s ease,
      background 0.15s ease;
  }

  .porra-legal-cta:hover {
    border-color: var(--color-accent);
    background: color-mix(in oklab, var(--color-accent) 6%, var(--color-surface));
  }

  .porra-legal-cta[aria-disabled="true"] {
    opacity: 0.6;
    pointer-events: none;
  }

  .porra-legal-cta__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-accent);
  }

  .porra-legal-cta__text {
    flex: 1;
    min-width: 0;
  }

  .porra-legal-cta__chev {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-text-muted);
  }

  /* ─── Scoring table (on .card) ─── */
  .porra-scoring__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: 11px 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .porra-scoring__row:first-child {
    padding-top: 0;
  }

  .porra-scoring__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .porra-scoring__desc {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    color: var(--color-text-secondary);
  }

  .porra-scoring__pts {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 16px;
    color: var(--color-accent);
    background: rgb(0 255 135 / 10%);
    border: 1px solid rgb(0 255 135 / 25%);
    padding: 4px var(--space-3);
    border-radius: var(--radius-full);
    white-space: nowrap;
  }

  .porra-scoring__pts.is-bonus {
    color: var(--color-porra-gold);
    background: rgb(255 211 77 / 10%);
    border-color: rgb(255 211 77 / 25%);
  }

  /* Multiplier pill (round / anticipation tables) — neutral, distinct from the
     green points pill so "×2" never reads as a points value. */
  .porra-scoring__pts--mult {
    color: var(--color-text);
    background: var(--color-surface-hover);
    border-color: var(--color-border-subtle);
  }

  /* Small explanatory note under a reglas table. */
  .porra-reglas-note {
    margin: var(--space-1) 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-text-muted);
  }

  /* ─── Tiebreaker cascade (numbered rows on the shared .card) ─── */
  .porra-tiebreak__row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .porra-tiebreak__row:last-child {
    border-bottom: 0;
  }

  .porra-tiebreak__num {
    flex-shrink: 0;
    width: 16px;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 14px;
    color: var(--color-accent);
  }

  .porra-tiebreak__text {
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text);
  }

  /* ─── Example card ─── */
  .porra-example {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface-sunken);
    border: 1px dashed var(--color-border);
  }

  .porra-example__label {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-porra-gold);
  }

  .porra-example__match {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
  }

  .porra-example__team {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .porra-example__team img {
    width: 22px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
  }

  .porra-example__name {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 13px;
    color: var(--color-text);
  }

  .porra-example__score {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 22px;
    color: var(--color-text);
  }

  .porra-example__meta {
    display: block;
    margin-top: var(--space-1);
    text-align: center;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .porra-example__picks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  .porra-example__pick {
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
  }

  .porra-example__pick--hit {
    border-color: rgb(0 255 135 / 40%);
    background: rgb(0 255 135 / 5%);
  }

  .porra-example__pick--partial {
    border-color: rgb(255 211 77 / 40%);
    background: rgb(255 211 77 / 5%);
  }

  .porra-example__pick-label {
    display: block;
    margin-bottom: var(--space-1);
    font-family: var(--font-title);
    font-weight: var(--weight-semibold);
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .porra-example__pick-score {
    display: block;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 18px;
    color: var(--color-text);
  }

  .porra-example__pick-pts {
    display: block;
    margin-top: var(--space-1);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .porra-example__pick--hit .porra-example__pick-pts {
    color: var(--color-accent);
  }

  .porra-example__pick--partial .porra-example__pick-pts {
    color: var(--color-porra-gold);
  }

  /* ─── Deadlines (magenta-tinted .card) ─── */
  .porra-deadlines {
    background: linear-gradient(160deg, rgb(232 25 91 / 10%) 0%, var(--color-surface) 100%);
    border-color: rgb(232 25 91 / 25%);
  }

  .porra-deadlines__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .porra-deadlines__row:last-child {
    border-bottom: 0;
  }

  .porra-deadlines__label {
    font-size: 12px;
    color: var(--color-text-secondary);
  }

  .porra-deadlines__date {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-porra-gold);
    background: rgb(255 211 77 / 8%);
    border: 1px solid rgb(255 211 77 / 20%);
    padding: 3px var(--space-2);
    border-radius: var(--radius-full);
    white-space: nowrap;
  }

  /* ─── Legal (on .card--no-padding) ─── */
  .porra-legal__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    background: none;
    color: var(--color-text-secondary);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
  }

  .porra-legal__row:last-child {
    border-bottom: 0;
  }

  .porra-legal__icon {
    display: flex;
    color: var(--color-text-muted);
  }

  .porra-legal__text {
    flex: 1;
    min-width: 0;
  }

  .porra-legal__chev {
    display: flex;
    color: var(--color-text-subtle);
  }

  /* ─── Disclaimer ─── */
  .porra-reglas-disclaimer {
    padding: var(--space-1) var(--space-3) 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-subtle);
  }
}

@layer components {
  /* ─── Ficha pública: hero ─── */
  .porra-ficha-hero {
    position: relative;
    padding: var(--space-2) var(--space-4) var(--space-5);
    text-align: center;
    color: #fff;
    /* No own gradient — sits on the shared .porra-activity::before wash so the
       transparent sticky nav reads through into the same hero. */
  }

  .porra-ficha-hero__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0 var(--space-3);
  }

  .porra-ficha-hero__eyebrow {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgb(255 255 255 / 70%);
  }

  .porra-ficha-hero__avatar-wrap {
    position: relative;
    width: 78px;
    height: 78px;
    margin: 0 auto;
  }

  .porra-ficha-hero__avatar {
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-porra-gold), var(--color-porra-gold-dark));
    border: 3px solid rgb(255 255 255 / 20%);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 36px;
    color: #fff;
  }

  .porra-ficha-hero__pos {
    position: absolute;
    bottom: -4px;
    right: -4px;
    padding: 4px var(--space-2);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-bg);
    background: var(--color-porra-gold);
    color: var(--color-on-accent);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 13px;
  }

  .porra-ficha-hero__name {
    margin: var(--space-3) 0 0;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 22px;
    letter-spacing: 0.3px;
    color: #fff;
  }

  .porra-ficha-hero__meta {
    margin: var(--space-1) 0 0;
    font-size: 12px;
    color: rgb(255 255 255 / 65%);
  }

  .porra-ficha-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  .porra-ficha-stat {
    padding: var(--space-2) var(--space-1);
    border-radius: var(--radius-lg);
    background: rgb(0 0 0 / 35%);
    border: 1px solid rgb(255 255 255 / 10%);
  }

  .porra-ficha-stat__v {
    display: block;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 20px;
    color: var(--color-porra-gold);
  }

  .porra-ficha-stat__v small {
    font-size: 13px;
    opacity: 0.6;
  }

  .porra-ficha-stat__l {
    display: block;
    margin-top: 2px;
    font-family: var(--font-title);
    font-weight: var(--weight-semibold);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgb(255 255 255 / 60%);
  }

  /* ─── Ficha v2: meta, progreso, nudge, grandes, vs, actividad, dock ─── */

  /* El wash cubre nav + hero entero (más alto que el de activity, que solo
     tiene el user-strip). */
  .porra-ficha::before {
    height: 420px;
  }

  /* Toolbar colapsable — el nombre + posición del jugador entra en el centro al
     hacer scroll (estilo match nav); a scroll=0 el nav es transparente y limpio. */
  .porra-ficha-nav__title {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
      opacity 220ms ease,
      visibility 220ms ease,
      transform 220ms ease;
  }

  .porra-ficha-nav.is-stuck .porra-ficha-nav__title {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .porra-ficha-nav__pos {
    flex-shrink: 0;
    padding: 3px 7px;
    border-radius: 99px;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12px;
    line-height: 1;
    color: var(--color-on-accent);
    background: var(--color-porra-gold);
  }

  /* Back + kebab claros sobre el wash a scroll=0; al colapsar (fondo opaco)
     vuelven al color de texto. */
  .porra-ficha-nav .header-back,
  .porra-ficha-nav .header-btn {
    color: #fff;
    transition: color 200ms ease;
  }

  .porra-ficha-nav.is-stuck .header-back,
  .porra-ficha-nav.is-stuck .header-btn {
    color: var(--color-text);
  }

  .porra-ficha-hero__eyebrow--solo {
    display: block;
    margin-bottom: var(--space-3);
  }

  .porra-ficha-hero__meta b {
    color: rgb(255 255 255 / 92%);
    font-weight: var(--weight-bold);
  }

  .porra-ficha-prog {
    margin-top: var(--space-3);
    text-align: left;
  }

  .porra-ficha-prog__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgb(255 255 255 / 72%);
  }

  .porra-ficha-prog__track {
    height: 7px;
    border-radius: 99px;
    overflow: hidden;
    background: rgb(0 0 0 / 35%);
  }

  .porra-ficha-prog__fill {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--color-porra-magenta), var(--color-porra-cyan));
    transition: width 0.5s ease;
  }

  .porra-ficha-nudge {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--color-porra-cyan) 8%, var(--color-surface));
    border: 1px solid color-mix(in oklab, var(--color-porra-cyan) 22%, transparent);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--color-text-muted);
  }

  .porra-ficha-nudge__ico {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-porra-cyan);
  }

  /* Grandes pronósticos */
  .porra-ficha-grand {
    overflow: hidden;
    background:
      radial-gradient(80% 100% at 100% 0%, rgb(255 211 77 / 12%) 0%, transparent 60%),
      var(--color-surface);
    border: 1px solid rgb(255 211 77 / 22%);
  }

  .porra-ficha-grand__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-3) var(--space-2);
  }

  .porra-ficha-grand__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text);
  }

  .porra-ficha-grand__title svg {
    color: var(--color-porra-gold);
  }

  .porra-ficha-grand__count {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 99px;
    color: var(--color-porra-gold-dark);
    background: color-mix(in oklab, var(--color-porra-gold) 16%, transparent);
  }

  .porra-ficha-champ {
    margin: 0 var(--space-3) var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, color-mix(in oklab, var(--color-porra-gold) 20%, transparent), transparent 80%);
    border: 1px solid rgb(255 211 77 / 28%);
  }

  .porra-ficha-champ__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .porra-ficha-champ__label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-porra-gold);
  }

  .porra-ficha-champ__pts {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 13px;
    color: var(--color-porra-gold);
  }

  .porra-ficha-champ__team {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .porra-ficha-champ__crest {
    width: 26px;
    height: 26px;
    object-fit: contain;
  }

  .porra-ficha-champ__name {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 17px;
    color: var(--color-text);
  }

  .porra-ficha-champ__empty {
    font-size: 14px;
    font-style: italic;
    color: var(--color-text-muted);
  }

  .porra-ficha-grand__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    padding: 0 var(--space-3) var(--space-3);
  }

  .porra-ficha-slot {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--color-text) 4%, transparent);
    border: 1px solid var(--color-border-subtle);
  }

  .porra-ficha-slot__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1);
  }

  .porra-ficha-slot__label {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .porra-ficha-slot__pts {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .porra-ficha-slot__value {
    display: block;
    margin-top: 3px;
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: 13px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .porra-ficha-slot__empty {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-style: italic;
    color: var(--color-text-faint, var(--color-text-muted));
    opacity: 0.7;
  }

  /* Sello del pronóstico ("Cambiado el 10 jun") — la letra pequeña que explica
     el earned: discreta bajo la selección, nunca compitiendo con ella. */
  .porra-ficha-champ__sealed,
  .porra-ficha-slot__sealed {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    letter-spacing: 0.2px;
    color: var(--color-text-faint, var(--color-text-muted));
  }

  .porra-ficha-champ__sealed {
    margin-top: 4px;
    font-size: 11px;
  }

  .porra-ficha-slot.is-set {
    border-color: color-mix(in oklab, var(--color-porra-gold) 30%, transparent);
    background: color-mix(in oklab, var(--color-porra-gold) 7%, transparent);
  }

  .porra-ficha-slot.is-set .porra-ficha-slot__pts {
    color: var(--color-porra-gold);
  }

  /* Puntos de los grandes pronósticos: MISMOS tokens que los pronósticos de
     partido (.porra-pickrow__pts--*), para que el usuario no tenga que
     aprender dos lenguajes de color en la misma ficha. Verde acertó, amarillo
     acertó cobrando menos por cambiarlo tarde, gris falló.

     El oro se retira de esta insignia: estaba atado a `.is-set` (hay pick
     puesto) y ahora el número dice cuánto se sacó, así que un cero dorado se
     leería como premio. Los selectores repiten `.is-set` para ganarle a la
     regla de oro de arriba sin subir especificidad con !important. */
  .porra-ficha-champ__pts--exact,
  .porra-ficha-slot.is-set .porra-ficha-slot__pts--exact {
    color: var(--color-prediction-hit);
    background: color-mix(in srgb, var(--color-prediction-hit) 18%, transparent);
  }

  .porra-ficha-champ__pts--partial,
  .porra-ficha-slot.is-set .porra-ficha-slot__pts--partial {
    color: var(--color-warning-strong);
    background: color-mix(in srgb, var(--color-warning-strong) 18%, transparent);
  }

  .porra-ficha-champ__pts--zero,
  .porra-ficha-slot.is-set .porra-ficha-slot__pts--zero {
    color: var(--color-text-subtle);
    background: rgb(255 255 255 / 6%);
  }

  /* Chip, no texto suelto: el tinte al 18% necesita aire para leerse. */
  .porra-ficha-champ__pts,
  .porra-ficha-slot__pts {
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
  }

  /* Tú vs. jugador */
  .porra-ficha-vs {
    text-align: center;
  }

  .porra-ficha-vs__title {
    display: block;
    margin-bottom: var(--space-3);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .porra-ficha-vs__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
  }

  .porra-ficha-vs__side {
    flex: 1;
    min-width: 0;
  }

  .porra-ficha-vs__pos {
    display: block;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 24px;
    color: var(--color-text);
  }

  .porra-ficha-vs__side--them .porra-ficha-vs__pos {
    color: var(--color-porra-magenta);
  }

  .porra-ficha-vs__who {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .porra-ficha-vs__sep {
    flex-shrink: 0;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12px;
    color: var(--color-text-faint, var(--color-text-muted));
  }

  /* Actividad */
  .porra-ficha-activity__head {
    padding: var(--space-3) var(--space-3) var(--space-2);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .porra-ficha-act {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
  }

  .porra-ficha-act__dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-porra-magenta);
  }

  .porra-ficha-act__tx {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--color-text);
  }

  .porra-ficha-act__n {
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 99px;
    font-size: 11px;
    color: var(--color-porra-gold);
    background: color-mix(in oklab, var(--color-porra-gold) 14%, transparent);
  }

  .porra-ficha-act__when {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  /* ── Partidos jugados — read-only proof list: the player's finished+picked
       matches with the real result, their pick (coloured by hit) and points. ── */
  .porra-ficha-results__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-2);
  }

  .porra-ficha-results__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .porra-ficha-results__title {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .porra-ficha-results__sub {
    font-size: 12px;
    color: var(--color-text-subtle);
  }

  .porra-ficha-results__count {
    flex-shrink: 0;
    min-width: 22px;
    padding: 2px 8px;
    border-radius: 99px;
    text-align: center;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12px;
    color: var(--color-porra-gold);
    background: color-mix(in oklab, var(--color-porra-gold) 14%, transparent);
  }

  .porra-ficha-results__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .porra-ficha-result {
    position: relative; /* ancla el chip de puntos arriba a la derecha */
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    color: inherit;
    text-decoration: none;
  }

  @media (hover: hover) {
    a.porra-ficha-result:hover {
      background: var(--color-surface-hover);
    }
  }

  .porra-ficha-result__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .porra-ficha-result__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .porra-ficha-result__grp {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: var(--radius-sm);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    color: var(--color-text-muted);
    background: rgb(255 255 255 / 6%);
  }

  .porra-ficha-result__date {
    font-size: 11.5px;
    color: var(--color-text-muted);
    white-space: nowrap;
  }

  /* Points chip — absolute top-right (mirrors .porra-pickrow__pts), same colour
     code as the Pronósticos grid: green exact / amber partial / grey +0. */
  .porra-ficha-result__pts {
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    flex-shrink: 0;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12.5px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: var(--radius-sm);
  }

  .porra-ficha-result__pts--exact {
    color: var(--color-prediction-hit);
    background: color-mix(in srgb, var(--color-prediction-hit) 18%, transparent);
  }

  .porra-ficha-result__pts--partial {
    color: var(--color-warning-strong);
    background: color-mix(in srgb, var(--color-warning-strong) 18%, transparent);
  }

  .porra-ficha-result__pts--zero {
    color: var(--color-text-subtle);
    background: rgb(255 255 255 / 6%);
  }

  /* Equipos ↔ resultado — mismo patrón que .porra-pickrow: fila 1 alinea
     equipos y la caja del resultado por su centro vertical; fila 2 cuelga el
     badge "Pronóstico X-Y" bajo el score (su propia fila, para no descentrar). */
  .porra-ficha-result__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--space-2);
    row-gap: 0;
  }

  .porra-ficha-result__team {
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }

  .porra-ficha-result__team--home {
    grid-column: 1;
    justify-content: flex-end;
    text-align: right;
  }

  .porra-ficha-result__team--away {
    grid-column: 3;
    justify-content: flex-start;
    text-align: left;
  }

  .porra-ficha-result__name {
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-title);
    font-weight: normal;
    font-size: 15px;
    letter-spacing: 0.2px;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Sportmonks crests son logos cuadrados: contain-fit en un cuadrado pequeño
     (mismo tamaño que .porra-pickrow__team img). */
  .porra-ficha-result__crest {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    object-fit: contain;
  }

  /* Resultado real — caja igual que .porra-pickrow__score, fila 1, centrada
     verticalmente con los equipos. */
  .porra-ficha-result__score {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 16px;
    line-height: 1.3;
    color: #fff;
    white-space: nowrap;
  }

  /* "Pronóstico X-Y" — el pick como badge coloreado por acierto (el resultado
     real en la caja se queda neutro). Fila 2, centrado bajo el score, con
     margin-top igual que el "Tu X-Y" de la fila de Pronósticos. */
  .porra-ficha-result__pick {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    margin-top: 5px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11.5px;
    letter-spacing: 0.2px;
    color: var(--color-text-subtle);
    background: rgb(255 255 255 / 6%);
    white-space: nowrap;
  }

  .porra-ficha-result__pick--exact {
    color: var(--color-prediction-hit);
    background: color-mix(in srgb, var(--color-prediction-hit) 18%, transparent);
  }

  .porra-ficha-result__pick--partial {
    color: var(--color-warning-strong);
    background: color-mix(in srgb, var(--color-warning-strong) 18%, transparent);
  }

  .porra-ficha-result__pick--zero {
    color: var(--color-text-subtle);
    background: rgb(255 255 255 / 6%);
  }

  /* Follow — social-network style, centered under the hero name. No background,
     just a border; the star fills + turns gold when following. (Share lives in
     the toolbar; the old fixed dock was retired.) */
  .porra-ficha-follow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    margin: var(--space-3) auto 0;
    padding: 7px var(--space-4);
    border-radius: var(--radius-full);
    border: 1.5px solid rgb(255 255 255 / 30%);
    background: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    transition:
      border-color 0.15s ease,
      color 0.15s ease;
  }

  @media (hover: hover) {
    .porra-ficha-follow:hover {
      border-color: rgb(255 255 255 / 60%);
    }
  }

  .porra-ficha-follow__star {
    flex-shrink: 0;
    transition: fill 0.15s ease;
  }

  .porra-ficha-follow.is-following {
    border-color: var(--color-porra-gold);
    color: var(--color-porra-gold);
  }

  .porra-ficha-follow.is-following .porra-ficha-follow__star {
    fill: currentColor;
  }

  /* ─── Ficha: pick comparison rows ─── */
  .porra-compare {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .porra-compare__row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .porra-compare__row:last-child {
    border-bottom: 0;
  }

  .porra-compare__grp {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: var(--color-text-subtle);
    background: rgb(255 255 255 / 5%);
    padding: 2px 5px;
    border-radius: var(--radius-sm);
  }

  .porra-compare__teams {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .porra-compare__team {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .porra-compare__team img {
    width: 18px;
    height: 13px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
  }

  .porra-compare__pick {
    min-width: 50px;
    text-align: center;
    padding: 4px var(--space-2);
    border-radius: var(--radius-md);
  }

  .porra-compare__pick--them {
    background: rgb(255 211 77 / 8%);
    border: 1px solid rgb(255 211 77 / 25%);
  }

  .porra-compare__pick--you {
    background: rgb(0 255 135 / 8%);
    border: 1px solid rgb(0 255 135 / 30%);
  }

  .porra-compare__pick--you.is-empty {
    background: rgb(255 255 255 / 3%);
    border: 1px dashed rgb(255 255 255 / 10%);
  }

  .porra-compare__pick-who {
    display: block;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 8px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .porra-compare__pick--them .porra-compare__pick-who {
    color: var(--color-porra-gold);
  }

  .porra-compare__pick--you .porra-compare__pick-who {
    color: var(--color-accent);
  }

  .porra-compare__pick--you.is-empty .porra-compare__pick-who {
    color: var(--color-text-subtle);
  }

  .porra-compare__pick-score {
    display: block;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 14px;
    color: #fff;
  }

  .porra-compare__pick--you.is-empty .porra-compare__pick-score {
    color: var(--color-text-subtle);
  }

  /* ─── Ficha: follow button ─── */
  .porra-follow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    color: #fff;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
  }

  @media (hover: hover) {
    .porra-follow:hover {
      background: var(--color-surface-hover);
    }
  }

  .porra-follow.is-following {
    background: rgb(0 255 135 / 12%);
    border-color: rgb(0 255 135 / 35%);
    color: var(--color-accent);
  }

  /* Anonymous variant — an <a> that routes to the porra (sign-in) instead of
     a follow toggle; same chrome, no link underline. */
  .porra-follow--login {
    text-decoration: none;
  }
}

@layer components {
  /* Porra activity/ficha render their own full-bleed gradient hero, so the
     global .app__content padding-top would leave a gap above it. Scoped to
     body.porra-page only — no effect on the rest of the app. */
  body.porra-page .app__content {
    padding-top: 0;
  }
}

@layer components {
  /* ─── Grand-picks candidate picker ───
     Reuses the .select-modal-* bottom-sheet chrome (select-modal.css). The
     wrapper carries the Stimulus controller + the row <template>s but must not
     occupy a slot in the .porra-content flex column, so it collapses to
     display: contents (its only real children — backdrop/modal — are fixed). */
  .porra-candidate-picker {
    display: contents;
  }

  .porra-pick-empty {
    padding: var(--space-5) var(--space-4);
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
  }

  /* Player option row: avatar + (name / position · team) + nationality flag,
     layered over the shared .select-modal-option button. */
  .porra-pick-option {
    gap: var(--space-2);
  }

  .porra-pick-option__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border-subtle);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 13px;
    color: var(--color-text-secondary);
  }

  .porra-pick-option__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .porra-pick-option__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
  }

  .porra-pick-option .select-modal-option-label {
    flex: 0 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .porra-pick-option__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .porra-pick-option__flag {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    object-fit: contain;
  }
}

@layer components {
  /* ─── Per-match cover sheet ───
     Bottom-sheet (reuses the .select-modal shell from select-modal.css) with a
     match header on top + the shared pick-card below. Opened from a
     Pronósticos row by the porra-match-cover controller. */
  .porra-cover {
    color: var(--color-text);
  }

  .porra-cover__body {
    flex: 1;
    overflow: hidden auto;
    overscroll-behavior: contain;
    padding: var(--space-3);
    scrollbar-width: none;
  }

  .porra-cover__body::-webkit-scrollbar {
    display: none;
  }

  /* The pick-card is full-bleed inside the sheet body (the body already pads). */
  .porra-cover__body .porra-pickcard {
    margin: 0;
  }

  /* ─── Pick rows are buttons (open the cover sheet) ───
     Reset UA button chrome; the .porra-pickrow grid + divider already style
     the row identically to the old <a>. */
  button.porra-pickrow {
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    background: none;
    font: inherit;
    cursor: pointer;
    appearance: none;
  }

  button.porra-pickrow:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }
}

@layer components {
  /* ─── Hero kebab → reset-confirmation bottom-sheet ───
     The kebab dropdown itself reuses the global .dropdown-menu primitive
     (dropdown-menu.css); only the danger tint of its destructive item and the
     confirmation sheet's body/actions are porra-scoped. */
  .dropdown-menu__item--danger,
  .dropdown-menu__item--danger svg {
    color: var(--color-loss);
    stroke: var(--color-loss);
  }

  .porra-reset-sheet__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    padding-bottom: max(env(safe-area-inset-bottom), var(--space-4));
  }

  .porra-reset-sheet__text {
    margin: 0;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
  }

  .porra-reset-sheet__actions {
    display: flex;
    gap: var(--space-3);
  }

  .porra-reset-sheet__btn {
    flex: 1;
    min-height: 48px;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--weight-semibold);
    cursor: pointer;
  }

  .porra-reset-sheet__btn:active {
    transform: translateY(1px);
  }

  .porra-reset-sheet__btn--ghost {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }

  .porra-reset-sheet__btn--danger {
    background: var(--color-loss);
    color: var(--color-on-accent);
  }
}

/* ─── Blocked-screen empty states (501 endpoints) ─────────────────────────
   Public ficha (GET /porra/players/{id}) + match-pick unavailable fallback.
   Same visual language as the design-system empty states, porra-scoped. */
@layer components {
  .porra-ficha-unavailable,
  .porra-mp-unavailable {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
  }

  .porra-ficha-unavailable[hidden],
  .porra-mp-unavailable[hidden] {
    display: none;
  }

  .porra-ficha-unavailable__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-surface-sunken);
    color: var(--color-text-subtle);
  }

  .porra-ficha-unavailable__title {
    margin: 0;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 16px;
    color: var(--color-text);
  }

  .porra-ficha-unavailable__text,
  .porra-mp-unavailable__text {
    margin: 0;
    max-width: 32ch;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-muted);
  }

  .porra-ficha-unavailable__cta,
  .porra-mp-unavailable__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-on-accent, #04130b);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 13px;
    text-decoration: none;
  }

  .porra-ficha-hero--unavailable {
    padding-bottom: var(--space-4);
  }
}

/* ─── Ranking tab · blocked empty-state ───
   GET /porra/leaderboard is 501 until the tournament starts; the tab renders a
   single graceful "coming soon" card. Same visual language as the ficha /
   match-pick unavailable states. */
@layer components {
  .porra-ranking-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
  }

  .porra-ranking-soon[hidden] {
    display: none;
  }

  .porra-ranking-soon__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-surface-sunken);
    color: var(--color-text-subtle);
  }

  .porra-ranking-soon__icon svg {
    width: 26px;
    height: 26px;
  }

  .porra-ranking-soon__title {
    margin: 0;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 16px;
    color: var(--color-text);
  }

  .porra-ranking-soon__text {
    margin: 0;
    max-width: 32ch;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-muted);
  }

  .porra-ranking-soon__hint {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-subtle);
  }
}

/* ─── Anonymous user-strip as a CTA + auth gate sheet ───
   For anonymous visitors the user-strip is a <button> that opens the auth gate;
   any attempt to play (covered by [data-porra-gate]) opens it too. The gate
   reuses the shared .select-modal bottom-sheet chrome (select-modal.css). */
@layer components {
  button.porra-userstrip {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition:
      background var(--duration-fast) var(--easing-default),
      border-color var(--duration-fast) var(--easing-default);
  }

  .porra-userstrip__cta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: rgb(255 255 255 / 12%);
    color: #fff;
  }

  @media (hover: hover) {
    button.porra-userstrip:hover {
      background: rgb(0 0 0 / 45%);
      border-color: rgb(255 255 255 / 18%);
    }
  }

  button.porra-userstrip:focus-visible {
    outline: 2px solid var(--color-porra-cyan);
    outline-offset: 2px;
  }

  /* ── Modal chrome polish (scoped to .porra-auth-gate so the shared
        .select-modal chrome other pickers use is untouched) ──────────────
     Mobile: bottom-sheet (inherits .select-modal). Desktop: a centered card.
     A porra-magenta top accent gives the sheet its campaign identity. */
  .porra-auth-gate {
    /* border-top: 3px solid var(--color-porra-magenta); */
  }

  .porra-auth-gate .select-modal-title {
    font-size: var(--text-xl);
  }

  /* Scroll the form body, keep the header pinned. The shared chrome already
     caps the sheet height; this lets a tall register flow scroll cleanly
     (no visible scrollbar — house rule). */
  .porra-auth-gate__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .porra-auth-gate__body::-webkit-scrollbar {
    display: none;
  }

  /* The embedded login/register forms reuse the shared .auth-page skin
     (auth.css). Inside the sheet we drop the card chrome (the modal already
     provides the surface) — only the fields/buttons/errors styling carries
     over. */
  .porra-auth-gate__embed {
    background: transparent;
    padding: 30px var(--space-8) var(--space-5);
  }

  .porra-auth-gate__embed .login-container,
  .porra-auth-gate__embed .register-container {
    max-width: none;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  /* Panels toggle via the `hidden` attribute (controller). Without this the
     base containers have no `display`, so `hidden` already works — but make it
     explicit and robust in case a future rule sets display on them. */
  .porra-auth-gate__panel[hidden] {
    display: none;
  }

  /* NOTE: hiding the bundle's own `.social-divider` + the register social block
     lives in an `@layer pages` block at the end of this file — it must beat
     auth.css's `.auth-page .social-divider` which is itself in `@layer pages`
     (a `@layer components` rule can never win against it, regardless of
     specificity). See the bottom of this file. */

  /* Our divider between the social buttons and the email form. */
  .porra-auth-gate__divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0;
  }

  .porra-auth-gate__divider::before,
  .porra-auth-gate__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
  }

  .porra-auth-gate__divider span {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
  }

  /* Login ⇄ register toggle footer. Reuses the .register-link/.login-link skin
     (auth.css) for the wrapper; the action lives on a real <button> styled as a
     link so it never navigates. */
  .porra-auth-gate__switch {
    margin-top: var(--space-5);
  }

  .porra-auth-gate__switch-btn {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--color-porra-cyan);
    font-weight: var(--weight-semibold);
    cursor: pointer;
  }

  .porra-auth-gate__switch-btn:hover {
    text-decoration: underline;
  }

  .porra-auth-gate__switch-btn:focus-visible {
    outline: 2px solid var(--color-porra-cyan);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* Desktop: lift the sheet into a centered, capped-width modal instead of a
     full-width bottom strip. The shared chrome animates transform; we keep that
     and just re-anchor + round all corners. */
  @media (width >= 640px) {
    /* `.select-modal.porra-auth-gate` (2 type-equal classes) outranks the
       shared `.select-modal` / `.select-modal.active` transform rules, which
       in source order load AFTER this file (app.js imports porra-activity
       before select-modal). Without the extra class the bottom-sheet transform
       would win and the desktop centering wouldn't animate. */
    .select-modal.porra-auth-gate {
      left: 50%;
      right: auto;
      bottom: auto;
      top: 50%;
      width: min(420px, calc(100vw - 2 * var(--space-6)));
      max-height: min(88vh, 720px);
      border-radius: var(--radius-lg);
      transform: translate(-50%, calc(-50% + 16px));
      opacity: 0;
      transition:
        transform 0.25s var(--easing-default),
        opacity 0.25s var(--easing-default);
    }

    .select-modal.porra-auth-gate.active {
      transform: translate(-50%, -50%);
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .select-modal.porra-auth-gate {
      transition: none;
    }
  }
}

/* Suppress the bundle's stock auth chrome inside the porra modal. These override
   auth.css (`.auth-page .social-divider`, `@layer pages`), so they MUST live in
   `@layer pages` too — a `@layer components` rule loses to it on layer order
   regardless of specificity. Within `pages`, our higher specificity wins.
   - login: hide the bundle's own "o continúa con" divider (we ship our own
     "o con tu correo" divider below the social block, social-first).
   - register: hide its native social block — social sign-up is one tap away on
     the login panel, so the register panel stays a clean email-only flow. */
@layer pages {
  /* Flatten the embedded auth "card" inside the modal: the dialog surface
     (.select-modal = --color-surface) shows straight through, no inner card.
     `.porra-activity ...` (0,3,0) outranks auth.css `.auth-page .login-container`
     (0,2,0) within the shared `pages` layer, so the gutter comes only from the
     embed — one consistent inset, header/lead/fields aligned. */
  .porra-activity .porra-auth-gate__embed .login-container,
  .porra-activity .porra-auth-gate__embed .register-container {
    max-width: none;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .porra-auth-gate__embed .login-container .social-divider,
  .porra-auth-gate__embed .register-container .social-divider,
  .porra-auth-gate__embed .register-container .social-buttons {
    display: none;
  }

  /* Sticky hero chrome — reuses the entity pattern (the `.hero-nav` LAYOUT comes
     from entity-hero.css; only the sticky POSITIONING lives here). In `@layer
     pages` so the tabs-wrapper rule beats team-detail.css `.entity-tabs-wrapper`
     (also pages) — a components-layer rule would lose on layer order. The entity
     sticky cascade (entity-sticky.css) is body-class-scoped to team/league/
     player/match, so the porra needs its own copy scoped to `.porra-activity`. */
  .porra-activity .hero-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: transparent;
    transition:
      background-color 200ms ease,
      backdrop-filter 200ms ease;
  }

  .porra-activity .hero-nav.is-stuck {
    background: color-mix(in oklab, var(--color-bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
  }

  .porra-activity .entity-tabs-wrapper {
    position: sticky;
    top: var(--hero-nav-height, 56px);
    z-index: 10;
    background: var(--color-bg);
  }

  /* Corona de la pestaña Ganadores. `.entity-tab` es un `<a>` en línea, así que
     el icono se alinea con vertical-align (no con flex, que rompería el
     white-space: nowrap del nav scrollable). Dorada siempre —también en la
     pestaña inactiva, gris—: es el ancla visual de la campaña. */
  .porra-tab__crown {
    /* reset.css pone TODO svg en `display: block`, lo que empujaba la corona a
       su propia línea y hacía la pestaña el doble de alta. */
    display: inline-block;
    vertical-align: -2px;
    margin-right: 5px;
    color: var(--color-porra-gold);
  }

  /* Sheet open → drop the sticky chrome below the content so the open
     bottom-sheet paints over the tabs/nav. The porra sheets either sit
     at the `.porra-activity` root (share / auth-gate: z-index 9999, win
     anyway) OR deep inside a `.porra-content` column whose
     `.porra-activity > *` rule gives it `z-index: 1` — the latter
     (candidate picker, per-match cover sheet) is trapped, so its 9999
     can't beat the sticky tabs (`z-index: 10`) / hero-nav (20) by raw
     z-index. Lowering the chrome to `z-index: 0` lets `.porra-content`
     (z-index 1) win the sibling comparison so every sheet renders on
     top on all viewports. `body.dismissable-scroll-locked` is the
     refcounted sheet-open flag from `lib/dismissable.js` (via
     `openSheet`), so this only applies while a sheet is up. Mirrors the
     entity-sticky.css rule for team/league/player/match. */
  body.dismissable-scroll-locked .porra-activity .hero-nav,
  body.dismissable-scroll-locked .porra-activity .entity-tabs-wrapper {
    z-index: 0;
    pointer-events: none;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   Autofill dock — "Cubrir con IA / Azar". A floating bar pinned above the bottom
   nav that fills every pending scoreline in one tap. Ships `hidden`; the
   porra-autofill controller reveals it when there are pending matches and hides
   it again at zero. (CSS imported via app.js → wrap in @layer explicitly.)
   ──────────────────────────────────────────────────────────────────────────── */
@layer components {
  .porra-autofill {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 40;
    display: flex;
    justify-content: center;
    padding: 0 var(--space-3) 0;
    pointer-events: none; /* taps pass through the gutters; the bar re-enables */
    animation: porra-autofill-in 0.28s ease both;
  }

  .porra-autofill[hidden] {
    display: none;
  }

  .porra-autofill__bar {
    pointer-events: auto;
    width: 100%;
    max-width: 520px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    /* Mockup wash: magenta→cyan tint over the surface. */
    background: linear-gradient(135deg, rgba(232, 25, 91, 0.13), rgba(0, 200, 245, 0.07)),
      var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
  }

  .porra-autofill__lbl {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
  }

  .porra-autofill__count {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text);
    white-space: nowrap;
  }

  .porra-autofill__hint {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .porra-autofill__seg {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
  }

  /* Segment swap: cover (IA/Azar) until everything's picked, then Reiniciar. */
  .porra-autofill__seg--reset {
    display: none;
  }

  .porra-autofill.is-complete .porra-autofill__seg--fill {
    display: none;
  }

  .porra-autofill.is-complete .porra-autofill__seg--reset {
    display: flex;
  }

  .porra-autofill__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    transition:
      transform 0.12s ease,
      filter 0.12s ease,
      opacity 0.12s ease;
  }

  .porra-autofill__btn:active {
    transform: scale(0.95);
  }

  .porra-autofill__btn--ai {
    color: #fff;
    background: linear-gradient(135deg, var(--color-porra-magenta), var(--color-porra-purple));
  }

  .porra-autofill__btn--rnd {
    color: var(--color-text);
    background: color-mix(in oklab, var(--color-text) 10%, transparent);
  }

  /* Reiniciar — neutral by default, danger-tinted on hover (it opens the
     destructive confirm sheet). Wider: it's the only action in this state. */
  .porra-autofill__btn--reset {
    color: var(--color-text);
    background: color-mix(in oklab, var(--color-text) 10%, transparent);
    padding: 8px 18px;
  }

  .porra-autofill__btn--reset:hover {
    color: var(--color-danger, #e8195b);
    background: color-mix(in oklab, var(--color-danger, #e8195b) 14%, transparent);
  }

  .porra-autofill__btn--reset:hover .porra-autofill__ic {
    animation: porra-dice-wobble 0.7s ease-in-out infinite;
  }

  .porra-autofill__ic {
    flex-shrink: 0;
  }

  /* Idle liveliness — the icons react on hover so they never feel dead. */
  .porra-autofill__btn--ai:hover .porra-autofill__ic {
    animation: porra-spark-twinkle 1.1s ease-in-out infinite;
  }

  .porra-autofill__btn--rnd:hover .porra-autofill__ic {
    animation: porra-dice-wobble 0.7s ease-in-out infinite;
  }

  /* Working: lock both buttons; the chosen mode's icon animates through the
     whole cascade (spark spins for IA, dice rolls for Azar), the other dims. */
  .porra-autofill.is-working .porra-autofill__btn {
    pointer-events: none;
  }

  .porra-autofill.is-working.is-ai .porra-autofill__btn--rnd,
  .porra-autofill.is-working.is-random .porra-autofill__btn--ai {
    opacity: 0.5;
  }

  .porra-autofill.is-working.is-ai .porra-autofill__btn--ai .porra-autofill__ic {
    animation: porra-spark-spin 0.85s linear infinite;
  }

  .porra-autofill.is-working.is-random .porra-autofill__btn--rnd .porra-autofill__ic {
    animation: porra-dice-roll 0.6s ease-in-out infinite;
  }

  /* Error (auth/network): a quick shake, no destructive copy. */
  .porra-autofill.has-error .porra-autofill__bar {
    animation: porra-autofill-shake 0.4s ease;
  }

  /* Cascade flash on each row as its score lands. */
  .porra-pickrow--autofilled {
    animation: porra-row-pop 0.5s ease;
  }

  .porra-pickrow--ai .porra-pickrow__score {
    animation: porra-flash-ai 0.6s ease;
  }

  .porra-pickrow--random .porra-pickrow__score {
    animation: porra-flash-rnd 0.6s ease;
  }

  /* Keep the last card clear of the fixed dock. */
  .porra-panel[data-porra-panel="pronosticos"] {
    padding-bottom: 72px;
  }

  @keyframes porra-autofill-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes porra-autofill-shake {
    0%,
    100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-5px);
    }
    75% {
      transform: translateX(5px);
    }
  }

  @keyframes porra-spark-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes porra-spark-twinkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
    }
    50% {
      transform: scale(1.25) rotate(18deg);
    }
  }

  @keyframes porra-dice-roll {
    0% {
      transform: rotate(0deg) scale(1);
    }
    50% {
      transform: rotate(180deg) scale(0.82);
    }
    100% {
      transform: rotate(360deg) scale(1);
    }
  }

  @keyframes porra-dice-wobble {
    0%,
    100% {
      transform: rotate(-12deg);
    }
    50% {
      transform: rotate(12deg);
    }
  }

  @keyframes porra-row-pop {
    0% {
      transform: scale(1);
    }
    30% {
      transform: scale(1.012);
    }
    100% {
      transform: scale(1);
    }
  }

  @keyframes porra-flash-ai {
    0% {
      background: transparent;
    }
    30% {
      background: color-mix(in oklab, var(--color-porra-magenta) 22%, transparent);
    }
    100% {
      background: transparent;
    }
  }

  @keyframes porra-flash-rnd {
    0% {
      background: transparent;
    }
    30% {
      background: color-mix(in oklab, var(--color-porra-cyan) 20%, transparent);
    }
    100% {
      background: transparent;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .porra-autofill,
    .porra-pickrow--autofilled,
    .porra-pickrow--ai .porra-pickrow__score,
    .porra-pickrow--random .porra-pickrow__score,
    .porra-autofill__btn--ai:hover .porra-autofill__ic,
    .porra-autofill__btn--rnd:hover .porra-autofill__ic,
    .porra-autofill.is-working.is-ai .porra-autofill__btn--ai .porra-autofill__ic,
    .porra-autofill.is-working.is-random .porra-autofill__btn--rnd .porra-autofill__ic {
      animation: none;
    }
  }
}

@layer components {
  /* ─── Compartir porra — bottom-sheet ───
     Chrome (fixed bottom sheet, slide-up, backdrop, header) comes from
     .select-modal (select-modal.css); these rules style only the body:
     recap + QR + link row + channel grid. Mounted on the ficha root via the
     `porra-share-sheet` controller; opened from the hero/kebab/dock triggers. */
  .porra-share {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    /* The sheet is capped at 70vh by .select-modal; let it scroll without
       showing the scrollbar chrome (modal scrollbar convention). The parent
       .select-modal already manages the lateral padding band. */
    padding: var(--space-4);
    overflow-y: auto;
    scrollbar-width: none;
  }

  .porra-share::-webkit-scrollbar {
    display: none;
  }

  .porra-share__subtitle {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-muted);
  }

  /* Recap — avatar + identity (name / @handle / #rank de total). */
  .porra-share__recap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .porra-share__avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-porra-gold), var(--color-porra-gold-dark));
    border: 2px solid rgb(255 255 255 / 18%);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 22px;
    color: #fff;
  }

  .porra-share__id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .porra-share__name {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 16px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .porra-share__handle {
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--color-porra-gold);
  }

  .porra-share__rank {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  /* Mini-stats row (puntos / cubiertas / ranking). */
  .porra-share__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  .porra-share__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-2) 0;
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border-subtle);
  }

  .porra-share__stat-v {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 18px;
    color: var(--color-text);
  }

  .porra-share__stat-v small {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .porra-share__stat-l {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  /* QR — the controller injects an SVG into `__qr-code`; a brand-gradient
     frame rings a white inner card so dark QR modules read on any surface,
     and a centred initials badge sits above the SVG (sibling, not child, so
     innerHTML never wipes it). */
  .porra-share__qr {
    position: relative;
    align-self: center;
    width: 180px;
    height: 180px;
    padding: 4px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-porra-magenta), var(--color-porra-cyan));
    box-shadow: 0 2px 12px rgb(0 0 0 / 25%);
  }

  .porra-share__qr-code {
    width: 100%;
    height: 100%;
    padding: var(--space-3);
    border-radius: calc(var(--radius-lg) - 4px);
    background: #fff;
  }

  .porra-share__qr-code svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .porra-share__qr-code svg rect {
    fill: #0b0b0f;
  }

  /* Centred initials badge over the QR — brand gradient + white ring so the
     surrounding modules stay legible. Sits above the SVG (z-index). */
  .porra-share__qr-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-porra-magenta), var(--color-porra-cyan));
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #fff;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 17px;
    color: #fff;
  }

  /* Link row — monospace url that ellipsises + a copy button. */
  .porra-share__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .porra-share__link-label {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
  }

  .porra-share__link-url {
    flex: 1;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .porra-share__link-url:focus-visible {
    outline: none;
    border-color: var(--color-accent);
  }

  .porra-share__link-copy {
    flex-shrink: 0;
    padding: 9px 14px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    cursor: pointer;
  }

  .porra-share__link-copy:active {
    transform: translateY(1px);
  }

  /* Channel grid — WhatsApp / Telegram / Copiar / Más (icon + label). */
  .porra-share__channels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
  }

  .porra-share__channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--space-3) var(--space-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition:
      border-color 120ms ease,
      color 120ms ease,
      background 120ms ease;
  }

  .porra-share__channel:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
    background: var(--color-surface-hover);
  }

  .porra-share__channel:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .porra-share__channel:active {
    transform: translateY(1px);
  }

  .porra-share__channel svg {
    flex-shrink: 0;
  }

  /* ─── Simulación tab ─── */
  .porra-sim-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-secondary);
  }

  .porra-sim-gate__icon {
    color: var(--color-porra-cyan);
  }

  .porra-sim-gate__title {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    color: var(--color-text);
    margin: 0;
  }

  .porra-sim-gate__msg {
    margin: 0;
    max-width: 32ch;
  }

  /* Two big toggle pills */
  .porra-sim__pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .porra-sim__pill {
    padding: var(--space-3);
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-default), color var(--duration-fast) var(--easing-default);
  }

  .porra-sim__pill--active {
    background: var(--color-porra-magenta);
    border-color: var(--color-porra-magenta);
    color: #fff;
  }

  /* Fixture filter (Todos / Finalizados / Próximos) — same pill look as
     Simulación, in a 3-up row with a count badge. */
  .porra-fixfilter {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .porra-fixfilter__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--space-2);
    font-size: var(--text-sm);
  }

  .porra-fixfilter__count {
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
  }

  .porra-sim__pill--active .porra-fixfilter__count {
    opacity: 0.85;
  }

  .porra-fixfilter__empty {
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  /* JS-toggled hide for filtered-out rows / empty date cards / jornadas.
     A class (not the `hidden` attr) + !important so it wins over the
     flex/grid display the pick-rows and cards set. */
  .is-filter-hidden {
    display: none !important;
  }

  .porra-sim-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  @media (min-width: 600px) {
    .porra-sim-groups {
      grid-template-columns: 1fr 1fr;
    }
  }

  .porra-sim-group {
    padding: var(--space-3);
  }

  .porra-sim-group__head {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
  }

  .porra-sim-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .porra-sim-table th {
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    text-align: center;
    padding: 0 var(--space-1) var(--space-1);
  }

  .porra-sim-table td {
    padding: var(--space-1) var(--space-1);
    text-align: center;
    color: var(--color-text);
    border-top: 1px solid var(--color-border-subtle);
  }

  .porra-sim-table th:nth-child(2),
  .porra-sim-table__team {
    text-align: left;
  }

  .porra-sim-table__pos {
    width: 1.6em;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
  }

  .porra-sim-table__team {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }

  .porra-sim-table__crest {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .porra-sim-table__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--weight-semibold);
  }

  .porra-sim-table__pts {
    font-family: var(--font-mono);
    font-weight: var(--weight-bold);
  }

  /* Qualifiers: top-2 (green rail) + best-third (amber rail) */
  .porra-sim-table__row--q td:first-child {
    box-shadow: inset 3px 0 0 var(--color-prediction-hit);
  }

  .porra-sim-table__row--q3 td:first-child {
    box-shadow: inset 3px 0 0 var(--color-porra-gold);
  }

  .porra-sim-legend {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
  }

  .porra-sim-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  .porra-sim-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
  }

  .porra-sim-legend__dot--q {
    background: var(--color-prediction-hit);
  }

  .porra-sim-legend__dot--q3 {
    background: var(--color-porra-gold);
  }

  .porra-sim-soon {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--color-text-secondary);
  }

  /* ── Eliminatorias (Paso 2) — dieciseisavos (R32) por zona, sin ganadores ── */
  .porra-sim-r32__intro,
  .porra-sim-r32__note {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
  }

  .porra-sim-r32__intro {
    margin-bottom: var(--space-3);
  }

  .porra-sim-r32__note {
    margin-top: var(--space-3);
  }

  .porra-sim-r32-zone {
    padding: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .porra-sim-r32-zone__head {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
  }

  .porra-sim-r32-tie {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
  }

  .porra-sim-r32-tie + .porra-sim-r32-tie {
    border-top: 1px solid var(--color-border-subtle);
  }

  .porra-sim-r32-team {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }

  .porra-sim-r32-tie__vs {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
  }

  .porra-sim-r32-tie__vs ~ .porra-sim-r32-team {
    flex-direction: row-reverse;
    text-align: right;
  }

  .porra-sim-r32-team__crest {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .porra-sim-r32-team__crest--ph {
    border-radius: var(--radius-full);
    border: 1px dashed var(--color-border-subtle);
  }

  .porra-sim-r32-team__name {
    min-width: 0;
    font-size: var(--text-sm);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .porra-sim-r32-team--pick .porra-sim-r32-team__name {
    font-weight: var(--weight-bold);
    color: var(--color-porra-gold);
  }

  .porra-sim-r32-team__badge {
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    background: color-mix(in oklch, var(--color-porra-gold) 16%, transparent);
    color: var(--color-porra-gold);
    white-space: nowrap;
  }

  /* Coherence diagnostic — ¿tu cuadro deja llegar a tus 4 grandes picks? */
  .porra-sim-diag {
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    border-left: 3px solid var(--color-border);
  }

  .porra-sim-diag--ok {
    border-left-color: var(--color-prediction-hit);
  }

  .porra-sim-diag--warn {
    border-left-color: var(--color-warning-strong);
  }

  .porra-sim-diag__head {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
    color: var(--color-text);
  }

  .porra-sim-diag__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .porra-sim-diag__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--color-text-secondary);
  }

  .porra-sim-diag__icon {
    flex-shrink: 0;
    display: inline-flex;
  }

  .porra-sim-diag__item--ok .porra-sim-diag__icon {
    color: var(--color-prediction-hit);
  }

  .porra-sim-diag__item--warn .porra-sim-diag__icon {
    color: var(--color-warning-strong);
  }

  /* Puente a la Simulación — card bajo "Grandes pronósticos" en Pronósticos.
     Toda la card es el enlace; acento cyan = identidad de la pestaña Simulación. */
  .porra-sim-bridge {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-text);
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--color-porra-cyan) 28%, transparent);
    background:
      radial-gradient(90% 130% at 0% 0%, color-mix(in srgb, var(--color-porra-cyan) 11%, transparent) 0%, transparent 62%),
      var(--color-surface);
    transition: border-color var(--duration-fast) ease, transform var(--duration-fast) ease;
  }

  .porra-sim-bridge:active {
    transform: scale(0.99);
  }

  .porra-sim-bridge__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    color: var(--color-porra-cyan);
    background: color-mix(in srgb, var(--color-porra-cyan) 14%, transparent);
  }

  .porra-sim-bridge__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
  }

  .porra-sim-bridge__text {
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--color-text-secondary);
  }

  .porra-sim-bridge__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    color: var(--color-porra-cyan);
  }
}


@layer components {
  /* ── "Fase actual" card — above the matchday grids, from GET /porra/state. ── */
  .porra-phase-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .porra-phase-card[hidden] {
    display: none;
  }

  .porra-phase-card__label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
  }

  .porra-phase-card__value {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    color: #fff;
  }

  .porra-phase-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-porra-cyan);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-porra-cyan) 22%, transparent);
  }

  /* ── Grand-pick change-warning sheet (reuses .porra-reset-sheet body). ── */
  .porra-grandlock__rules {
    display: inline-block;
    margin: var(--space-2) 0 0;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    color: var(--color-porra-cyan);
    text-decoration: none;
  }

  /* ── Avatar real de usuario superpuesto (helper user-avatar) ───────────────
     Cada círculo ya pinta su fallback (iniciales+color, silueta de marca); la
     foto real se monta encima y, si el CDN dice que no hay (403), el onerror la
     retira y el fallback sobrevive. overflow:hidden recorta al círculo; el
     contenedor necesita position para el overlay absoluto. */
  .porra-rank-row__avatar,
  .porra-ficha-hero__avatar,
  .porra-share__avatar,
  .porra-userstrip__avatar {
    position: relative;
    overflow: hidden;
  }

  .porra-rank-row__avatar-img,
  .porra-ficha-hero__avatar-img,
  .porra-share__avatar-img,
  .porra-userstrip__avatar-img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}