/* ==========================================================================
   068 · TAREA 2 (b) — Mi ruta · Hoy: Meta personal (C), Tu día (B) y Racha (D) con la forma de ruta_hoy.html.
   Vienen de Mi panel (055B); los ids son los de siempre y los pinta casino.js.
   ========================================================================== */
.cg-ruta-fila { display: flex; gap: 22px; align-items: stretch; }
.cg-ruta-main { flex: 1 1 0; min-width: 0; }
.cg-ruta-main > .cg-ruta-card:only-child { height: 100%; }
/* con varias campañas del medidor real apiladas, Meta personal no se estira hasta el fondo: queda arriba con su tamaño */
.cg-ruta-fila:has(> .cg-ruta-main > .cg-ruta-card + .cg-ruta-card) > .cg-ruta-lado { align-self: flex-start; }
.cg-ruta-lado { flex: 0 0 352px; min-width: 0; padding: 20px 24px; display: flex; flex-direction: column; }
.cg-ruta-fila:has(> .cg-solo-dia:not(.oculto)) .ruta-secundarias { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 0; }
#mapaSecundarias .ruta-secundarias { margin-top: 0; }
.cg-cab-dia { margin-top: 26px; }
.cg-cab-dia .cg-tag { height: 26px; font-size: 12px; }

/* C · Meta personal */
.cg-meta-cab { display: flex; align-items: center; gap: 14px; }
.cg-meta-cab .cg-ico-c { margin-top: 0; color: var(--cg-verde-vivo); }
.cg-meta-tit { min-width: 0; }
.cg-meta-tit .cg-k { color: var(--cg-texto-2); white-space: normal; letter-spacing: 1.6px; font-size: 12px; }
.cg-meta-falta { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.cg-meta-cifra { font-family: var(--fuente-titulos); font-size: 30px; font-weight: 600; line-height: 1; color: var(--cg-texto); font-variant-numeric: lining-nums; }
.cg-meta-pie { padding-bottom: 4px; font-size: 12px; color: var(--cg-texto-2); }
.cg-meta-pie b { color: var(--cg-texto); }
.cg-meta-barra { margin: 16px 0 13px; }
.cg-meta-lt { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 12px; color: var(--cg-texto-2); }
.cg-meta-lt strong { color: var(--cg-texto); }
.cg-meta-lt span:last-child strong { color: var(--cg-bronce-osc); }
.cg-meta-esc { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(128, 98, 48, .22); }
.cg-meta-esc .cg-k { margin-bottom: 12px; color: var(--cg-texto-2); }
/* la barra de piedra de «Meta del mes» de la portada: 24 px, verde con filo bronce y marcas cada 25 % */
.cg-barra-p { position: relative; height: 24px; border-radius: 5px; background: var(--cg-papel-3); box-shadow: inset 0 2px 5px rgba(80, 62, 34, .3), inset 0 -1px 0 rgba(255, 255, 255, .7); }
.cg-barra-p > b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px 2px 2px 5px; background: linear-gradient(180deg, var(--verde-f), var(--cg-verde)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.cg-barra-p > b::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--cg-bronce-brillo), var(--cg-bronce)); }
.cg-barra-p > i { position: absolute; inset: 0; border-radius: 5px; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(128, 98, 48, .22) calc(25% - 1px), rgba(128, 98, 48, .22) 25%); }
.cg-barra-p > span { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: 800; color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; }
.cg-puntos { display: flex; align-items: center; }
.cg-puntos .p { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cg-puntos .p i { width: 15px; height: 15px; border-radius: 50%; background: var(--cg-superficie-alta); border: 2px solid var(--cg-linea-fuerte); }
.cg-puntos .p.si i { width: 17px; height: 17px; border: 0; background: var(--verde-f); box-shadow: 0 0 0 4px var(--verde-a); }
.cg-puntos .p.sig i { border-color: var(--cg-bronce); box-shadow: 0 0 0 4px rgba(179, 148, 92, .2); }
.cg-puntos .p span { font-size: 12px; letter-spacing: .3px; font-weight: 700; color: var(--cg-texto-3); white-space: nowrap; }
.cg-puntos .p.si span { color: var(--cg-verde-vivo); font-weight: 800; }
.cg-puntos .p.sig span { color: var(--cg-bronce-osc); }
.cg-puntos .t { flex: 1 1 auto; min-width: 6px; height: 3px; margin: 0 2px 18px; background: var(--cg-linea); }
.cg-puntos .t.si { background: var(--verde-f); }
.cg-nota-v { margin-top: 13px; padding: 11px 13px; border-radius: 8px; background: var(--verde-a); border: 1px solid rgba(46, 122, 98, .22); font-size: 12.5px; line-height: 1.5; color: var(--cg-texto); }

/* B · Tu día: cuatro celdas con la cifra en piedra y su barra */
.cg-dia { padding: 18px 4px 14px; }
.cg-dia-banda { display: flex; align-items: stretch; }
.cg-dia-celda { flex: 1 1 0; min-width: 0; padding: 0 22px; display: flex; flex-direction: column; }
.cg-dia-div { width: 1px; align-self: stretch; background: rgba(128, 98, 48, .18); }
.cg-dia-cab { display: flex; align-items: center; gap: 12px; }
.cg-dia-cab .cg-ico-c { margin-top: 0; color: var(--cg-verde-vivo); }
.cg-dia-cab .cg-k { margin: 0; color: var(--cg-texto-2); white-space: normal; font-size: 12px; letter-spacing: 1.8px; }
.cg-dia-ok { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--verde-f); color: var(--cg-superficie-alta); }
.cg-dia-val { display: flex; align-items: flex-end; gap: 8px; margin-top: 4px; }
.cg-dia-de { padding-bottom: 4px; font-size: 12px; color: var(--cg-texto-2); white-space: nowrap; }
.cg-dia-de b { color: var(--cg-texto); }
.cg-dia-barra { flex: none; width: auto; height: 8px; margin-top: 10px; }
.cg-dia-celda.ok .cg-dia-barra > span { background: linear-gradient(90deg, var(--cg-verde-dato), var(--verde-f)); }
.cg-grupo-dia { display: flex; margin: 14px 22px 0; padding-top: 12px; border-top: 1px solid rgba(128, 98, 48, .16); }
.cg-grupo-dia > div { flex: 1 1 0; display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 12px; color: var(--cg-texto-2); }
.cg-grupo-dia > div svg { flex: none; color: var(--cg-bronce-osc); }
.cg-grupo-dia > div.ok svg { color: var(--verde-f); }
.cg-grupo-dia b { color: var(--cg-texto); }
.cg-dia-pie { margin: 10px 22px 0; font-size: 12px; color: var(--cg-texto-3); }
.cg-dia-pie b { color: var(--cg-texto); }

/* D · Racha, tu constancia (tarjeta verde) */
.cg-ruta-racha { flex-basis: 400px; }
.cg-racha-cab { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.cg-racha-cab .cg-k { margin: 0; }
.cg-racha-cab > span:last-child { margin-left: auto; }
.cg-combo { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: linear-gradient(180deg, var(--cg-bronce-brillo), var(--cg-bronce)); color: var(--cg-verde-borde); font-size: 12px; font-weight: 800; white-space: nowrap; }
.cg-racha-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "llama etq paga" "llama dias paga" "estado estado estado"; column-gap: 16px; row-gap: 4px; align-items: center; margin-top: 16px; }
#cajaRacha #rachaTexto { display: contents; }
.cg-llama { grid-area: llama; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--cg-bronce-brillo);
  background: radial-gradient(circle at 40% 30%, rgba(226, 204, 154, .35), rgba(179, 148, 92, .12) 60%, rgba(179, 148, 92, .05)); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .45), 0 0 22px rgba(214, 170, 90, .25); }
.cg-llama.apagada { color: var(--cg-texto-verde-3); background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .22); }
#cajaRacha .racha-etq { grid-area: etq; align-self: end; margin: 0; }
#cajaRacha .cg-racha-n { grid-area: dias; align-self: start; font-size: 46px; font-weight: 800; line-height: 1; color: var(--cg-bronce-claro); }
.cg-racha-paga { grid-area: paga; text-align: right; }
.cg-racha-paga .cg-k { margin-bottom: 6px; }
#cajaRacha .racha-mult { display: block; font-family: var(--fuente); font-size: 34px; font-weight: 800; letter-spacing: -.6px; line-height: 1; color: var(--cg-verde-dato); font-variant-numeric: tabular-nums lining-nums; }
.cg-racha-estado { grid-area: estado; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cg-racha-minimo { font-size: 12px; color: var(--cg-texto-verde); }
.cg-racha-minimo b { color: var(--cg-bronce-claro); }
.cg-racha-hacia { margin-top: 16px; }
.cg-racha-hacia-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cg-racha-hacia-cab .cg-k { margin: 0; }
#cajaRacha #rachaSiguiente { font-size: 12px; color: var(--cg-texto-verde); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-dias-r { display: flex; gap: 6px; margin-top: 9px; }
.cg-dias-r i { flex: 1 1 0; min-width: 0; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; font-style: normal; color: var(--cg-texto-verde-3); background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .22); }
.cg-dias-r i.si { background: linear-gradient(180deg, var(--cg-bronce-brillo), var(--cg-bronce)); color: var(--cg-verde-borde); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.cg-dias-r i.hoy-r { box-shadow: inset 0 0 0 1.5px var(--cg-bronce); color: var(--cg-bronce-claro); }
.cg-racha-pie { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(179, 148, 92, .22); }
.cg-racha-escudo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cg-sel-v { height: 36px; width: auto; min-width: 110px; padding: 0 12px; border-radius: 7px; border: 1px solid rgba(179, 148, 92, .4); background: rgba(0, 0, 0, .2); color: var(--cg-bronce-claro); font: 600 12px var(--fuente); }
.cg-sel-v option { color: var(--cg-texto); background: var(--cg-superficie-alta); }
.cg-ruta-racha .cg-btn-lin { height: 36px; flex: 1; padding: 0 12px; gap: 8px; cursor: pointer; }
.cg-ruta-racha .cg-btn-lin:disabled { opacity: .55; cursor: default; }
.cg-racha-regla { margin-top: 9px; font-size: 12px; color: var(--cg-texto-verde-3); }

/* el tooltip de un escalón junto al borde derecho no ensancha la página en el móvil */
#rutaPeriodo { overflow-x: clip; }
@media (max-width: 820px) {
  .cg-ruta-fila { flex-direction: column; gap: 16px; }
  .cg-ruta-lado, .cg-ruta-racha { flex: 1 1 auto; width: 100%; }
  .cg-dia-banda { flex-wrap: wrap; padding: 4px 0; }
  .cg-dia-celda { flex: 1 1 100%; padding: 12px 14px; }
  .cg-dia-div { display: none; }
  .cg-grupo-dia { flex-direction: column; gap: 6px; }
}

/* ==========================================================================
   068 · TAREA 4 — Mi ruta · El mes (ruta_mes.html): Tu nivel del mes, «Vendido este mes» y las dos escaleras T60.7.
   Los ids son los de siempre (#cajaNivel, nivel*, #escalerasBloque); los pinta casino.js. Textos a 12 px (UX-17).
   ========================================================================== */
.cg-nivel { padding: 22px 26px 14px; }
.cg-nivel-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cg-nivel-cab .cg-k { margin: 0; color: var(--cg-texto-2); white-space: normal; }
.cg-niveles { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 4px; }
.cg-niveles::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 27px; height: 4px; border-radius: 999px; background: var(--cg-linea); }
.cg-nv-lleno { position: absolute; left: 12.5%; top: 27px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--verde-f), var(--cg-ok)); }
.cg-nv { position: relative; text-align: center; }
.cg-nv .d { width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--fuente-titulos); font-size: 21px; font-weight: 700;
  background: var(--cg-superficie-alta); color: var(--cg-texto-3); box-shadow: inset 0 0 0 2px var(--cg-linea-fuerte), 0 2px 6px rgba(60, 42, 18, .1); }
.cg-nv.si .d { background: linear-gradient(180deg, var(--verde-f), var(--cg-ok)); color: var(--cg-superficie-alta); box-shadow: 0 0 0 5px var(--verde-a); }
.cg-nv.plata .d:not(:has(svg)) { background: radial-gradient(circle at 36% 30%, var(--cg-superficie-alta), var(--cg-papel-3) 58%, var(--cg-texto-3)); color: var(--cg-texto); }
.cg-nv.oro .d:not(:has(svg)) { background: radial-gradient(circle at 36% 30%, var(--cg-bronce-brillo), var(--cg-bronce) 58%, var(--cg-bronce-osc)); color: var(--cg-texto); }
.cg-nv.meta .d:not(:has(svg)) { background: linear-gradient(180deg, var(--cg-verde), var(--cg-verde-borde)); color: var(--cg-bronce-claro); box-shadow: inset 0 0 0 2px var(--cg-bronce), 0 2px 8px rgba(11, 51, 43, .35); }
.cg-nv.lejos .d { opacity: .75; }
.cg-nv b { display: block; margin-top: 10px; font-family: var(--fuente-titulos); font-size: 21px; font-weight: 600; color: var(--cg-texto); }
.cg-nv small { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc); font-variant-numeric: tabular-nums lining-nums; }
#nivelFrase { margin: 18px 0 14px; }
.cg-peld { display: grid; grid-template-columns: 28px minmax(0, 1fr) 110px 150px 120px; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--cg-linea); font-size: 13px; }
.cg-peld.cab-p { padding-top: 0; font-size: 12px; letter-spacing: 1.6px; font-weight: 700; text-transform: uppercase; color: var(--cg-texto-2); }
.cg-peld.cab-p span:nth-child(n+3) { text-align: right; }
.cg-peld .nom { color: var(--cg-texto); font-weight: 600; line-height: 1.35; }
.cg-peld .n { text-align: right; white-space: nowrap; font-weight: 700; color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; }
.cg-peld .n.col-conv { font-weight: 600; color: var(--cg-texto-2); }
.cg-peld .f { text-align: right; white-space: nowrap; font-size: 12px; color: var(--cg-texto-3); }
.cg-peld.abierto .f { color: var(--cg-ok); font-weight: 700; }
.cg-peld-cand { display: inline-flex; color: var(--cg-texto-3); }
.cg-ok { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--verde-f); color: var(--cg-superficie-alta); }
.cg-sep-n { display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0 2px; padding: 0; border: 0; background: none; font: 800 12px var(--fuente); letter-spacing: 1.8px; text-transform: uppercase; color: var(--cg-bronce-osc); text-align: left; }
.cg-sep-n::after { content: ''; flex: 1; height: 1px; background: var(--cg-linea); order: 1; }
.cg-sep-n .cuenta { order: 2; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .2px; font-weight: 700; text-transform: none; }
.cg-sep-n.plegado { padding: 10px 0 4px; cursor: pointer; }
.cg-sep-n.plegado .cuenta svg { transition: transform .15s; }
.cg-sep-n.plegado.abierto .cuenta svg { transform: rotate(180deg); }
.cg-nivel-pie { margin: 12px 2px 4px; font-size: 12px; color: var(--cg-texto-3); }

.cg-ruta-colder { flex: 0 0 400px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cg-mes-vendido { padding: 22px 24px; }
.cg-mes-vendido .cg-k { margin-bottom: 8px; }
.cg-mes-barra { height: 10px; margin-top: 14px; border-radius: 999px; background: rgba(0, 0, 0, .25); overflow: hidden; }
.cg-mes-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cg-verde-dato), var(--verde-f)); }
.cg-mes-sig { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; color: var(--cg-texto-verde-2); }
.cg-mes-sig b { color: var(--cg-bronce-claro); }
.cg-mes-internas { display: flex; gap: 8px; margin-top: 16px; }
.cg-mes-internas .cg-interna { flex: 1; min-width: 0; }
.cg-mes-internas .cg-interna b { font-size: 18px; }
.cg-mes-pie { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--cg-texto-verde); }

.cg-escalera { padding: 18px 22px 8px; }
.cg-escalera .cg-k { margin: 0 0 4px; white-space: normal; }
.cg-escalera-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.cg-escalera-cab b { font-family: var(--fuente-titulos); font-size: 22px; font-weight: 600; color: var(--cg-texto); }
.cg-escalera-cab span { margin-left: auto; font-size: 12px; color: var(--cg-texto-2); }
.cg-escalera-barra { height: 8px; border-radius: 999px; background: rgba(128, 98, 48, .15); box-shadow: inset 0 1px 2px rgba(80, 62, 34, .18); overflow: hidden; }
.cg-escalera-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cg-bronce), var(--cg-bronce-osc)); }
.cg-fila-e { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cg-linea); }
.cg-fila-e:last-child { border-bottom: 0; }
.cg-circulo-e { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--cg-linea-fuerte); box-sizing: border-box; }
.cg-fila-e-txt { min-width: 0; }
.cg-fila-e-txt b { display: block; font-size: 13.5px; color: var(--cg-texto); }
.cg-fila-e-txt small { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc); }
.cg-fila-e-d { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--cg-texto-3); white-space: nowrap; }
.cg-fila-e-d .ya { color: var(--cg-ok); font-weight: 700; }
.cg-escalera-pie { margin: 4px 0 10px; font-size: 12px; color: var(--cg-texto-2); }

@media (max-width: 820px) {
  .cg-ruta-colder { flex: 1 1 auto; width: 100%; }
  .cg-nivel { padding: 18px 14px 10px; }
  .cg-nv b { font-size: 16px; }
  .cg-nv .d { width: 46px; height: 46px; font-size: 17px; }
  .cg-niveles::before, .cg-nv-lleno { top: 21px; }
  .cg-peld { grid-template-columns: 22px minmax(0, 1fr) 84px; gap: 8px; }
  .cg-peld .col-conv, .cg-peld.cab-p { display: none; }
  .cg-peld .f { grid-column: 2 / -1; text-align: left; }
}

/* ---------- 068 · TAREA 5 (a): Retos con la forma de ruta_retos (franja, formulario y tarjeta verde de la cuota) ---------- */
.cg-est { display: inline-flex; align-items: center; flex: 0 0 auto; height: 24px; padding: 0 9px; border-radius: 5px; font-size: 12px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; }
.cg-est.gana { background: var(--verde-f); color: var(--cg-superficie-alta); }
.cg-est.pierde { background: rgba(180, 71, 47, .1); color: var(--cg-caida); box-shadow: inset 0 0 0 1px rgba(180, 71, 47, .35); }
.cg-est.neutro { background: var(--cg-papel-3); color: var(--cg-texto-2); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .2); }
.cg-reto-franja { display: flex; align-items: center; gap: 14px; padding: 14px 20px; margin-bottom: 18px; }
.cg-reto-franja-txt { min-width: 0; }
.cg-reto-franja-txt b { display: block; font-size: 14px; color: var(--cg-texto); }
.cg-reto-franja-txt span { display: block; margin-top: 2px; font-size: 12px; color: var(--cg-texto-2); }
.cg-retos-fila2 { display: flex; gap: 22px; align-items: stretch; }
.cg-retos-form { flex: 1 1 0; min-width: 0; padding: 22px 28px 22px; }
.cg-retos-form.ganando { box-shadow: inset 0 0 0 1px rgba(46, 122, 98, .5), var(--cg-sombra); }
.cg-retos-cab { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.cg-retos-cab > :first-child { min-width: 0; }
.cg-retos-cab > :last-child { margin-left: auto; }
.cg-retos-cab .cg-sec { font-size: 30px; }
.cg-retos-cab .cg-k { margin-bottom: 6px; white-space: normal; }
.cg-retos-cab .cg-tag { height: 26px; }
.cg-retos-form .reto-ejes { gap: 18px 26px; margin-bottom: 18px; }
.cg-retos-form .reto-campos { gap: 18px 26px; }
.cg-retos-form .campo > label { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .2px; color: var(--cg-texto-2); text-transform: none; }
.cg-retos-form .campo input[type="number"], .cg-retos-form .campo input[type="text"], .cg-retos-form .campo select { width: 100%; min-height: 44px; padding: 0 12px; box-sizing: border-box;
  font: 700 14px var(--fuente); color: var(--cg-texto); background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .3); border-radius: 7px; }
.cg-retos-form .campo input::placeholder { font-weight: 500; color: var(--cg-texto-3); }
.cg-retos-form .reto-opciones { gap: 8px; }
.cg-retos-form .reto-atajos { margin-top: 8px; }
.cg-retos-form .reto-stepper { flex-wrap: nowrap; gap: 8px; }
.cg-retos-form .reto-stepper > .boton { flex: 0 0 auto; min-width: 36px; min-height: 36px; padding: 0; }
.cg-retos-form .reto-meta { flex: 1 1 auto; justify-content: center; align-items: center; min-height: 44px; gap: 6px; padding: 0 12px; border: 1px solid rgba(128, 98, 48, .3); border-radius: 7px; background: var(--cg-superficie-alta); }
.cg-retos-form .reto-meta-cifra, .cg-retos-form .reto-meta-txt { font: 700 14px var(--fuente); letter-spacing: 0; text-transform: none; color: var(--cg-texto); text-shadow: none; }
.cg-retos-form .reto-cierre { min-height: 44px; display: flex; align-items: center; }
.cg-retos-form .mini.tenue { color: var(--cg-texto-2); }
.cg-retos-cuenta { text-align: right; }
.cg-retos-form .reto-marcador .num { color: var(--cg-texto); }
.cg-retos-lado { flex: 0 0 380px; padding: 22px 24px; display: flex; flex-direction: column; }
.cg-retos-lado .reto-cuota { padding: 0; border: 0; border-radius: 0; background: none; text-align: left; }
.cg-retos-lado .reto-cuota .cg-btn-pri { margin-top: 18px; }
.cg-retos-premio { margin-top: 4px; min-height: 52px; display: flex; align-items: flex-end; overflow-wrap: anywhere; }
.cg-retos-premio.apagada { font: 600 44px/1 var(--fuente-titulos); color: var(--cg-texto-verde-3); }
.cg-retos-lado .reto-premio { color: var(--cg-bronce-claro); font-size: 30px; }
.cg-retos-internas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.cg-retos-internas .cg-interna { min-width: 0; }
.cg-retos-internas .cg-interna .cg-k { white-space: normal; letter-spacing: .8px; line-height: 1.25; }
.cg-retos-internas .cg-interna b { font-size: 20px; }
.cg-retos-lin { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--cg-texto-verde-2); }
.cg-retos-lado .reto-motivo { background: rgba(0, 0, 0, .2); border-color: rgba(179, 148, 92, .35); color: var(--cg-bronce-claro); }
.cg-retos-lado .reto-motivo .boton { margin-top: 8px; }
.cg-retos-lado .reto-cuenta { margin-top: 14px; text-align: left; }
.cg-retos-lado .reto-cuenta .k { color: var(--cg-verde-dato); }
.cg-retos-lado .cuenta-atras { margin-left: 0; text-align: left; color: var(--cg-bronce-claro); }
.cg-retos-lado .cuenta-atras.agotada { color: var(--cg-bronce); }
.cg-retos-lado .reto-reglas { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--cg-texto-verde-2); }
.cg-retos-lado .reto-tope { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(179, 148, 92, .22); max-width: none; }
.cg-retos-lado .reto-tope .cg-k { margin-bottom: 7px; }
.cg-retos-riesgo { position: relative; height: 8px; border-radius: 999px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); overflow: hidden; }
.cg-retos-riesgo > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cg-verde-dato), var(--verde-f)); }
.cg-retos-riesgo-pie { margin-top: 6px; font-size: 12px; color: var(--cg-texto-verde); }
.cg-retos-riesgo-pie b { color: var(--cg-bronce-claro); }
.cg-retos-retar::before { content: ''; flex: 0 0 auto; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; }
.cg-btn-pri.grande { height: 52px; font-size: 15px; letter-spacing: .3px; padding: 0 26px; }
.cg-btn-pri.ancho { width: 100%; }
@media (max-width: 1100px) {
  .cg-retos-fila2 { flex-direction: column; gap: 16px; }
  .cg-retos-lado { flex-basis: auto; }
}
@media (max-width: 620px) {
  .cg-retos-form { padding: 18px 16px; }
  .cg-retos-lado { padding: 18px 16px; }
  .cg-retos-cab .cg-sec { font-size: 26px; }
  .cg-retos-cab { flex-wrap: wrap; }
}
.cg-retos-lado .cg-btn-pri { text-transform: none; }

/* ---------- 068 · TAREA 5 (b): «En marcha» en rejilla de 3 y «El equipo» en 3 tarjetas (ruta_retos) ---------- */
.cg-retos-seccion { margin: 26px 0 14px; }
.retos-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cg-reto.reto-carta { padding: 18px 20px; gap: 12px; border-radius: 10px; background: var(--cg-superficie); border: 1px solid rgba(128, 98, 48, .34); }
.cg-reto.reto-carta.ganando { box-shadow: inset 0 0 0 1px rgba(46, 122, 98, .5); background: var(--cg-superficie); }
.cg-reto-cara { flex: 0 0 auto; display: inline-flex; }
.cg-reto-cara .cara-asesor { border-radius: 7px; border: 0; box-shadow: 0 0 0 1px rgba(128, 98, 48, .25); }
.cg-reto-cara .cara-asesor.sin { background: var(--cg-verde); color: var(--cg-bronce-claro); }
.cg-reto-q { display: flex; align-items: center; gap: 12px; }
.cg-reto-quien { min-width: 0; flex: 1; }
.cg-reto-quien b { display: block; font-size: 15px; color: var(--cg-texto); white-space: normal; }
.cg-reto-quien span { display: block; margin-top: 2px; font-size: 12px; color: var(--cg-texto-2); }
.cg-reto-cuota { flex: 0 0 auto; font: 600 28px/1 var(--fuente-titulos); color: var(--cg-bronce-osc); }
.cg-reto-cita { font: italic 400 16.5px/1.3 var(--fuente-titulos); color: var(--cg-texto-2); overflow-wrap: anywhere; }
.cg-reto-avance-fila { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 12px; color: var(--cg-texto-2); }
.cg-reto-avance-fila b { color: var(--cg-texto); }
.cg-reto-cierre { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--cg-texto-2); }
.cg-reto-cierre .cuenta-atras { margin: 0; font: 700 12px var(--fuente); color: var(--cg-texto); }
.cg-reto .reto-apoyo { margin-top: 0; padding-top: 12px; border-top: 1px solid rgba(128, 98, 48, .2); gap: 8px; }
.cg-reto .reto-apoyo.dentro { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
.cg-reto .reto-apoyo-fila { flex-wrap: wrap; gap: 8px; }
.cg-reto .cg-reto-detras { margin: 0; white-space: nowrap; }
.cg-reto .cg-pil { cursor: pointer; font-family: inherit; }
.cg-reto .cg-pil:hover:not(.on) { border-color: var(--cg-bronce-osc); }
.cg-reto .reto-apoyo-input { flex: 1 1 70px; min-width: 70px; min-height: 36px; padding: 0 10px; box-sizing: border-box; border: 1px solid rgba(128, 98, 48, .3); border-radius: 7px; background: var(--cg-superficie-alta); color: var(--cg-texto); font: 700 13px var(--fuente); }
.cg-reto .reto-apoyo-btn { flex: 0 0 auto; height: 36px; padding: 0 14px; margin-left: auto; }
.cg-reto-nota { font-size: 12px; color: var(--cg-texto-3); }
.cg-reto .reto-apoyos-lista { margin-top: 0; }
.cg-reto .reto-muro { margin-top: 0; border-top: 1px solid rgba(128, 98, 48, .2); padding-top: 10px; }
.cg-reto .reto-reacciones { gap: 6px; }
.cg-reto .reto-reaccion { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; border-radius: 999px; background: transparent; border: 1px solid rgba(128, 98, 48, .3); color: var(--cg-texto-2); font-size: 12px; }
.cg-reto .reto-reaccion.mia { border-color: var(--cg-bronce-osc); background: rgba(179, 148, 92, .14); color: var(--cg-bronce-osc); }
.cg-reto .reto-reaccion b { color: inherit; }

.cg-eq-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cg-eq-rejilla > .reto-equipo { display: contents; }
.cg-eq-card { padding: 18px 22px 12px; min-width: 0; }
.cg-eq-card > .cg-k { white-space: normal; }
.cg-eq-pie { margin: 0 0 8px; font-size: 12px; color: var(--cg-texto-3); }
.cg-eq-sub { margin: 12px 0 4px; font-size: 12px; letter-spacing: 1.6px; font-weight: 700; text-transform: uppercase; color: var(--cg-bronce-osc); }
.cg-eq-card .retos-cerrados { gap: 0; }
.cg-eq-fila { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(128, 98, 48, .16); }
.cg-eq-fila:first-of-type { border-top: 0; }
.cg-eq-card .reto-cerrado { opacity: 1; background: none; border-width: 1px 0 0; border-color: rgba(128, 98, 48, .16); border-radius: 0; padding: 9px 0; }
.cg-eq-txt { min-width: 0; flex: 1; }
.cg-eq-txt b { display: block; font-size: 13.5px; color: var(--cg-texto); overflow-wrap: anywhere; }
.cg-eq-txt small { display: block; margin-top: 2px; font-size: 12px; color: var(--cg-texto-2); overflow-wrap: anywhere; }
.cg-eq-d { flex: 0 0 auto; min-width: 44px; text-align: right; font-size: 12px; font-weight: 600; color: var(--cg-texto-3); }
@media (max-width: 1100px) {
  .retos-rejilla, .cg-eq-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .retos-rejilla, .cg-eq-rejilla { grid-template-columns: minmax(0, 1fr); }
  .cg-eq-rejilla > .reto-equipo { display: contents; }
}
.cg-eq-card > .cg-k { color: var(--cg-bronce-osc); }

/* ---------- 068 · TAREA 6: Temporada con la forma de ruta_temporada (cabecera + premio verde, pase, insignias) ---------- */
.cg-tmp-bloque > .cg-tmp-cab { margin: 26px 0 14px; }
.cg-tmp-cab .cg-tag { flex: 0 0 auto; }
.cg-tmp-fila { display: flex; gap: 22px; align-items: stretch; }
.cg-tmp-id { flex: 0 0 420px; min-width: 0; padding: 22px 26px; }
.cg-tmp-id .cg-k { white-space: normal; }
.cg-tmp-id .cg-sec { font-size: 34px; margin-top: 2px; }
.cg-tmp-desc { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--cg-texto-2); }
.cg-tmp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cg-tmp-cajitas { display: flex; gap: 10px; margin-top: 18px; }
.cg-interna-c { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 7px; background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .2); }
.cg-interna-c .cg-k { margin-bottom: 3px; }
.cg-interna-c b { font-size: 17px; color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; }
.cg-tmp-vacia { display: flex; align-items: center; gap: 18px; flex: 1 1 auto; }
.cg-tmp-vacia-ico { color: var(--cg-bronce-osc); }
.cg-tmp-premio { flex: 1 1 0; min-width: 0; padding: 22px 26px; }
.cg-tmp-premio .cg-k { white-space: normal; }
.cg-tmp-premio-cab { display: flex; align-items: flex-start; gap: 16px; }
.cg-tmp-premio-nombre { display: block; margin-top: 4px; font: 600 30px/1.1 var(--fuente-titulos); color: var(--cg-marfil); overflow-wrap: anywhere; }
.cg-tmp-premio-cobrado { margin-left: auto; text-align: right; flex: 0 0 auto; }
.cg-tmp-premio-sub { margin-top: 6px; color: var(--cg-texto-verde-2); }
.cg-tmp-barra { margin-top: 14px; flex: none; background: rgba(0, 0, 0, .28); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.cg-tmp-premio-pie { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 7px; font-size: 12px; color: var(--cg-texto-verde-2); }
.cg-tmp-premio-pie b { color: var(--cg-bronce-claro); }
.cg-esc-t { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px; margin-top: 16px; }
.cg-esc-c { padding: 14px 12px; border-radius: 9px; background: rgba(0, 0, 0, .18); border: 1px solid rgba(179, 148, 92, .22); text-align: center; }
.cg-esc-c.siguiente { border-color: var(--cg-bronce); box-shadow: 0 0 0 3px rgba(179, 148, 92, .15); }
.cg-esc-c .cg-k { margin-bottom: 6px; font-size: 12px; letter-spacing: 1.6px; color: var(--cg-texto-verde-3); white-space: nowrap; }
.cg-esc-c b { display: block; font-size: 20px; font-weight: 800; color: var(--cg-marfil); font-variant-numeric: tabular-nums lining-nums; }
.cg-esc-c > span:not(.cg-k) { display: block; margin-top: 4px; font-size: 12px; color: var(--cg-texto-verde-2); }
.cg-esc-c .cg-tmp-falta { color: var(--cg-bronce-claro); font-weight: 700; }
.cg-esc-c.logrado .cg-tmp-falta { color: var(--cg-verde-dato); }
.cg-tmp-ok { display: inline-flex; vertical-align: middle; color: var(--cg-verde-dato); }

/* El pase: tira con scroll, número en pastilla arriba, medallón, premio, umbral y estado. */
.cg-pase-caja { padding: 4px 18px 16px; }
.cg-pase-resumen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 6px 0; }
.cg-pase-xp { min-width: 0; }
.cg-pase-xp .cg-k { margin-bottom: 2px; white-space: normal; }
.cg-pase-acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cg-pase-acciones .cg-btn-pri { height: 36px; }
.cg-pase { overflow-x: auto; padding: 30px 4px 6px; scrollbar-width: thin; }
.cg-pase-lista { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; width: max-content; min-width: 100%; }
.cg-pn { position: relative; flex: 0 0 112px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 8px 12px; border-radius: 9px; background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .22); }
.cg-nv-n { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); min-width: 28px; height: 26px; padding: 0 7px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--cg-papel-3); color: var(--cg-texto-2); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .3); }
.cg-pn-ico { width: 46px; height: 46px; margin-top: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cg-papel-3); color: var(--cg-texto-3); }
.cg-pn-premio { margin-top: 9px; min-height: 31px; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--cg-texto); overflow-wrap: anywhere; }
.cg-pn-umbral { margin-top: 3px; font-size: 12px; color: var(--cg-texto-3); font-variant-numeric: tabular-nums lining-nums; }
.cg-pn-estado { margin-top: 9px; font-size: 12px; letter-spacing: 1px; font-weight: 800; text-transform: uppercase; color: var(--cg-texto-3); }
.cg-pn-btn { margin-top: 9px; height: 30px; padding: 0 12px; font-size: 12px; }
.cg-pn.rec { background: rgba(46, 122, 98, .06); border-color: rgba(46, 122, 98, .3); }
.cg-pn.rec .cg-nv-n { background: var(--verde-f); color: var(--cg-superficie-alta); box-shadow: none; }
.cg-pn.rec .cg-pn-estado { color: var(--cg-ok); }
.cg-pn.listo { border-color: var(--cg-bronce); box-shadow: 0 0 0 3px rgba(179, 148, 92, .18), 0 6px 14px rgba(128, 98, 48, .18); }
.cg-pn.listo .cg-nv-n { background: linear-gradient(180deg, var(--cg-bronce-claro), var(--cg-bronce)); color: var(--cg-verde); box-shadow: none; }
.cg-pn.listo .cg-pn-ico, .cg-pn.rec .cg-pn-ico { background: radial-gradient(circle at 36% 30%, var(--cg-bronce-brillo), var(--cg-bronce) 58%, var(--cg-bronce-osc)); color: var(--cg-verde); }
.cg-pn.cerr { opacity: .72; }
.cg-pn.sig { border-color: var(--cg-bronce); }
.cg-aqui { flex: 0 0 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 0 6px; }
.cg-aqui .cg-k { margin: 0; }
.cg-aqui-tri { width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 12px solid var(--cg-bronce); }
.cg-aqui-txt { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--cg-texto-2); }
.cg-aqui-txt b { color: var(--cg-bronce-osc); }

/* Insignias: tres tarjetas con medallón; «Ver todo» abre vitrinas, colección, próximas y filtros. */
.cg-ins-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cg-ins-c { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 9px; background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .22); }
.cg-ins-md { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cg-ins-c.gan .cg-ins-md { background: radial-gradient(circle at 36% 30%, var(--cg-bronce-brillo), var(--cg-bronce) 58%, var(--cg-bronce-osc)); color: var(--cg-verde); box-shadow: 0 0 0 3px rgba(179, 148, 92, .22), 0 0 16px rgba(179, 148, 92, .45); }
.cg-ins-c.cerca .cg-ins-md { background: var(--cg-papel-3); color: var(--cg-bronce-osc); box-shadow: inset 0 0 0 2px rgba(179, 148, 92, .5); }
.cg-ins-cuerpo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cg-ins-cuerpo b { font: 600 19px/1.1 var(--fuente-titulos); color: var(--cg-texto); }
.cg-ins-cuerpo > span { font-size: 12px; line-height: 1.35; color: var(--cg-texto-2); overflow-wrap: anywhere; }
.cg-ins-cuerpo > .cg-ins-sello { color: var(--cg-texto-3); }
.cg-ins-nueva { align-self: flex-start; margin-bottom: 2px; }
.cg-ins-barra { display: block; flex: none; height: 6px; margin-top: 6px; }
.cg-ins-cuerpo > .cg-ins-pie { margin-top: 4px; font-weight: 700; color: var(--cg-texto-3); }
.cg-ins-cuerpo > .cg-ins-pie.hecha { display: inline-flex; align-items: center; gap: 5px; color: var(--cg-ok); }
.cg-ins-pie i { display: inline-flex; }
.cg-ins-mas { display: flex; justify-content: center; margin-top: 16px; }
.cg-ins-mas .cg-btn-lin { gap: 6px; background: transparent; cursor: pointer; }
.cg-ins-caja { padding: 20px 24px; margin-bottom: 14px; }
.cg-ins-caja-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cg-ins-caja-cab .cg-sec { font-size: 24px; }
.cg-ins-caja .cg-k, .cg-tmp-bloque .insig-proximas .cg-k, .cg-tmp-bloque .insig-familias .cg-k { white-space: normal; }
.cg-tmp-bloque .insig-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--cg-texto-2); background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .3); }
.cg-tmp-bloque .insig-chip b { color: var(--cg-texto); font-weight: 700; }
.cg-tmp-bloque .insig-chip.ok { background: rgba(46, 122, 98, .1); border-color: rgba(46, 122, 98, .35); color: var(--cg-ok); }
.cg-tmp-bloque .insig-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.cg-tmp-bloque .insig-filtros .cg-pil { background: transparent; cursor: pointer; font: 600 12px var(--fuente); }
.cg-tmp-bloque .insig-filtros .cg-pil.on { background: var(--cg-verde); }
.cg-tmp-bloque .insig-filtros .cg-pil .mini { opacity: .75; }
@media (max-width: 1100px) {
  .cg-tmp-fila { flex-direction: column; }
  .cg-tmp-id { flex: 1 1 auto; }
  .cg-ins-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .cg-tmp-id, .cg-tmp-premio { padding: 18px 18px; }
  .cg-tmp-premio-cab { flex-wrap: wrap; }
  .cg-tmp-premio-cobrado { margin-left: 0; text-align: left; }
  .cg-esc-t { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-ins-rejilla { grid-template-columns: minmax(0, 1fr); }
  .cg-tmp-cajitas { flex-wrap: wrap; }
}

/* ==========================================================================
   068 · LADO A LADO DE MI PANEL (aviso de PARTY, 5-oct 08:07)
   ========================================================================== */
/* 1 · La cabecera va a todo el ancho, como la maqueta: escudo y menú a 32 px del borde izquierdo; a la derecha, MIS BEKY ·
   línea fina · campana · avatar pegados a 32 px del borde. Con el tope de --ancho-app se centraba en un bloque de 1440. */
@media (min-width: 861px) {
  .cg-cab .barra-sup-cuerpo { max-width: none; padding-left: 32px; padding-right: 32px; }
  /* El header es flex con margin auto: sin esto el cuerpo se encoge a su contenido y se centra (escudo a ~205 px). */
  .cg-cab .barra-sup-cuerpo { flex: 1 1 auto; width: 100%; }
}
.cg-cab .sep-barra { display: block; height: 28px; background: var(--cg-bronce); opacity: .45; }
@media (max-width: 860px) { .cg-cab .sep-barra { display: none; } }
/* 2 · La tarjeta del equipo es verde oscura: la copia de .cg-sup de más abajo le pisaba el fondo (mismo peso, llega después). */
.cg-sup.cg-equipo { background: linear-gradient(180deg, var(--cg-verde-2) 0%, var(--cg-verde) 55%, var(--cg-verde-borde) 100%); border-color: rgba(179, 148, 92, .45);
  box-shadow: 0 12px 28px rgba(30, 20, 8, .26); color: var(--cg-marfil); }
/* 6 · «En el coliseo»: tres columnas fijas; una tarjeta sola conserva su tercio en vez de estirarse a todo el ancho. */
.cg-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cg-col > .cg-col-vacio { grid-column: 1 / -1; }
@media (max-width: 820px) { .cg-col { grid-template-columns: minmax(0, 1fr); } }
/* 8 · La cinta EN VIVO, la tira «Tu perfil va al…» y el aviso de campaña son solo de Mi panel. No se borran: se muestran ahí. */
body[data-cg-sec]:not([data-cg-sec="hoy"]) #cgCinta,
body[data-cg-sec]:not([data-cg-sec="hoy"]) #perfilAviso,
body[data-cg-sec]:not([data-cg-sec="hoy"]) #bandaEvento { display: none; }

/* ===================================================================== 071 · REVISIÓN DE USUARIO DEL 5-OCT (PARTY)
   Choques de la unión de las consolas: una misma clase definida en dos pantallas, y la segunda pisaba a la primera.
   Aquí cada regla vuelve a su pantalla. Solo estilos: no cambia datos, textos ni comportamiento. */
/* a) Finanzas · Tu mes: la barra de la meta crecía hasta llenar la tarjeta (heredaba flex:1 de Global Party). */
.cg-fin-mes-meta .cg-barra { flex: 0 0 auto; }
/* b) Mi panel · Meta del mes (055): la barra alta con marcas y su pie, que el «Tu nivel del mes» de Mi ruta (068) había pisado. */
.cg-mes-barra-caja .cg-mes-barra { height: 24px; margin-top: 0; border-radius: 5px; background: rgb(232, 225, 210); overflow: visible;
  box-shadow: inset 0 2px 5px rgba(80,62,34,.3), inset 0 -1px 0 rgba(255,255,255,.7); }
.cg-mes-barra-caja .cg-mes-pie { display: flex; justify-content: space-between; margin-top: 7px; line-height: normal; color: rgb(95, 100, 92); }
.cg-mes-barra-caja .cg-mes-pie strong { color: var(--cg-texto); }
.cg-mes-barra-caja .cg-mes-pie #cgMesFaltan strong { color: var(--cg-bronce-osc); }
/* c) Etiquetas sobre tarjetas verdes: la versión para fondo claro las dejaba grises sobre verde oscuro. */
.cg-verde .cg-k, .cgp-verde .cg-k { color: var(--cg-verde-dato); }
.cg-verde #rachaTexto .racha-etq, .cg-verde .racha-etq { color: var(--cg-verde-dato); }
.cg-verde .cg-meta-pie { display: flex; justify-content: space-between; color: rgb(147, 179, 168); }
.cg-verde .cg-meta-pie strong, .cg-verde .cg-meta-pie b { color: rgb(243, 235, 217); }
.cg-verde .cg-meta-pie span:last-child strong { color: var(--cg-bronce-claro); }
.cg-verde .cg-tag.bronce { background: rgba(232, 213, 168, .14); color: var(--cg-bronce-claro); box-shadow: inset 0 0 0 1px rgba(232, 213, 168, .4); }
/* d) Mi perfil · Ayuda: las preguntas iban pegadas a la derecha (el resumen reparte el espacio y aquí no hay tercer elemento). */
.pf-grupo.ay-faq > summary { justify-content: flex-start; }
.cg-dat-izq .ay-faq .pf-grupo-tit { flex: 1 1 auto; }
/* e) Botones de dos toques con la piel nueva: «¿Seguro? …» quedaba crema sobre crema con el cursor encima. */
.boton.cg-btn-pri.confirmar, .boton.cg-btn-pri.confirmar:hover, .boton.cg-btn-pri.confirmar:focus, .boton.cg-btn-pri.confirmar:active,
.cg-btn-pri.confirmar, .cg-btn-pri.confirmar:hover, .cg-btn-pri.confirmar:focus {
  background: linear-gradient(180deg, rgb(138, 106, 48), rgb(94, 69, 32)); color: var(--cg-superficie-alta); border-color: transparent; }
/* f) Celular */
@media (max-width: 820px) {
  /* «Tus números»: las celdas se encimaban; como en la maqueta, la tira se desliza de lado. */
  .cgp-placa.cg-gr-tira { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 14px 4px; }
  .cgp-placa.cg-gr-tira > .cgp-celda, .cgp-placa.cg-gr-tira > .cgp-celda:last-child { flex: 0 0 auto; padding: 0 18px; }
  .cgp-placa.cg-gr-tira > .cgp-div { display: block; flex: 0 0 1px; }
  /* Depósitos: el rótulo de la tarjeta verde se salía por la derecha. */
  .cg-dep-lado .cg-k { white-space: normal; }
  /* Credencial de Mi perfil: apilados, los dos botones quedaban como una rayita (el flex:1 en línea los aplastaba). */
  .cg-cred-bot .cg-btn { flex: 0 0 auto !important; height: 38px !important; }
}
@media (max-width: 560px) {
  /* El Muro · récords de la casa a dos columnas: una cifra de cinco dígitos se montaba sobre la columna vecina. */
  .mu-records .cgp-piedra img { height: 28px !important; }
  .mu-records .cgp-piedra .cgp-pre { font-size: 15px !important; }
}