/* Rediseño fase 5 (Task 8): Enfocar. Valores de diseno/rediseno-oct/enfocar-plantilla.html: el recorrido a pantalla completa
   (siempre oscuro, solo títulos) y el panel (la escena de Sísifo sin fondo, «¿Y si…?», la racha y «Elegir de nuevo").
   Los @container app del prototipo son aquí @media (la app ocupa todo el ancho). Accesibilidad de la app: texto de 12 px o
   más y botones de 44 px o más (el prototipo bajaba a 10 y 36 px en el celular). */
.rd-enfocar, .rd-enfocar *, .rd-inm, .rd-inm * { box-sizing: border-box; }
.rd-enfocar {
  --rd-line-2: color-mix(in srgb, var(--ink) 7%, transparent);
  --rd-track: color-mix(in srgb, var(--ink) 12%, transparent);
  max-width: 1240px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
  padding: 20px max(16px, env(safe-area-inset-right, 0px)) 120px max(16px, env(safe-area-inset-left, 0px));
  color: var(--ink);
}
.rd-enfocar h1, .rd-enfocar h2, .rd-enfocar h3, .rd-enfocar p, .rd-inm h1, .rd-inm p { margin: 0; }
.rd-enfocar button, .rd-inm button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.rd-enfocar .boton, .rd-inm .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-size: 15px; font-weight: 800; white-space: nowrap; transition: transform .1s, opacity .2s;
}
.rd-enfocar .boton:active, .rd-inm .boton:active { transform: scale(.97); }
.rd-enfocar .boton-principal, .rd-inm .boton-principal { background: var(--accent); color: var(--accent-ink); }
.rd-inm .boton-principal { background: #D4F57B/*tema:fijo*/; color: #121510/*tema:fijo*/; }
.rd-inm .boton-principal:disabled { opacity: .3; cursor: default; }
.rd-enfocar .boton-sec { background: var(--rd-line-2); color: var(--ink); }

/* ================= Recorrido a pantalla completa (colgado de body) ================= */
html:has(.rd-inm) { overflow: hidden; }
.rd-inm {
  position: fixed; inset: 0; z-index: 80;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: radial-gradient(120% 90% at 50% 0%, #1A1F23/*tema:fijo*/, #0A0C0D/*tema:fijo*/ 72%);
  color: #F5F5F0/*tema:fijo*/; color-scheme: dark;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  padding: max(30px, env(safe-area-inset-top, 0px)) max(28px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(28px, env(safe-area-inset-left, 0px));
  outline: none;
}
.rd-inm button:focus-visible, .rd-inm [tabindex]:focus-visible { outline: 2px solid #D4F57B/*tema:fijo*/; outline-offset: 3px; }
.rd-inm .inm-cab { display: grid; justify-items: center; gap: 14px; text-align: center; position: relative; z-index: 2; pointer-events: none; }
.rd-inm .inm-cab h1 { font-size: clamp(28px, 4.2vw, 48px); font-weight: 900; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; max-width: 20ch; color: inherit; }
.rd-inm .puntos { display: flex; gap: 6px; }
.rd-inm .puntos i { width: 18px; height: 4px; border-radius: 2px; background: rgba(245, 245, 240, .14)/*tema:fijo*/; transition: width .4s, background-color .4s; }
.rd-inm .puntos i.si { background: #D4F57B/*tema:fijo*/; }
.rd-inm .puntos i.ahora { width: 36px; background: #D4F57B/*tema:fijo*/; }
.rd-inm .cerrar {
  position: absolute; top: max(24px, env(safe-area-inset-top, 0px)); right: 24px; z-index: 3; width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; background: rgba(245, 245, 240, .08)/*tema:fijo*/; color: #F5F5F0/*tema:fijo*/; font-size: 18px;
}
.rd-inm .rd-campo { position: relative; margin: 6px -28px; min-height: 0; overflow: hidden; }
.rd-inm .rd-burbuja {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; text-align: center; padding: 8px; border-radius: 999px;
  color: #F5F5F0/*tema:fijo*/; font-size: var(--fs, 15px); font-weight: 800; letter-spacing: -.01em; line-height: 1.1;
  background: radial-gradient(80% 80% at 30% 25%, rgba(245, 245, 240, .14)/*tema:fijo*/, rgba(245, 245, 240, .03)/*tema:fijo*/ 65%);
  border: 1px solid rgba(245, 245, 240, .2)/*tema:fijo*/; will-change: transform;
  transform: translate(-200px, -200px);
  transition: background-color .3s, border-color .3s, box-shadow .3s, color .3s;
}
.rd-inm .rd-burbuja:hover, .rd-inm .rd-burbuja:focus-visible { border-color: #D4F57B/*tema:fijo*/; box-shadow: 0 0 0 5px rgba(212, 245, 123, .12)/*tema:fijo*/, 0 0 30px -6px rgba(212, 245, 123, .5)/*tema:fijo*/; outline: none; }
.rd-inm .rd-burbuja.nose { border-style: dashed; background: transparent; color: #A4ABB0/*tema:fijo*/; }
.rd-inm .rd-burbuja.elegida { background: #D4F57B/*tema:fijo*/; color: #121510/*tema:fijo*/; border-color: #D4F57B/*tema:fijo*/; box-shadow: 0 0 40px -6px rgba(212, 245, 123, .7)/*tema:fijo*/; }
.rd-inm .rd-num {
  position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  background: #0A0C0D/*tema:fijo*/; color: #D4F57B/*tema:fijo*/; font-size: 12px; font-weight: 900; border: 2px solid #D4F57B/*tema:fijo*/;
}
.rd-inm .inm-pie { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: relative; z-index: 2; }
.rd-inm .atras { width: 48px; height: 48px; flex: none; border-radius: 999px; display: grid; place-items: center; background: rgba(245, 245, 240, .08)/*tema:fijo*/; color: #F5F5F0/*tema:fijo*/; font-size: 22px; font-weight: 800; }
.rd-inm .atras[hidden] { visibility: hidden; display: grid; }
.rd-inm .inm-hueco { width: 48px; flex: none; }
.rd-inm .bandeja { display: flex; gap: 10px; justify-content: center; flex: 1; }
.rd-inm .ranura {
  width: 56px; height: 56px; border-radius: 999px; border: 1.5px dashed rgba(245, 245, 240, .25)/*tema:fijo*/; display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: #A4ABB0/*tema:fijo*/; text-align: center; line-height: 1.05; padding: 4px; overflow: hidden; transition: all .3s;
}
.rd-inm .ranura.llena { border-style: solid; border-color: #D4F57B/*tema:fijo*/; background: #D4F57B/*tema:fijo*/; color: #121510/*tema:fijo*/; }
/* NEM y ranking */
.rd-inm .barras { display: grid; gap: 44px; align-content: center; width: min(820px, 100%); margin: 0 auto; }
.rd-inm .barra-num { display: grid; gap: 10px; }
.rd-inm .barra-num .tit { display: flex; justify-content: space-between; align-items: baseline; }
.rd-inm .barra-num .tit b { font-size: 20px; font-weight: 900; }
.rd-inm .barra-num .grande { font-size: clamp(56px, 8vw, 88px); font-weight: 900; letter-spacing: -.05em; line-height: .9; color: #D4F57B/*tema:fijo*/; font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(212, 245, 123, .35)/*tema:fijo*/; }
.rd-inm .barra-num .grande.sin-elegir { color: rgba(245, 245, 240, .35)/*tema:fijo*/; text-shadow: none; }
.rd-inm .pista { position: relative; height: 56px; border-radius: 999px; background: rgba(245, 245, 240, .08)/*tema:fijo*/; cursor: pointer; touch-action: none; outline: none; }
.rd-inm .pista:focus-visible { box-shadow: 0 0 0 3px rgba(212, 245, 123, .5)/*tema:fijo*/; }
.rd-inm .pista .lleno { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, rgba(212, 245, 123, .3)/*tema:fijo*/, #D4F57B/*tema:fijo*/); box-shadow: 0 0 30px -4px rgba(212, 245, 123, .55)/*tema:fijo*/; }
.rd-inm .pista .tirador { position: absolute; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 999px; background: #F5F5F0/*tema:fijo*/; box-shadow: 0 6px 18px rgba(0, 0, 0, .45)/*tema:fijo*/; }
/* Tu base: piezas que se separan */
.rd-inm .base { position: relative; display: grid; gap: 16px; align-content: center; width: min(1000px, 100%); margin: 0 auto; }
.rd-inm .fila-p { display: grid; gap: 12px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.rd-inm .pieza { padding: 16px 18px; border-radius: 20px; background: rgba(245, 245, 240, .05)/*tema:fijo*/; border: 1px solid rgba(245, 245, 240, .12)/*tema:fijo*/; min-width: 0; }
.rd-inm .pieza small { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #A4ABB0/*tema:fijo*/; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rd-inm .pieza small i { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--c); }
.rd-inm .pieza b { display: block; font-size: 34px; font-weight: 900; letter-spacing: -.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.rd-inm .pieza b.rd-vacio { font-size: 18px; letter-spacing: 0; color: #A4ABB0/*tema:fijo*/; padding-block: 8px; }
.rd-inm .pieza.meta { border-color: rgba(212, 245, 123, .4)/*tema:fijo*/; background: linear-gradient(180deg, rgba(212, 245, 123, .12)/*tema:fijo*/, rgba(212, 245, 123, .02)/*tema:fijo*/); }
.rd-inm .pieza.meta b { color: #D4F57B/*tema:fijo*/; }
.rd-inm .electivas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.rd-inm .rd-chip { position: relative; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1.5px solid rgba(245, 245, 240, .22)/*tema:fijo*/; font-size: 16px; font-weight: 800; color: #F5F5F0/*tema:fijo*/; transition: all .3s; }
.rd-inm .rd-chip[aria-pressed="true"] { background: #D4F57B/*tema:fijo*/; border-color: #D4F57B/*tema:fijo*/; color: #121510/*tema:fijo*/; }
.rd-inm .rd-chip .pide { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 999px; background: #E8B84B/*tema:fijo*/; border: 2px solid #0A0C0D/*tema:fijo*/; }
.rd-inm .flash { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 999px; border: 3px solid #D4F57B/*tema:fijo*/; pointer-events: none; z-index: 4; }
/* Compromiso */
.rd-inm .compromiso { display: grid; gap: 30px; align-content: center; justify-items: center; text-align: center; }
.rd-inm .frase { font-size: clamp(30px, 4.4vw, 52px); font-weight: 900; letter-spacing: -.035em; line-height: 1.05; max-width: 18ch; text-wrap: balance; }
.rd-inm .frase em { font-style: normal; color: #D4F57B/*tema:fijo*/; }
.rd-inm .frase .pal { display: inline-block; animation: rd-enf-palabra 1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes rd-enf-palabra { from { opacity: 0; transform: translateY(30px) rotate(var(--r, 0deg)); } }

/* ================= Panel ================= */
.rd-enfocar .vitrina { position: relative; height: clamp(580px, 76vh, 760px); touch-action: pan-y; color: var(--ink); overflow: clip; overflow-clip-margin: 60px; }
.rd-enfocar .rd-sisifo { display: contents; }
.rd-enfocar .vitrina { isolation: isolate; }
.rd-enfocar .vitrina .polvo { z-index: -1; }
:root[data-theme="light"] .rd-enfocar .polvo { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .rd-enfocar .polvo { display: none; } }
.rd-enfocar .vitrina .polvo { position: absolute; inset: -40px -60px; width: calc(100% + 120px); height: calc(100% + 80px); pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000/*tema:fijo*/ 60%, transparent); mask-image: radial-gradient(closest-side, #000/*tema:fijo*/ 60%, transparent); }
.rd-enfocar .vitrina svg.escena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
:root[data-theme="light"] .rd-enfocar .vitrina svg.escena { filter: brightness(.6) saturate(1.5); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .rd-enfocar .vitrina svg.escena { filter: brightness(.6) saturate(1.5); } }
.rd-enfocar .escena .s-txt { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 800; }
/* Los rótulos de las banderas: hueso en oscuro; en claro, tinta (la escena va atenuada con el filtro) para que se lean */
:root[data-theme="light"] .rd-enfocar .escena .s-ban { fill: var(--ink); }
:root[data-theme="light"] .rd-enfocar .escena .s-corte { fill: var(--ink-2); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .rd-enfocar .escena .s-ban { fill: var(--ink); } :root:not([data-theme="dark"]) .rd-enfocar .escena .s-corte { fill: var(--ink-2); } }
.rd-enfocar #rds-fig .l-contorno { stroke-width: 5.5; }
.rd-enfocar #rds-fig .l-sombra { stroke-width: 2.6; stroke-opacity: .85; }
.rd-enfocar #rds-fig .l-detalle { stroke-width: 1.6; stroke-opacity: .45; }
/* La hoja empujable no desplaza la página (como el prototipo, touch-action: none); el resto del panel sí */
.rd-enfocar .roca, .rd-enfocar .roca * { cursor: grab; outline: none; touch-action: none; }
.rd-enfocar .roca:focus-visible #rds-giro { filter: drop-shadow(0 0 18px rgba(212, 245, 123, .8)/*tema:fijo*/); }
.rd-enfocar .piedrita { cursor: pointer; outline: none; }
.rd-enfocar .v-cab { position: absolute; left: 30px; top: 28px; z-index: 3; display: grid; gap: 12px; max-width: 30%; pointer-events: none; }
.rd-enfocar .v-cab h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; }
.rd-enfocar .v-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.rd-enfocar .v-num b { font-size: clamp(64px, 7.5vw, 104px); font-weight: 900; letter-spacing: -.055em; line-height: .85; font-variant-numeric: tabular-nums; transition: color .3s; }
.rd-enfocar .v-num b.sim { color: var(--accent-text); }
.rd-enfocar .v-num b.rd-vacio { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.03em; line-height: 1; color: var(--ink-2); }
.rd-enfocar .v-num span { font-size: 26px; font-weight: 900; color: var(--ink-3); }
.rd-enfocar .v-nota { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ink-2); max-width: 28ch; }
.rd-enfocar .cuenta { position: absolute; top: 24px; right: 28px; z-index: 3; color: var(--accent-text); font-size: 13px; font-weight: 900; letter-spacing: .08em; pointer-events: none; }
.rd-enfocar .cuenta b { font-size: 22px; letter-spacing: -.02em; }
.rd-enfocar .metas { position: absolute; left: 30px; bottom: 26px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; }
.rd-enfocar .meta-op, .rd-enfocar .meta-medir {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 800; color: var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: all .25s;
}
.rd-enfocar .meta-medir { padding: 0 18px; border-color: var(--accent-text); color: var(--accent-text); }
.rd-enfocar .meta-op i { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 900; background: var(--rd-line-2); }
.rd-enfocar .meta-op[aria-pressed="true"] { border-color: #D4F57B/*tema:fijo*/; }
.rd-enfocar .meta-op[aria-pressed="true"] i { background: #D4F57B/*tema:fijo*/; color: #121510/*tema:fijo*/; }
.rd-enfocar .meta-op em { font-style: normal; font-variant-numeric: tabular-nums; }
.rd-enfocar .meta-op em.mas { color: var(--accent-text); }
.rd-enfocar .meta-op em.menos { color: var(--m-ranking); }
.rd-enfocar .metas .boton-principal { min-height: 48px; }
/* ¿Y si…? y racha */
.rd-enfocar .dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.rd-enfocar .dos > :only-child { grid-column: 1 / -1; }
.rd-enfocar .tarjeta { border-radius: var(--r-xl, 24px); background: var(--surface); border: 1px solid var(--line); padding: 24px; display: grid; gap: 18px; align-content: start; }
.rd-enfocar .tarjeta h3 { font-size: 22px; font-weight: 900; letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rd-enfocar .reinicia { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--rd-line-2); font-size: 16px; }
.rd-enfocar .sim { display: grid; gap: 16px; align-content: space-evenly; }
.rd-enfocar .fila-s { display: grid; grid-template-columns: 86px minmax(0, 1fr) 54px; align-items: center; gap: 14px; }
.rd-enfocar .fila-s b { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.rd-enfocar .fila-s b i { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--c); }
.rd-enfocar .fila-s output { text-align: right; font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rd-enfocar .fila-s output.sube { color: var(--accent-text); }
.rd-enfocar .sim-pond { font-size: 14px; font-weight: 700; color: var(--ink-2); line-height: 1.4; }
.rd-enfocar input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.rd-enfocar input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--c) var(--q, 50%), var(--rd-track) var(--q, 50%)); }
.rd-enfocar input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--c) var(--q, 50%), var(--rd-track) var(--q, 50%)); }
.rd-enfocar input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 999px; background: var(--ink); border: 3px solid var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .3)/*tema:fijo*/; }
.rd-enfocar input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 999px; background: var(--ink); border: 3px solid var(--surface); }
.rd-enfocar input[type=range]:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 8px; }
/* web v2, Task 9: NEM y Ranking en «¿Y si…?» (sin dato, atenuadas con «–»), la cifra del ponderado y la tabla de
   ponderaciones de la misma altura que la calculadora; la racha pasa a la fila siguiente */
.rd-enfocar .dos.rd-cal-fila { align-items: stretch; }
/* Entrega 4, cierre: sola en su fila, la racha ocupa el ancho completo (con «grid-column: auto» quedaba en media fila y la otra mitad
   vacía). En el computador va en dos columnas, la cifra a la izquierda y los cuadritos a la derecha, para que no crezcan al doble.
   El celular no cambia: una columna. */
@media (min-width: 981px) {
  .rd-enfocar .rd-fila-racha > .racha { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto auto auto minmax(0, 1fr); column-gap: 40px; }
  .rd-enfocar .rd-fila-racha > .racha > * { grid-column: 1; }
  .rd-enfocar .rd-fila-racha > .racha > .gh-mapa { grid-column: 2; grid-row: 1 / -1; align-self: center; }
}
.rd-enfocar .fila-s.sin-dato b, .rd-enfocar .fila-s.sin-dato output { color: var(--ink-3); }
.rd-enfocar .fila-s.sin-dato b i { background: var(--ink-3); }
.rd-enfocar .fila-s.sin-dato input[type=range]::-webkit-slider-runnable-track { background: var(--rd-track); }
.rd-enfocar .fila-s.sin-dato input[type=range]::-moz-range-track { background: var(--rd-track); }
.rd-enfocar .fila-s.sin-dato input[type=range]::-webkit-slider-thumb { background: var(--ink-3); }
.rd-enfocar .fila-s.sin-dato input[type=range]::-moz-range-thumb { background: var(--ink-3); }
.rd-enfocar .sim-res { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.rd-enfocar .sim-cifra { display: flex; align-items: baseline; gap: 6px; }
.rd-enfocar .sim-cifra b { font-size: 36px; font-weight: 900; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.rd-enfocar .sim-cifra b.rd-falta { color: var(--ink-3); }
.rd-enfocar .sim-cifra span { font-size: 14px; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rd-enfocar .sim-de { font-size: 12px; font-weight: 800; color: var(--ink-2); }
.rd-enfocar .rd-cal { display: flex; flex-direction: column; padding: 16px 18px; }
.rd-enfocar .rd-cal-t { flex: 1 1 auto; width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.rd-enfocar .rd-cal-t th, .rd-enfocar .rd-cal-t td { padding: 6px 4px; text-align: center; font-size: 14px; font-weight: 800; border-bottom: 1px solid var(--rd-line-2); }
.rd-enfocar .rd-cal-t tr > :first-child { width: 24%; text-align: left; padding-left: 0; }
.rd-enfocar .rd-cal-t thead th { padding: 0 2px 6px; }
.rd-enfocar .rd-cal-t tbody th { font-size: 12px; color: var(--ink-2); }
.rd-enfocar .rd-cal-t td small { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.rd-enfocar .rd-cal-t tr.corte th, .rd-enfocar .rd-cal-t tr.corte td { border-bottom: 0; font-size: 15px; font-weight: 900; color: var(--ink); }
.rd-enfocar .rd-cal-t .es-sel { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.rd-enfocar .rd-cal-t button { width: 100%; min-height: 44px; border-radius: 12px; font-size: 13px; font-weight: 900; letter-spacing: .02em; }
.rd-enfocar .rd-cal-t button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
/* [C15] (Task 15, I-1): «* a elección» bajo la tabla, con la letra de los rótulos de las filas; a 10 px de la tabla (los 18 px de la tarjeta, menos 8) */
.rd-enfocar .rd-cal-nota { margin: -8px 0 0; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.rd-enfocar .racha-num { display: flex; align-items: baseline; gap: 10px; }
.rd-enfocar .racha-num b { font-size: 64px; font-weight: 900; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.rd-enfocar .racha-num span { font-size: 18px; font-weight: 800; color: var(--ink-3); }
.rd-enfocar .gh-mapa { display: grid; grid-auto-flow: column; grid-template-columns: repeat(var(--cols, 18), minmax(0, 1fr)); grid-template-rows: repeat(7, 1fr); gap: 3px; }
.rd-enfocar .gh-c { aspect-ratio: 1; border-radius: 3px; background: var(--rd-track); min-width: 0; }
.rd-enfocar .gh-c[data-v="1"] { background: color-mix(in srgb, var(--accent) 35%, var(--rd-track)); }
.rd-enfocar .gh-c[data-v="2"] { background: color-mix(in srgb, var(--accent) 65%, var(--rd-track)); }
.rd-enfocar .gh-c[data-v="3"] { background: var(--accent); }
.rd-enfocar .gh-c.futuro { background: transparent; border: 1px dashed var(--line); }
.rd-enfocar .gh-c.paes { background: transparent; border: 1.5px solid var(--accent-text); }
.rd-enfocar .gh-c.hoy { outline: 2px solid var(--ink); outline-offset: 1px; }
.rd-enfocar .gh-c.perdido { background: transparent; border: 1.5px solid var(--m-ranking); }
.rd-enfocar .empujar { justify-self: start; }
.rd-enfocar .otra-vez { justify-self: center; margin-top: 8px; }

@media (max-width: 980px) { .rd-enfocar .dos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .rd-inm { padding: max(22px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); }
  .rd-inm .rd-campo { margin: 4px -16px; }
  .rd-inm .cerrar { top: max(16px, env(safe-area-inset-top, 0px)); right: 14px; }
  .rd-inm .inm-cab h1 { padding-inline: 44px; }
  .rd-inm .fila-p { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-inm .fila-p.metas-b { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rd-inm .pieza { padding: 12px; }
  .rd-inm .pieza b { font-size: 24px; }
  .rd-inm .pieza b.rd-vacio { font-size: 15px; padding-block: 5px; }
  .rd-inm .ranura { width: 48px; height: 48px; }
  .rd-inm .bandeja { gap: 6px; }
  .rd-inm .inm-pie .boton { padding: 0 18px; }
  .rd-enfocar .vitrina { height: auto; min-height: 0; display: grid; overflow: hidden; margin-inline: -8px; }
  .rd-enfocar .vitrina .polvo { inset: 0; width: 100%; height: 100%; }
  .rd-enfocar .vitrina svg.escena { position: relative; height: 430px; order: 2; }
  .rd-enfocar .v-cab { position: relative; left: auto; top: auto; max-width: none; padding: 22px 20px 0; order: 1; }
  .rd-enfocar .v-cab h2 { padding-right: 92px; }
  .rd-enfocar .metas { position: relative; left: auto; bottom: auto; padding: 0 16px 18px; order: 3; }
  .rd-enfocar .cuenta { top: 24px; right: 20px; }
  .rd-enfocar .v-num b { font-size: 64px; }
  .rd-enfocar .fila-s { grid-template-columns: 78px minmax(0, 1fr) 48px; gap: 10px; }
  .rd-enfocar .tarjeta { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-inm .frase .pal { animation: none; }
  .rd-inm .rd-burbuja, .rd-inm .puntos i, .rd-inm .ranura, .rd-inm .rd-chip, .rd-enfocar .meta-op { transition: none; }
}

/* Mientras llegan la oferta y la escena (carga diferida) */
.rd-enfocar .rd-cargando { min-height: 50vh; display: grid; place-items: center; font-size: 16px; font-weight: 700; color: var(--ink-2); }