/* ---------------------------------------------------------------- LOS RETOS DEL CLUB DE LA CASA (entrega 3, js/club-retos.js)
   La placa de la portada (js/hub.js), la pantalla (Hoy / Esta semana / Encargos, tres papeles de 4 columnas) y las filas del recibo.
   Misma escala y sistema que la tienda (gx-stage con --k, cabecera .bq-head). Letra minima de la Deck: 16 px Silkscreen y 18 px Jersey. */

/* ---------- la pantalla (espacio de diseno 1280 x 720, como el resto del hub) */
.rt-screen { z-index: 1; }
.rt-grid { grid-template-rows: auto minmax(0, 1fr); row-gap: 14px; }
.rt-col { grid-row: 2; grid-column: span 4; min-width: 0; min-height: 0; }
.rt-pp { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; padding: 16px 18px 14px; color: var(--gx-ink); }
.rt-pp:not(:has(.rt-days)) { grid-template-rows: auto minmax(0, 1fr) auto; }
.rt-pp.rt-lac { background: linear-gradient(180deg, #fff6e2 0, #f8ead0 30%, #f0d9b0 100%); }
.rt-ch { display: grid; gap: 6px; min-width: 0; padding-bottom: 10px; border-bottom: 2px dashed var(--gx-paper-lo); }
.rt-ch .gx-t-m { font-size: 34px; color: var(--gx-ink); text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rt-each { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--gx-gold-lo); white-space: nowrap; }
.ck-fi.rt { width: 18px; height: 18px; vertical-align: -3px; }
.rt-days { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-day { margin: 0; padding: 4px 10px 5px; border: 0; cursor: pointer; font-family: var(--sans); font-size: 18px; line-height: 1; white-space: nowrap; color: var(--gx-ink); background: #fffaf0; box-shadow: inset 0 0 0 2px var(--gx-ink); }
.rt-day:hover, .rt-day.pad-hov { background: #fff3d6; }
.rt-day.on { color: var(--gx-acc); background: var(--gx-ink); }
.rt-day:focus { outline: none; }
.rt-day:focus-visible, html[data-input="pad"] .rt-day:focus { box-shadow: inset 0 0 0 2px var(--gx-ink), 0 0 0 3px var(--gx-red); }

/* una fila: icono de logro, la frase y debajo la barra con el progreso (los encargos llevan su pago en un lacre bajo el icono) */
.rt-list { display: grid; grid-auto-rows: minmax(min-content, 1fr); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 2px 0 0; }   /* las tres filas se reparten el alto */
.rt-row + .rt-row { border-top: 2px dotted rgba(205, 189, 151, .7); }
.rt-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 12px; row-gap: 6px; align-items: center; min-width: 0; padding: 12px 0 14px; }
.rt-ic { position: relative; grid-row: 1 / span 2; width: 64px; height: 64px; display: grid; place-items: center; }
.rt-ic .ic { display: block; width: 64px; height: 64px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(22, 36, 28, .28)); }
.rt-ic .ic[class*=" ic-ach_"], .rt-ic .ic[class*=" ic-k_"] { width: 48px; height: 48px; }   /* los logros y los continentes son de 48 px: a x1, centrados en su hueco de 64 */
.rt-tx { grid-column: 2 / 4; align-self: end; min-width: 0; font-family: var(--sans); font-size: 22px; line-height: 1.02; text-wrap: pretty; overflow-wrap: break-word; }
.rt-bar { grid-column: 2; align-self: center; position: relative; height: 14px; background: #d8cba8; box-shadow: inset 0 0 0 2px var(--gx-ink); }
.rt-bar i { position: absolute; left: 2px; top: 2px; bottom: 2px; max-width: calc(100% - 4px); background: repeating-linear-gradient(90deg, var(--gx-gold) 0 8px, #ffd98a 8px 10px); }
.rt-pr { grid-column: 3; font-family: var(--mono); font-weight: 400; font-size: 16px; line-height: 1; white-space: nowrap; color: var(--gx-ink-2); font-variant-numeric: tabular-nums; }
.rt-tag { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%) rotate(-3deg); display: inline-flex; align-items: center; gap: 2px; padding: 3px 5px 2px 6px; font-family: var(--mono); font-weight: 400; font-size: 16px; line-height: 1; white-space: nowrap;
  color: #fff3d6; background: var(--gx-red-lo); clip-path: var(--gx-notch); }
.rt-row.done .rt-tx { color: var(--gx-ink-2); }
.rt-row.done .rt-ic .ic { opacity: .75; }
.rt-row.done .rt-bar i { background: repeating-linear-gradient(90deg, #4f9e6b 0 8px, #79c08f 8px 10px); }
.rt-ok { grid-column: 3; font-family: var(--mono); font-size: 16px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; padding: 4px 6px 3px; color: #2c6b45; box-shadow: inset 0 0 0 2px #2c6b45; transform: rotate(-4deg); }
.rt-new { display: inline-block; margin-left: 8px; vertical-align: 2px; padding: 3px 6px 2px; font-style: normal; font-family: var(--mono); font-size: 16px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: #fff3d6; background: var(--gx-red); clip-path: var(--gx-notch); }
.rt-row.fresh { animation: rt-drop .6s cubic-bezier(.2, 1.3, .4, 1) .35s both; }
@keyframes rt-drop { from { transform: translateY(-22px) rotate(-2deg); opacity: 0; } to { transform: none; opacity: 1; } }
.rt-ft { margin: 0; padding-top: 10px; display: grid; gap: 6px; border-top: 2px dashed var(--gx-paper-lo); font-family: var(--sans); font-size: 18px; line-height: 1.12; color: var(--gx-ink-2); text-wrap: pretty; }
.rt-ft b { font-weight: 400; color: #2c6b45; }
.rt-when { font-family: var(--mono); font-size: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--gx-gold-lo); }
html.reduce-motion .rt-row.fresh { animation: none; }

/* ---------- el recibo del Club: los retos cumplidos en la partida, tachados uno a uno (js/club.js retoRows / play) */
.club-tk .ck-rts { display: grid; gap: 6px; padding-top: 8px; border-top: 2px dashed var(--gx-paper-lo); }
.club-tk .ck-rt { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; opacity: .5; transition: opacity .2s; }
.club-tk .ck-rti .ic { display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.club-tk .ck-rtx { min-width: 0; font-family: var(--sans); font-size: 18px; line-height: 1.02; text-wrap: pretty; overflow-wrap: break-word; }
.club-tk .ck-rtx em { display: block; margin-bottom: 2px; font-style: normal; font-family: var(--mono); font-size: 16px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--gx-gold-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.club-tk .ck-rtx > span { text-decoration: line-through 2px transparent; transition: text-decoration-color .3s ease; }
.club-tk .ck-rt .ck-f { font-size: 22px; }
.club-tk .ck-rt.on { opacity: 1; }
.club-tk .ck-rt.on:not(.sum) .ck-rtx > span { text-decoration-color: rgba(158, 42, 38, .85); }
.club-tk .ck-rt.on .ck-f { animation: ck-pop .55s cubic-bezier(.2, 1.5, .4, 1) both; }
.club-tk .ck-rt.on .ck-rti .ic { animation: rt-stamp .4s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes rt-stamp { from { transform: scale(1.5) rotate(-8deg); } to { transform: none; } }
html.reduce-motion .club-tk .ck-rtx > span { transition: none; }
html.reduce-motion .club-tk .ck-rt.on .ck-f, html.reduce-motion .club-tk .ck-rt.on .ck-rti .ic { animation: none; }