/* 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);
  }

  .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%);
  }

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

  .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);
  }

  .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;
  }

  .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);
  }

  /* 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);
  }

  /* 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;
  }
}