/* ══════════════════════════════════════════════════════════════════════════
   juego.css — «El juego de Tagers» (round 32, 2026-10-19). One sheet, four blocks between marks, ONE writer per block
   (HECHOS «Round 32 — the mechanism» M32-1/M32-2). equipo.css, equipo-v2.css, salas.css, mapa.css, escritorio.css are
   read-only this round. Tokens below are NAMES seeded with the kit's values: design changes the VALUES (and may add a
   token by a HECHOS line); the screen lanes build against the names from minute 0. Every new screen is its own room:
   its light (a background token), its objects (seal marks, an illustration), one motion that prefers-reduced-motion stops.
   Kill = this file's link in app/layout.tsx (one line) — nothing of the 310 phones reads it until a lane's class does.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── r32 · design ── (shared tokens + design's pieces: CredencialEstado, Termometro, PrimeraSemana, Reaccion, Concurso) */

/* ---- Reaccion (G3, HECHOS M32-5): the one-tap applause — vino at rest, gold when it is hers; how many, never who; its one motion = the press. ---- */
.reaccion { display: inline-flex; margin: 0; }
.reaccion .rx-boton {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px; border-radius: var(--r-pastilla);
  border: 2px solid var(--jg-reaccion); background: transparent; color: var(--jg-reaccion); font: 700 var(--t-cuerpo)/1 var(--f-texto);
  font-variant-numeric: tabular-nums; cursor: pointer; transition: transform var(--d-1) var(--resorte);
}
.reaccion .rx-boton:active { transform: scale(.94); }
.reaccion .rx-boton:focus-visible { outline: 3px solid var(--jg-nivel); outline-offset: 2px; }
.reaccion .rx-ico { display: grid; place-items: center; width: 24px; height: 24px; }
.reaccion .rx-ico .ico { width: 24px; height: 24px; }
.reaccion .rx-n { padding-left: 8px; border-left: 2px solid currentColor; }
.reaccion[data-mia] .rx-boton { border-color: var(--jg-nivel); background: var(--jg-sello-fondo); color: var(--jg-reaccion-mia); }
@media (prefers-reduced-motion: reduce) { .reaccion, .reaccion *, .reaccion *::before, .reaccion *::after { animation: none !important; transition: none !important; } }
:root {
  --jg-sello: var(--oro-tinta);            /* the ink of a seal */
  --jg-sello-fondo: var(--oro-claro);      /* the seal's paper */
  --jg-nivel: var(--oro);                  /* the escalón mark */
  --jg-termo-lleno: var(--vino);           /* the thermometer's filled part */
  --jg-termo-vacio: var(--papel-2);        /* its empty part */
  --jg-termo-meta: var(--oro);             /* the 80 % mark */
  --jg-termo-fondo: var(--hoja);           /* the thermometer's light: the dial's white paper (new, HECHOS 09:2x) */
  --jg-reaccion: var(--vino);              /* the one-tap reaction at rest */
  --jg-reaccion-mia: var(--oro-tinta);     /* when it is mine */
  --jg-concurso-fondo: var(--papel);       /* the Concurso card's light */
  --jg-concurso-pared: var(--s-terracota-2); /* the Concurso's wall of terracotta tiles behind the poster and the polaroids (new, HECHOS 09:5x) */
  --jg-credencial-fondo: var(--s-pergamino);      /* the status card's light — the pick, «el pasaporte» (HECHOS 09:2x) */
  --jg-credencial-tinta: var(--s-pergamino-tinta);/* its ink */
  --jg-semana-fondo: var(--s-oliva-luz);   /* «Tu primera semana» card's light: the week's olive paper (design's review, 10:4x) */
}

/* ---- CredencialEstado (D32-19, HECHOS M32-3): the person's status card; the kit's QR card inside as it is. The pick is «el pasaporte»
   (it reads --jg-credencial-fondo/-tinta); the other two rooms stay on /kit#credencial for Jorge's look; every rule is scoped to .cred-estado. Text ≥ --t-cuerpo, tabular figures,
   tokens only; each room's one motion stops under prefers-reduced-motion (the end of this block). ---- */
.cred-estado {
  --ce-fondo: var(--jg-credencial-fondo); --ce-tinta: var(--jg-credencial-tinta); --ce-apoyo: var(--sobre-vino-2); --ce-acento: var(--jg-nivel);
  --ce-numero: var(--sobre-vino-oro);
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 22px; box-sizing: border-box; width: 100%; max-width: 390px;
  padding: 24px 18px 26px; border-radius: var(--r-grande); background: var(--ce-fondo); color: var(--ce-tinta);
  font-family: var(--f-texto); font-size: var(--t-cuerpo); line-height: 1.4; font-variant-numeric: tabular-nums;
}
.cred-estado :is(p, h3, ol, ul, q) { margin: 0; }
.cred-estado :is(ol, ul) { padding: 0; list-style: none; }
.cred-estado .ce-luz { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cred-estado .ce-cabeza { position: relative; display: grid; gap: 6px; min-height: 92px; padding-right: 96px; }
.cred-estado .ce-marca { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .04em; }
.cred-estado .ce-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--oro-vivo); }
.cred-estado .ce-num { font-family: var(--f-display); font-weight: 400; line-height: .95; font-variant-numeric: tabular-nums; color: var(--ce-numero); }
.cred-estado .ce-tiempo, .cred-estado .ce-grande { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-weight: 700; }
.cred-estado .ce-tiempo .ce-num { font-size: var(--t-numero); }
.cred-estado .ce-grande .ce-num { font-size: var(--t-banda); }
.cred-estado :is(.ce-desde, .ce-linea, .ce-de, .ce-contra, .ce-sello-f) { color: var(--ce-apoyo); font-weight: 600; }
.cred-estado .ce-emblema { position: absolute; top: 0; right: 0; width: 84px; height: 84px; }
.cred-estado .ce-emblema > :is(svg, img) { display: block; width: 100%; height: 100%; object-fit: contain; }
.cred-estado .ce-qr { display: grid; }
.cred-estado .ce-qr .credencial { box-shadow: var(--sombra-flota); }
.cred-estado .ce-bloque { display: grid; gap: 10px; }
.cred-estado .ce-k { font-size: var(--t-cuerpo); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ce-acento); }
.cred-estado .ce-sin-dato { color: var(--ce-apoyo); font-weight: 600; font-style: italic; }
.cred-estado .ce-fuerte { color: var(--ce-tinta); font-weight: 700; }
.cred-estado .ce-escalon { font-family: var(--f-display); font-size: var(--t-sub); line-height: 1.1; color: var(--ce-numero); }
.cred-estado .ce-faltan { display: grid; gap: 4px; }
.cred-estado .ce-faltan li { position: relative; padding-left: 20px; font-weight: 600; }
.cred-estado .ce-faltan li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--ce-acento); }
.cred-estado .ce-ultimos { display: grid; gap: 12px; }
.cred-estado .ce-ultimos li { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--ce-acento); }
.cred-estado .ce-ultimos q { font-weight: 600; quotes: "«" "»"; overflow-wrap: anywhere; }
.cred-estado .ce-lineas-mes { display: grid; gap: 10px; }
.cred-estado .ce-lineas-mes li { display: grid; }
.cred-estado .ce-que { font-weight: 700; }
.cred-estado .ce-num-chico { font-family: var(--f-display); font-weight: 400; font-size: var(--t-sub); line-height: 1; color: var(--ce-numero); }
.cred-estado .ce-lineas-mes li[data-sube] .ce-contra { color: var(--ce-acento); }
.cred-estado .ce-sello { position: relative; display: grid; gap: 2px; }
.cred-estado .ce-sello-marca { display: grid; place-items: center; }
.cred-estado .ce-sello-marca :is(.ico, .ilustracion) { width: 100%; height: 100%; }
.cred-estado .ce-sello-t { font-weight: 700; overflow-wrap: anywhere; }

/* — A · el pasaporte: pergamino pages under a vino cover; the seals are rubber stamps, each a little turned; the newest is stamped once — */
.cred-estado[data-forma="pasaporte"] {
  --ce-fondo: var(--jg-credencial-fondo); --ce-tinta: var(--jg-credencial-tinta); --ce-apoyo: var(--s-mauve); --ce-acento: var(--vino); --ce-numero: var(--vino);
  gap: 0; padding: 0 0 24px; border: 1px solid var(--s-pergamino-2);
  background: repeating-linear-gradient(0deg, transparent 0 31px, var(--s-pergamino-2) 31px 32px), var(--jg-credencial-fondo);
}
.cred-estado[data-forma="pasaporte"] > :not(.ce-luz) { padding-inline: 18px; }
.cred-estado[data-forma="pasaporte"] .ce-cabeza {
  --ce-apoyo: var(--sobre-vino-2); --ce-numero: var(--sobre-vino-oro);
  padding: 22px 112px 24px 18px; background: var(--vino); color: var(--sobre-vino); border-bottom: 3px dashed var(--sobre-vino-borde);
}
.cred-estado[data-forma="pasaporte"] .ce-emblema { top: 18px; right: 16px; width: 88px; height: 88px; }
.cred-estado[data-forma="pasaporte"] .ce-qr { padding-top: 20px; }
.cred-estado[data-forma="pasaporte"] .ce-bloque { padding-top: 22px; }
.cred-estado[data-forma="pasaporte"] .ce-lista-sellos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; padding-block: 6px; }
.cred-estado[data-forma="pasaporte"] .ce-sello {
  --giro: -7deg;
  justify-items: center; align-content: center; box-sizing: border-box; width: 108px; min-height: 108px; padding: 8px 4px; text-align: center;
  color: var(--vino); border: 3px double var(--vino); border-radius: 16px; transform: rotate(var(--giro));
}
.cred-estado[data-forma="pasaporte"] .ce-sello:nth-child(2n) { --giro: 5deg; }
.cred-estado[data-forma="pasaporte"] .ce-sello:nth-child(3n) { --giro: -2deg; }
.cred-estado[data-forma="pasaporte"] .ce-sello:is([data-tipo="primera_semana"], [data-tipo="concurso"]) { border: 2.5px dashed currentColor; border-radius: 50%; }
.cred-estado[data-forma="pasaporte"] .ce-sello:is([data-tipo="primera_semana"], [data-tipo="concurso"]) { color: var(--jg-sello); border-color: var(--jg-nivel); }
.cred-estado[data-forma="pasaporte"] .ce-sello[data-tipo="curso"] { color: var(--s-plum); border-color: var(--s-plum); }
.cred-estado[data-forma="pasaporte"] .ce-sello-marca { width: 34px; height: 34px; }
.cred-estado[data-forma="pasaporte"] .ce-sello-f { color: inherit; }
.cred-estado[data-forma="pasaporte"] .ce-sello[data-nuevo] { animation: ce-estampa var(--d-3) var(--resorte) .35s both; }
@keyframes ce-estampa { from { opacity: 0; transform: rotate(var(--giro)) scale(1.5); } to { opacity: 1; transform: rotate(var(--giro)) scale(1); } }

/* ---- Concurso (G3, HECHOS M32-6): the wall of terracotta tiles (--jg-concurso-pared), the poster with its rosette, the polaroids pinned in arrival order, the
   winner's post on the passport's paper with its gold stamp; its one motion = the newest polaroid swinging in once. ---- */
.concurso-pared {
  position: relative; display: grid; gap: 22px; box-sizing: border-box; width: 100%; padding: 20px 16px 26px; border-radius: var(--r-grande);
  color: var(--sobre-vino); font-family: var(--f-texto); font-size: var(--t-cuerpo); line-height: 1.35; font-variant-numeric: tabular-nums;
  background:
    linear-gradient(0deg, var(--s-terracota) 0 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--s-terracota) 0 1px, transparent 1px) 0 0 / 44px 44px,
    var(--jg-concurso-pared);
}
.concurso-cartel {
  position: relative; display: grid; gap: 8px; box-sizing: border-box; min-height: 104px; padding: 18px 96px 18px 16px; border-radius: var(--r-tarjeta);
  background: var(--crema); color: var(--tinta); box-shadow: var(--sombra-flota); font-family: var(--f-texto); font-size: var(--t-cuerpo); line-height: 1.35;
}
.concurso-cartel :is(p, h2, ul) { margin: 0; }
.concurso-cartel .cc-roseta { position: absolute; top: 12px; right: 12px; width: 72px; height: 72px; }
.concurso-cartel .cc-k { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--s-terracota-2); }
.concurso-cartel .cc-titulo { font-family: var(--f-display); font-weight: 400; font-size: var(--t-titulo); line-height: 1.05; color: var(--vino); overflow-wrap: anywhere; }
.concurso-cartel .cc-como { font-weight: 600; }
.concurso-cartel .cc-datos { display: grid; gap: 6px; padding: 0; list-style: none; }
.concurso-cartel .cc-datos li { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gris); }
.concurso-cartel .cc-datos .ico { flex: none; width: 20px; height: 20px; color: var(--s-terracota-2); }
.concurso-entrada {
  --giro: -2deg;
  position: relative; display: grid; gap: 8px; box-sizing: border-box; padding: 10px 10px 12px; border-radius: 4px; background: var(--hoja); color: var(--tinta);
  box-shadow: var(--sombra-flota); transform: rotate(var(--giro)); font-family: var(--f-texto); font-size: var(--t-cuerpo); line-height: 1.35;
}
.concurso-entrada:nth-of-type(2n) { --giro: 1.5deg; }
.concurso-entrada:nth-of-type(3n) { --giro: -1deg; }
.concurso-entrada .cn-chincheta {
  position: absolute; top: -8px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--s-oro-luz), var(--oro) 60%, var(--s-oro-2)); box-shadow: 0 3px 6px -2px var(--s-sombra-dura);
}
.concurso-entrada .cn-foto { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; background: var(--foto-fondo); }
.concurso-entrada .cn-sin { display: grid; place-items: center; color: var(--sobre-vino-2); }
.concurso-entrada .cn-sin .ico { width: 44px; height: 44px; }
.concurso-entrada .cn-pie { display: grid; gap: 4px; justify-items: start; }
.concurso-entrada .cn-quien { font-weight: 700; }
.concurso-entrada .cn-linea { margin: 0; font-weight: 600; color: var(--gris); overflow-wrap: anywhere; }
.concurso-entrada[data-mia] { box-shadow: 0 0 0 3px var(--jg-nivel), var(--sombra-flota); }
.concurso-entrada[data-nueva] { transform-origin: 50% 0; animation: cn-cuelga var(--d-3) var(--resorte) .2s both; }
@keyframes cn-cuelga { from { opacity: 0; transform: rotate(calc(var(--giro) - 10deg)); } to { opacity: 1; transform: rotate(var(--giro)); } }
.concurso-ganador {
  position: relative; display: grid; gap: 6px; box-sizing: border-box; min-height: 136px; padding: 18px 132px 16px 16px; border-radius: var(--r-tarjeta);
  background: var(--jg-credencial-fondo); color: var(--jg-credencial-tinta); box-shadow: inset 0 0 0 1px var(--s-pergamino-2);
  font-family: var(--f-texto); font-size: var(--t-cuerpo); line-height: 1.35; font-variant-numeric: tabular-nums;
}
.concurso-ganador p { margin: 0; }
.concurso-ganador .cg-k { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vino); }
.concurso-ganador .cg-dice { font-family: var(--f-display); font-size: var(--t-sub); line-height: 1.15; color: var(--vino); overflow-wrap: anywhere; }
.concurso-ganador .cg-sello {
  --giro: 8deg;
  position: absolute; top: 14px; right: 14px; display: grid; justify-items: center; align-content: center; box-sizing: border-box; width: 108px; height: 108px;
  border-radius: 50%; border: 2.5px dashed var(--jg-nivel); color: var(--jg-sello); text-align: center; transform: rotate(var(--giro));
}
.concurso-ganador .cg-sello-ave { width: 34px; height: 34px; }
.concurso-ganador .cg-sello-t, .concurso-ganador .cg-sello-f { font-weight: 700; }
.concurso-ganador .cg-foto { display: block; width: 100%; max-width: 200px; aspect-ratio: 4 / 5; margin-top: 6px; object-fit: cover; border: 8px solid var(--hoja); border-bottom-width: 22px; box-shadow: var(--sombra-flota); transform: rotate(-2deg); }
.concurso-ganador .cg-ir { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--vino); text-decoration: none; }
.concurso-ganador .cg-ir .ico { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .concurso-pared, .concurso-pared *, .concurso-pared *::before, .concurso-pared *::after, .concurso-entrada, .concurso-entrada * { animation: none !important; transition: none !important; } }

/* — B · el camino de noche: night with stars; the seals are gold lights on a road, first to newest, the newest with its halo; the stars twinkle — */
.cred-estado[data-forma="noche"] {
  --ce-fondo: var(--s-noche); --ce-tinta: var(--sobre-vino); --ce-apoyo: var(--s-noche-gris); --ce-acento: var(--oro-suave); --ce-numero: var(--s-oro-luz);
  background: linear-gradient(180deg, var(--s-noche) 0%, var(--s-noche-2) 55%, var(--s-noche-3) 100%);
}
.cred-estado[data-forma="noche"] .ce-luz {
  background:
    radial-gradient(circle at 8% 5%, var(--s-estrella) 0 2px, transparent 3px),
    radial-gradient(circle at 44% 3%, var(--s-estrella) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 63% 11%, var(--s-estrella) 0 2px, transparent 3px),
    radial-gradient(circle at 93% 29%, var(--s-estrella) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 17% 39%, var(--s-estrella) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 86% 56%, var(--s-estrella) 0 2px, transparent 3px),
    radial-gradient(circle at 5% 71%, var(--s-estrella) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 76% 87%, var(--s-estrella) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 31% 97%, var(--s-estrella) 0 2px, transparent 3px);
  animation: ce-titila 2.8s ease-in-out infinite alternate;
}
@keyframes ce-titila { from { opacity: .35; } to { opacity: 1; } }
.cred-estado[data-forma="noche"] .ce-emblema { top: 2px; right: 2px; width: 78px; height: 78px; box-sizing: border-box; padding: 12px; border-radius: 50%; background: var(--s-noche-3); box-shadow: 0 0 0 8px var(--s-halo); }
.cred-estado[data-forma="noche"] .ce-qr .credencial { box-shadow: 0 0 0 6px var(--s-halo); }
.cred-estado[data-forma="noche"] .ce-lista-sellos { position: relative; display: grid; gap: 16px; padding: 6px 0 6px 50px; }
.cred-estado[data-forma="noche"] .ce-lista-sellos::before { content: ""; position: absolute; left: 18px; top: 16px; bottom: 16px; border-left: 3px dotted var(--oro-claro); opacity: .8; }
.cred-estado[data-forma="noche"] .ce-sello { align-content: center; min-height: 40px; }
.cred-estado[data-forma="noche"] .ce-sello-marca {
  position: absolute; left: -50px; top: 50%; box-sizing: border-box; width: 40px; height: 40px; padding: 7px; border-radius: 50%; transform: translateY(-50%);
  background: var(--oro-vivo); color: var(--ciruela); border: 2px solid var(--oro-claro);
}
.cred-estado[data-forma="noche"] .ce-sello[data-nuevo] .ce-sello-marca { box-shadow: 0 0 0 7px var(--s-halo); }
.cred-estado[data-forma="noche"] .ce-ultimos li { border-left-color: var(--oro); }

/* — C · la tarjeta de oro: crema with a gold band where Tagers signs; the seals are gold medals; a shine crosses the band once — */
.cred-estado[data-forma="oro"] {
  --ce-fondo: var(--crema); --ce-tinta: var(--tinta); --ce-apoyo: var(--gris); --ce-acento: var(--oro-tinta); --ce-numero: var(--vino);
  background: var(--crema); border: 2px solid var(--oro);
}
.cred-estado[data-forma="oro"] .ce-cabeza {
  --ce-apoyo: var(--oro-tinta); --ce-numero: var(--ciruela);
  overflow: hidden; margin: -10px -6px 0; padding: 18px 104px 18px 16px; border-radius: var(--r-tarjeta); color: var(--ciruela);
  background: linear-gradient(125deg, var(--s-oro-luz) 0%, var(--oro) 45%, var(--s-oro-2) 68%, var(--s-oro-luz) 100%); box-shadow: inset 0 0 0 2px var(--oro-claro);
}
.cred-estado[data-forma="oro"] .ce-cabeza::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-110%);
  background: linear-gradient(100deg, transparent 35%, var(--s-brillo) 50%, transparent 65%); animation: ce-brillo 1.6s var(--suave) .5s both;
}
@keyframes ce-brillo { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
.cred-estado[data-forma="oro"] .ce-emblema { top: 12px; right: 12px; width: 80px; height: 80px; box-sizing: border-box; padding: 14px; border-radius: 50%; background: var(--ciruela); box-shadow: inset 0 0 0 3px var(--oro-claro); }
.cred-estado[data-forma="oro"] .ce-lista-sellos { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 14px 10px; }
.cred-estado[data-forma="oro"] .ce-sello { justify-items: center; text-align: center; }
.cred-estado[data-forma="oro"] .ce-sello-marca {
  box-sizing: border-box; width: 66px; height: 66px; padding: 15px; border-radius: 50%; color: var(--oro-tinta);
  background: radial-gradient(circle at 34% 30%, var(--s-oro-luz) 0%, var(--oro) 58%, var(--s-oro-2) 100%); box-shadow: inset 0 0 0 3px var(--oro-claro), var(--sombra-flota);
}
.cred-estado[data-forma="oro"] .ce-sello[data-tipo="constancia"] .ce-sello-marca { border-radius: 18px; }
.cred-estado[data-forma="oro"] .ce-ultimos li { border-left-color: var(--oro); }

/* ---- Termometro (G1, HECHOS M32-4): the sucursal's thermometer on the dial's white paper — the bulb and the glass, a tick every tenth, the
   gold goal flag with its number, the rocket at the end; its one motion = the fill rising once. ---- */
.termometro {
  position: relative; display: grid; gap: 8px; box-sizing: border-box; width: 100%; padding: 16px 16px 14px; border-radius: var(--r-tarjeta);
  background: var(--jg-termo-fondo); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea), var(--sombra-flota);
  font-family: var(--f-texto); font-size: var(--t-cuerpo); line-height: 1.35; font-variant-numeric: tabular-nums;
}
.termometro p { margin: 0; }
.termometro .tm-titulo { font-weight: 700; }
.termometro .tm-donde { color: var(--vino); }
.termometro .tm-n { font-family: var(--f-display); font-weight: 400; font-size: var(--t-banda); line-height: 1; color: var(--jg-termo-lleno); }
.termometro .tm-de { font-family: var(--f-display); font-weight: 400; font-size: var(--t-sub); line-height: 1; color: var(--vino); }
.termometro .tm-tubo { position: relative; display: flex; align-items: center; height: 44px; margin-top: 22px; }
.termometro .tm-bulbo { position: relative; z-index: 1; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--jg-termo-lleno); box-shadow: 0 0 0 4px var(--jg-termo-vacio); }
.termometro .tm-vidrio {
  position: relative; flex: 1; height: 16px; margin: 0 8px 0 -8px; border-radius: 0 var(--r-pastilla) var(--r-pastilla) 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--linea) calc(10% - 1px) 10%), var(--jg-termo-vacio);
}
.termometro .tm-lleno { position: absolute; left: 0; top: 0; bottom: 0; width: var(--tm-pct); border-radius: inherit; background: var(--jg-termo-lleno); transform-origin: left center; animation: tm-sube 1s var(--suave) .2s both; }
.termometro .tm-meta { position: absolute; left: var(--tm-meta); top: -8px; bottom: -8px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--jg-termo-meta); }
.termometro .tm-meta-dice { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 700; color: var(--oro-tinta); }
.termometro .tm-cohete { flex: none; width: 40px; height: 40px; }
.termometro[data-llego] .tm-cohete { transform: rotate(-12deg) translateY(-4px); }
.termometro .tm-linea { color: var(--gris); font-weight: 600; }
.termometro .tm-premio { color: var(--jg-sello); font-weight: 700; }
.termometro[data-estado="sin_dato"] .tm-linea { font-style: italic; }
.termometro[data-estado="sin_dato"] .tm-bulbo { background: var(--jg-termo-vacio); box-shadow: inset 0 0 0 2px var(--linea); }
@keyframes tm-sube { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .termometro, .termometro *, .termometro *::before, .termometro *::after { animation: none !important; transition: none !important; } }

/* the one motion of each room stops for whoever asked for less motion */
@media (prefers-reduced-motion: reduce) {
  .cred-estado, .cred-estado *, .cred-estado *::before, .cred-estado *::after { animation: none !important; transition: none !important; }
}
/* ---- PrimeraSemana (G1, HECHOS M32-4): five stones on a dashed path on the week's olive paper; the «Ya estás» stamp is the passport's;
   its one motion = the next stone breathing twice. ---- */
.primera-semana {
  position: relative; display: grid; gap: 12px; box-sizing: border-box; width: 100%; padding: 18px 16px 16px; border-radius: var(--r-tarjeta);
  background: var(--jg-semana-fondo); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea);
  font-family: var(--f-texto); font-size: var(--t-cuerpo); line-height: 1.35; font-variant-numeric: tabular-nums;
}
.primera-semana :is(p, h2, ol) { margin: 0; }
.primera-semana .ps-luz { display: none; }
.primera-semana .ps-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.primera-semana .ps-titulo { font-family: var(--f-display); font-weight: 400; font-size: var(--t-sub); line-height: 1.15; color: var(--vino); }
.primera-semana .ps-cuenta { font-weight: 700; color: var(--jg-sello); white-space: nowrap; }
.primera-semana .ps-pasos { position: relative; display: grid; padding: 0; list-style: none; }
.primera-semana .ps-pasos::before { content: ""; position: absolute; left: 19px; top: 28px; bottom: 28px; border-left: 3px dashed var(--s-oliva-2); opacity: .55; }
.primera-semana .ps-paso { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; color: inherit; text-decoration: none; }
.primera-semana .ps-piedra {
  flex: none; display: grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; border-radius: 50%;
  background: var(--jg-semana-fondo); border: 2.5px dashed var(--s-oliva-2); color: var(--s-oliva-3); font-weight: 700;
}
.primera-semana li[data-hecho="true"] .ps-piedra { border: 2px solid var(--jg-nivel); background: var(--jg-sello-fondo); color: var(--jg-sello); }
.primera-semana li:not([data-hecho]) .ps-piedra { border: 2.5px dotted var(--gris-claro); color: var(--gris-medio); }
.primera-semana .ps-piedra .ico { width: 22px; height: 22px; }
.primera-semana .ps-txt { display: grid; min-width: 0; }
.primera-semana .ps-txt .t { font-weight: 700; }
.primera-semana .ps-txt .s { color: var(--gris); font-weight: 600; }
.primera-semana li[data-hecho="true"] .ps-txt .s { color: var(--jg-sello); }
.primera-semana li[data-siguiente] .ps-piedra { animation: ps-respira 1.6s var(--suave) .6s 2; }
@keyframes ps-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.primera-semana .ps-pie { display: flex; align-items: center; gap: 10px; color: var(--s-oliva-3); font-weight: 600; }
.primera-semana .ps-pie-ave { flex: none; width: 40px; height: 40px; }
.primera-semana[data-sello] { justify-items: center; text-align: center; }
.primera-semana .ps-sello {
  --giro: -6deg;
  display: grid; justify-items: center; align-content: center; gap: 2px; box-sizing: border-box; width: 150px; height: 150px; border-radius: 50%;
  border: 3px dashed var(--jg-nivel); color: var(--jg-sello); transform: rotate(var(--giro)); animation: ce-estampa var(--d-3) var(--resorte) .3s both;
}
.primera-semana .ps-sello-ave { width: 56px; height: 56px; }
.primera-semana .ps-sello-t { font-family: var(--f-display); font-size: var(--t-sub); line-height: 1.1; }
.primera-semana .ps-sello-f { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .primera-semana, .primera-semana *, .primera-semana *::before, .primera-semana *::after { animation: none !important; transition: none !important; } }

/* ── fin r32 · design ── */

/* ── r32 · arranque ── (the thermometer on /mi/muro's first screen and /mi/equipo, «Tu primera semana» on /mi, the leader's two nudges, /rh/personas/despliegue's columns) */
/* The kit's Termometro sits on the Muro's heroe and on «Mi equipo» with the screen's side gutter (its own room is design's). */
.jg-arranque { margin: var(--e-3) var(--orilla) 0; }
/* /rh/personas/despliegue: the house's one note sits inside the row card with the row's own inset (design's review: it ran flush to the edge at 1280). */
.jg-despliegue-nota { padding: 0 var(--e-4) var(--e-3); }
/* ── fin r32 · arranque ── */

/* ── r32 · credencial ── (/mi/yo/credencial as the status card, Aprender's streak card, the ring's percentage, «Mis repasos» count) */
.cr-racha { position: relative; overflow: hidden; display: grid; gap: 8px; padding: 6px 6px 14px; border-radius: var(--r-tarjeta); background: linear-gradient(160deg, var(--jg-sello-fondo), var(--jg-semana-fondo) 70%); color: inherit; text-decoration: none; }
.cr-racha::after { content: ""; position: absolute; right: -28px; top: -28px; width: 96px; height: 96px; border-radius: 50%; border: 2px dashed var(--jg-sello); opacity: .22; pointer-events: none; }
.cr-racha .racha { background: transparent; }
.cr-racha .racha { animation: cr-enciende .6s var(--resorte) both; }
.cr-racha-protege, .cr-racha-vuelta { margin: 0 4px; font-size: var(--t-cuerpo); line-height: 1.35; }
.cr-racha-vuelta { font-weight: 600; color: var(--jg-sello); }
@keyframes cr-enciende { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cr-racha .racha { animation: none; } }
/* ── fin r32 · credencial ── */

/* ── r32 · muro ── (reactions on every post, the Concurso list/entry/winner screens, Reconocer's picker + «¿qué hizo?») */
.mu-num { font-variant-numeric: tabular-nums; }
/* The applause of a card without a foot (a recognition, a birthday, a constancia, a mention): at the card's inset, right under it (design 10:5x). */
.mu-aplauso-pie { padding: 0 16px; margin-top: 8px; }
.mu-que-hizo { margin-top: 4px; color: var(--tinta); }
/* The Concurso room (/mi/muro/concursos/**): its own light (--jg-concurso-fondo), seal marks on each row, a sparkle that breathes once. */
.mu-concursos { background: var(--jg-concurso-fondo); }
.mu-concursos-luz { width: 56px; height: 56px; animation: mu-brilla 2.4s ease-in-out 1; }
@keyframes mu-brilla { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } }
.mu-concurso-lista { display: grid; gap: 10px; }
.mu-concurso-fila { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--papel-2); border-radius: 18px; background: var(--crema); color: var(--tinta); text-decoration: none; }
.mu-concurso-sello { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--jg-sello-fondo); border: 2px dashed var(--jg-sello); }
.mu-concurso-fila[data-concurso-estado="ganador"] .mu-concurso-sello { border-style: solid; background: var(--jg-nivel); }
.mu-concurso-txt { display: grid; gap: 2px; font-size: var(--t-cuerpo); }
.mu-concurso-txt b { color: var(--vino); }
.mu-concurso-mio { color: var(--jg-sello); font-weight: 700; }
.mu-ganaste { text-align: center; }
.mu-ganaste-medalla { display: inline-block; width: 88px; height: 88px; }
.mu-entrar { display: grid; gap: 12px; }
/* «Propuestas» (2026-10-28): the hand-in form and her files as rows */
.vz-propuesta { display: grid; gap: 12px; }
.vz-propuesta .campo > span:first-child { display: block; margin-bottom: 6px; }
.vz-archivos { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.vz-archivos .item { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.vz-archivos .item > :first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.vz-elegir { justify-self: start; cursor: pointer; }
.vz-propuesta-card { margin-top: 10px; }
.vz-propuesta-card h3 { margin: 0 0 4px; }
.vz-pasos { margin: 8px 0 12px; padding-left: 22px; display: grid; gap: 6px; }
.vz-direccion { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vz-direccion code { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; padding: 10px 12px; border-radius: var(--r-tarjeta); background: var(--papel); font-size: 15px; }
.mu-foto-elige { display: grid; gap: 10px; justify-items: start; cursor: pointer; }
.mu-foto-vista, .mu-foto-hueco { display: block; width: 100%; max-width: 360px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; background: var(--papel-2); }
.mu-foto-hueco { border: 2px dashed var(--jg-sello); background: var(--jg-sello-fondo); }
.mu-error { color: var(--vino); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .mu-concursos-luz { animation: none; } }
/* The game's two house notices on the wall: the winner's seal and the sucursal's week (a count of the sucursal, three lines in time order, never numbered). */
.mu-juego { display: grid; gap: 8px; padding: 18px; border-radius: 22px; background: var(--jg-sello-fondo); border: 2px solid var(--jg-sello); color: var(--tinta); font-size: var(--t-cuerpo); }
.mu-juego-k { color: var(--jg-sello); font-weight: 700; }
.mu-juego b, .mu-juego-titulo { color: var(--vino); font-variant-numeric: tabular-nums; }
.mu-juego-lineas { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.mu-juego-lineas li { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--jg-nivel); }
.mu-juego-quien { font-weight: 700; }
.mu-juego-ir { color: var(--vino); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ── fin r32 · muro ── */

/* ── r33 · aprender ── (the course page's thermometer under the cover, «N de M en tu sucursal» under «Mis cursos» cards) */
.ap-meta .termometro { margin-top: 4px; }
.ap-sucursal { margin: 6px 4px 0; font-size: var(--t-cuerpo); font-variant-numeric: tabular-nums; color: var(--jg-sello); }
.ap-semana { position: relative; overflow: hidden; display: grid; gap: 10px; justify-items: start; padding: 18px; border-radius: var(--r-tarjeta); background: linear-gradient(150deg, var(--jg-concurso-fondo), var(--jg-sello-fondo)); font-size: var(--t-cuerpo); }
.ap-semana::before { content: ""; position: absolute; right: -24px; bottom: -24px; width: 110px; height: 110px; border-radius: 50%; border: 3px solid var(--jg-sello); opacity: .16; animation: ap-gira 14s linear infinite; pointer-events: none; }
.ap-semana-k { margin: 0; font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--jg-sello); }
.ap-semana-t { margin: 0; font-family: var(--f-display); font-size: var(--t-sub); line-height: 1.15; }
.ap-semana-ya { margin: 0; font-weight: 600; color: var(--jg-sello); }
.ap-semana-suc { margin: 0; font-variant-numeric: tabular-nums; }
@keyframes ap-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ap-semana::before { animation: none; } }
/* ── fin r33 · aprender ── */