/* Funciones cognitivas — estilos propios (se cargan después de css/app.css y css/objetivo.css, que no se tocan). */
body.cognitivas { background: #F6F2FC; }
.cg-histtop { margin: 0; font-size: 1.05rem; padding: 0.6rem 1.1rem; white-space: nowrap; }
.cognitivas .o-head .home-back { white-space: nowrap; }
/* áreas */
.cg-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cg-acard { position: relative; display: flex; flex-direction: column; gap: 0.2rem; text-align: left; font: inherit; color: #2f3b38; border: 3px solid rgba(255,255,255,0.95);
  border-radius: 28px; padding: 0.8rem 1.1rem 1rem; cursor: pointer; box-shadow: 0 6px 20px rgba(90,80,120,0.12); -webkit-tap-highlight-color: transparent; min-width: 0; }
.cg-acard:active { transform: scale(0.985); }
.cg-acard .cg-aart { width: 100%; height: 104px; }
.cg-aname { font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.cg-adesc { font-size: 0.98rem; color: #4d5160; line-height: 1.25; }
.cg-ameta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.cg-pill { background: #fff; border-radius: 99px; padding: 0.2rem 0.7rem; font-size: 0.85rem; font-weight: 700; color: #3d3360; }
.cg-pill.soft { background: rgba(255,255,255,0.65); color: #6d6488; font-weight: 600; }
.cg-acard .pt-go { margin-top: 0.55rem; background: #3d3360; }
.cg-acard:not(.soon) { grid-row: span 1; }
.cg-acard.soon { cursor: pointer; filter: saturate(0.75); box-shadow: 0 4px 14px rgba(80,90,90,0.08); }
.cg-acard.soon .cg-aart { opacity: 0.72; }
.cg-acard.soon .cg-aname, .cg-acard.soon .cg-adesc { opacity: 0.75; }
.cg-acard.soon:active { transform: none; }
.cg-acard.wiggle { animation: ptw 0.5s ease; }
.cg-acard .pt-badge { top: 0.75rem; right: 0.8rem; }
/* tarjetas de ejercicio */
.cg-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.95rem; }
.cg-card { position: relative; display: flex; flex-direction: column; gap: 0.15rem; text-align: left; color: #2f3b38; border: 3px solid rgba(255,255,255,0.95);
  border-radius: 26px; padding: 0.7rem 0.9rem 0.85rem; box-shadow: 0 6px 20px rgba(90,80,120,0.12); min-width: 0; }
.cg-card .o-num { position: absolute; top: 0.6rem; left: 0.7rem; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255,255,255,0.85); font-weight: 900; display: flex; align-items: center; justify-content: center; color: #6d6488; }
.cg-card .cg-eart { width: 100%; height: 92px; }
.cg-name { font-size: 1.28rem; font-weight: 800; line-height: 1.12; }
.cg-sub { align-self: flex-start; font-size: 0.8rem; font-weight: 800; color: #7e63b3; background: rgba(255,255,255,0.8); border-radius: 99px; padding: 0.1rem 0.6rem; margin: 0.1rem 0; }
.cg-desc { font-size: 0.92rem; color: #4d5160; line-height: 1.22; }
.cg-card .o-prog { display: flex; gap: 0.3rem; margin-top: auto; padding-top: 0.45rem; align-items: center; font-size: 0.82rem; color: #555; flex-wrap: wrap; }
.cg-card .o-dot { min-width: 1.75rem; height: 1.75rem; }
.o-lastc { font-weight: 700; color: #3d3360; }
.cg-btns { display: flex; gap: 0.45rem; margin-top: 0.5rem; }
.cg-play, .cg-evo { font: inherit; cursor: pointer; border-radius: 16px; min-height: 3.2rem; -webkit-tap-highlight-color: transparent; }
.cg-play { flex: 1.25; font-size: 1.15rem; font-weight: 900; border: none; background: #3d3360; color: #fff; box-shadow: 0 4px 12px rgba(61,51,96,0.25); }
.cg-evo { flex: 1; font-size: 0.95rem; font-weight: 800; border: 2px solid #3d3360; background: #fff; color: #3d3360; padding: 0 0.3rem; }
.cg-play:active, .cg-evo:active { transform: scale(0.96); }
/* ejercicio */
.cg-excol1 { display: flex; flex-direction: column; gap: 0.8rem; }
.cg-example { margin: 0; background: #FFF6D6; border-radius: 18px; padding: 0.7rem 1rem; font-size: 1.08rem; color: #5b4b2e; line-height: 1.35; }
.cg-example::before { content: '💡 '; }
.cognitivas .o-how { font-size: 1.15rem; line-height: 1.4; }
/* juego */
.cg-stage { background: radial-gradient(circle at 30% 20%, #FFFFFF, #FFF8EE 70%); }
.cg-prompt { position: absolute; top: 6px; display: flex; align-items: center; justify-content: center; gap: 0.6rem; pointer-events: none; text-align: center;
  font-size: 1.45rem; font-weight: 800; color: #3d3360; min-height: 74px; box-sizing: border-box; padding: 0 0.6rem; line-height: 1.15; }
.cg-prompt .pbox { background: rgba(255,255,255,0.93); border-radius: 22px; padding: 0.4rem 1.1rem; box-shadow: 0 3px 10px rgba(61,51,96,0.1); display: inline-flex; align-items: center; gap: 0.6rem; max-width: 100%; }
.cg-prompt svg, .o-stage .cg-prompt svg { position: static; inset: auto; display: inline-block; width: 52px; height: 52px; flex: 0 0 52px; }
.cg-prompt small { display: block; font-size: 1rem; font-weight: 700; color: #6d6488; }
.cg-prompt.cg-pop { animation: cgPromptIn 0.35s ease; }
@keyframes cgPromptIn { from { opacity: 0.2; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cg-zonelbl { font-size: 3.6px; fill: #9a8cbc; font-weight: 700; }
.cg-t { fill: #3d3360; font-weight: 800; }
.cg-btn rect { fill: #3d3360; }
.cg-btn text { fill: #fff; font-weight: 900; }
.cg-btn.light rect { fill: #fff; stroke: #C9BBD6; stroke-width: 0.7; }
.cg-btn.light text { fill: #3d3360; }
.cg-btn.sel rect { fill: #FFD27A; stroke: #3d3360; stroke-width: 0.9; }
.cg-btn.sel text { fill: #3d3360; }
.cg-btn.ok rect { fill: #9FDFB0; stroke: #2e8a4a; stroke-width: 0.9; } .cg-btn.ok text { fill: #1f5e33; }
.cg-btn.no rect { fill: #FFD4D4; stroke: #d06a6a; stroke-width: 0.9; } .cg-btn.no text { fill: #8a3a3a; }
.cg-btn.dis { opacity: 0.4; }
.cg-btn.ghost rect { fill: transparent; stroke: none; }
.cg-btn.ghost text { fill: transparent; }
.cg-btn, .cg-item, g.cg-pop, g.cg-glow, g.cg-wob { transform-box: fill-box; transform-origin: center; }
.cg-pop { animation: cgPop 0.3s cubic-bezier(.3,1.6,.6,1); }
@keyframes cgPop { 0% { transform: scale(0.92); } 100% { transform: scale(1); } }
.cg-shake { animation: cgShake 0.42s ease; }
@keyframes cgShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-1.2px); } 40% { transform: translateX(1.2px); } 60% { transform: translateX(-0.8px); } 80% { transform: translateX(0.8px); } }
.cg-ftext { font-size: 5px; font-weight: 900; paint-order: stroke; stroke: #fff; stroke-width: 1.2px; animation: oFloat 0.9s ease-out forwards; }
.cg-ring { fill: none; stroke-width: 0.7; animation: oBurst 0.7s ease-out forwards; }
.cg-fadein { animation: cgFade 0.35s ease; }
@keyframes cgFade { from { opacity: 0; } to { opacity: 1; } }
.cg-wob { animation: cgWob 1s ease-in-out infinite; }
@keyframes cgWob { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
.cg-glow { animation: cgGlow 1.2s ease-in-out infinite; }
@keyframes cgGlow { 50% { opacity: 0.55; } }
.cg-done { opacity: 0.38; }
/* resumen */
.cg-sumtop { display: flex; gap: 1.2rem; align-items: center; margin-bottom: 0.8rem; }
.cg-bigpct { flex: 0 0 auto; width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(#9FDFB0, #9CC9F0, #C3B1E1, #FFB4C8, #9FDFB0); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 0 12px rgba(255,255,255,0.75); }
.cg-bigpct b { font-size: 3rem; color: #3d3360; line-height: 1; } .cg-bigpct b small { font-size: 1.3rem; } .cg-bigpct span { font-size: 0.95rem; color: #3d3360; font-weight: 700; }
.cg-stars { margin: 0.1rem 0; font-size: 2.2rem; letter-spacing: 0.2rem; } .cg-stars span { color: #E6E0EE; } .cg-stars span.on { color: #FFC83D; text-shadow: 0 2px 0 #E8A800; }
.cg-cmp { margin: 0.2rem 0 0; font-weight: 800; font-size: 1.05rem; } .cg-cmp.up { color: #1a7a3a; } .cg-cmp.dn { color: #9a6a2a; } .cg-cmp.eq { color: #6d6488; }
.cg-sumbox .o-sum { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.cg-sumbox .o-sum b { font-size: 1.6rem; }
/* próximamente */
.cg-plan { list-style: none; padding: 0; margin: 0.4rem 0 0.6rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.cg-plan li { background: #F6F2FC; border-radius: 14px; padding: 0.55rem 0.8rem; }
.cg-plan b { display: block; font-size: 1.08rem; color: #3d3360; } .cg-plan span { font-size: 0.92rem; color: #555; }
@media (max-width: 900px) {
  .cg-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-sumtop { flex-direction: row; }
  .cg-plan { grid-template-columns: 1fr; }
}
@media (min-width: 901px) {
  .cg-areas .cg-acard:not(.soon) .cg-aart { height: 120px; }
}
/* clave de colores (Colorea según la clave) */
.cg-prompt .ckey { flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.1rem; padding: 0.3rem 1rem; }
.cg-prompt .ckey .kk { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 1.3rem; white-space: nowrap; }
.o-stage .cg-prompt .ckey svg { width: 40px; height: 40px; flex: 0 0 40px; }
.cg-prompt .ckey em { font-style: normal; font-size: 0.95rem; color: #6d6488; }
.cg-prompt b.big { font-size: 1.9rem; color: #2e7a4a; }
.cg-lit { filter: drop-shadow(0 0 2px rgba(255,255,255,0.9)); }

/* v24 · tabla de «Cuenta las figuras» (Experto) */
.cg-prompt .ctab .tcell { border: 2px solid #E3DCEB; border-radius: 14px; padding: 0.1rem 0.5rem 0.1rem 0.3rem; background: #fff; }
.cg-prompt .ctab .tcell b { font-size: 1.5rem; min-width: 1.4ch; text-align: center; }
.cg-prompt .ctab .tcell.cur { border-color: #E0A400; background: #FFF6D6; }
.cg-prompt .ctab .tcell.ok { border-color: #5DBB7A; background: #E4F6E8; }
.cg-prompt .ctab .tcell.ok b { color: #2e7a4a; }
.cg-prompt .ctab .tcell.no { border-color: #F2A0A0; background: #FDECEC; }
.cg-prompt .ctab .tcell.no b { color: #b0571a; }
.cg-prompt .ctab .kq { font-size: 1.3rem; white-space: nowrap; }
/* v24 · cabecera en vertical: que el reloj no se parta en dos líneas */
#cg-hud .o-timer, #fina-hud .o-timer { white-space: nowrap; flex: 0 0 auto; }
#cg-hud .o-hname, #fina-hud .o-hname { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
#cg-hud .o-counters, #fina-hud .o-counters { flex: 1 1 auto; }
#cg-hud .o-hbtn.strong, #fina-hud .o-hbtn.strong { flex: 0 0 auto; }
@media (max-width: 900px) {
  #cg-hud .o-counters span, #fina-hud .o-counters span { padding: 0.16rem 0.45rem; font-size: 0.9rem; }
  #cg-hud .o-hname, #fina-hud .o-hname { font-size: 0.92rem; max-width: 42%; }
  #cg-hud, #fina-hud { gap: 0.3rem 0.35rem; flex-wrap: wrap; }
  /* chips a 2ª fila (especificidad > #cg-hud .o-counters { flex: 1 1 auto }) */
  #cg-hud .o-counters, #fina-hud .o-counters {
    flex: 1 1 100% !important;
    order: 10;
    margin-left: 0;
    justify-content: flex-start;
  }
  #cg-hud .o-timer, #fina-hud .o-timer { margin-left: auto; flex: 0 0 auto; }
  #cg-hud .o-hbtn.strong, #fina-hud .o-hbtn.strong { flex: 0 0 auto; }
}