/* ============================================================
   game.css · Juego "Cazafraudes" · vertical Financial Education
   ------------------------------------------------------------
   Prefijo .cz- y CERO colores literales (contrato 03, G6): solo
   ranuras del Core y tokens --v-* de la vertical.

   Los mensajes se dibujan con la forma del canal por el que
   llegarian, porque reconocer el formato es parte de lo que se
   aprende: un SMS no se lee igual que un correo. Aun asi, el canal
   nunca se indica SOLO por el color: siempre lleva su rotulo.
   ============================================================ */

.cz-juego{max-width:760px;font-family:var(--f-texto)}

/* --- Cabeceras --- */
.cz-cab{margin-bottom:1.3rem}
.cz-titulo{font-family:var(--f-titulo);font-size:clamp(1.6rem,3.2vw,2.2rem);line-height:1.15;
  letter-spacing:-.02em;color:var(--color-primary-deep);margin:0 0 .35rem}
.cz-sub{font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-accent-dark);margin:0}
.cz-intro{font-size:1rem;line-height:1.65;color:var(--color-text-soft);max-width:62ch;margin:0 0 1.8rem}

/* --- Eleccion de etapa --- */
.cz-etapas{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.4rem}
.cz-etapa{display:block;text-align:left;background:var(--color-white);
  border:1px solid var(--v-tarjeta-linea);border-left-width:5px;border-radius:4px;
  padding:1.3rem 1.4rem;cursor:pointer;transition:box-shadow .15s}
.cz-etapa:hover{box-shadow:var(--sombra)}
.cz-etapa-eso{border-left-color:var(--v-eso)}
.cz-etapa-bach{border-left-color:var(--v-bach)}
.cz-etapa-n{display:block;font-family:var(--f-titulo);font-weight:700;font-size:1.2rem}
.cz-etapa-eso .cz-etapa-n{color:var(--v-eso)}
.cz-etapa-bach .cz-etapa-n{color:var(--v-bach)}
.cz-etapa-e{display:block;font-size:.85rem;color:var(--color-text-muted);margin-top:.1rem}
.cz-etapa-t{display:block;font-size:.95rem;color:var(--color-text-soft);margin-top:.6rem}

/* --- Marcador: cuantos van y como han ido --- */
.cz-marcador{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:1px solid var(--v-tarjeta-linea)}
.cz-contador{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-text-muted)}
.cz-puntitos{display:flex;gap:.4rem}
.cz-punto{width:10px;height:10px;border-radius:50%;background:var(--v-tarjeta-linea)}
.cz-punto-ahora{background:var(--color-primary)}
.cz-punto-ok{background:var(--v-ok)}
.cz-punto-mal{background:var(--v-alerta)}

/* --- El mensaje, con la forma de su canal --- */
.cz-mensaje{background:var(--color-white);border:1px solid var(--v-tarjeta-linea);
  border-radius:8px;overflow:hidden;margin-bottom:1.4rem}
.cz-mensaje-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem;
  padding:.75rem 1.2rem;background:var(--color-bg-2);border-bottom:1px solid var(--v-tarjeta-linea)}
.cz-canal{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-white);background:var(--color-primary);border-radius:3px;padding:.2rem .5rem}
.cz-remitente{font-size:.92rem;font-weight:700;color:var(--color-primary-deep);
  word-break:break-word}
.cz-cuerpo{font-size:1.02rem;line-height:1.7;color:var(--color-text);margin:0;padding:1.4rem 1.2rem}

/* Cada canal, su acento. Nunca es la unica senal: el rotulo lo dice en texto. */
.cz-canal-sms .cz-canal{background:var(--v-bach)}
.cz-canal-email .cz-canal{background:var(--color-primary)}
.cz-canal-chat .cz-canal{background:var(--v-ok)}
.cz-canal-llamada .cz-canal{background:var(--color-accent-dark)}
.cz-canal-app .cz-canal{background:var(--v-eso)}
.cz-canal-chat .cz-cuerpo,.cz-canal-sms .cz-cuerpo{font-size:.98rem}
.cz-canal-llamada .cz-cuerpo{font-style:italic}

/* --- Los dos botones del veredicto --- */
.cz-veredicto{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1rem}
.cz-btn-legit,.cz-btn-fraude{padding:1.1rem 1rem;font-size:1.02rem}
.cz-btn-legit{border-color:var(--v-ok);color:var(--v-ok)}
.cz-btn-legit:hover{background:var(--v-ok);color:var(--color-white);border-color:var(--v-ok)}
.cz-btn-fraude{border-color:var(--v-alerta);color:var(--v-alerta)}
.cz-btn-fraude:hover{background:var(--v-alerta);color:var(--color-white);border-color:var(--v-alerta)}

/* --- Resultado del veredicto y eleccion de la senal --- */
.cz-fallo-ok{font-family:var(--f-titulo);font-size:1.15rem;font-weight:700;margin:0 0 1.2rem}
.cz-ok{color:var(--v-ok)}
.cz-mal{color:var(--v-alerta)}
.cz-aviso-color{color:var(--color-accent-dark)}

.cz-pregunta{font-family:var(--f-titulo);font-size:1.1rem;color:var(--color-primary-deep);margin:0 0 .8rem}
.cz-senales{display:grid;gap:.6rem;margin-bottom:1rem}
.cz-senal{text-align:left;background:var(--color-bg);border:1.5px solid var(--v-tarjeta-linea);
  border-radius:4px;padding:.9rem 1.1rem;cursor:pointer;font-family:var(--f-texto);
  font-size:.98rem;color:var(--color-text);transition:border-color .15s,background-color .15s}
.cz-senal:hover{border-color:var(--color-primary);background:var(--color-white)}

/* --- La explicacion, que es el nucleo del juego --- */
.cz-explicacion{border-left:3px solid var(--color-secondary);padding:.2rem 0 .2rem 1.2rem;margin-bottom:1.4rem}
.cz-senal-veredicto{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .3rem}
.cz-senal-correcta{font-family:var(--f-titulo);font-size:1.05rem;color:var(--color-primary-deep);margin:0 0 .8rem}
.cz-leccion{font-size:1rem;line-height:1.7;color:var(--color-text-soft);margin:0 0 1.2rem;max-width:64ch}
.cz-que-hacer{background:var(--color-bg-2);border-radius:4px;padding:.9rem 1.1rem;max-width:64ch}
.cz-que-hacer p{font-size:.94rem;line-height:1.6;color:var(--color-text-soft);margin:0}
.cz-etiqueta{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-accent-dark);margin-bottom:.35rem}

/* --- Botones --- */
.cz-btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-texto);font-weight:700;font-size:.97rem;padding:.8rem 1.6rem;
  border-radius:4px;border:1.5px solid var(--v-tarjeta-linea);background:transparent;
  color:var(--color-primary-dark);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.cz-btn:hover{border-color:var(--color-primary);color:var(--color-primary-deep)}
.cz-btn-principal{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}
.cz-btn-principal:hover{background:var(--color-primary-deep);border-color:var(--color-primary-deep);color:var(--color-white)}
.cz-acciones{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.8rem 0 1.2rem}
.cz-sonido{margin-left:.8rem;background:none;border:0;cursor:pointer;font-family:var(--f-texto);
  font-size:.85rem;color:var(--color-text-muted);text-decoration:underline}

/* --- Resultado final --- */
.cz-resultado{display:flex;flex-wrap:wrap;gap:2.2rem;padding:1.4rem 0;
  border-top:3px solid var(--color-primary);border-bottom:1px solid var(--v-tarjeta-linea);margin-bottom:1.8rem}
.cz-cifra{display:flex;flex-direction:column;gap:.15rem}
.cz-cifra-et{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-text-muted)}
.cz-cifra-v{font-family:var(--f-titulo);font-size:1.3rem;color:var(--color-primary-deep);
  font-variant-numeric:tabular-nums}
.cz-grande .cz-cifra-v{font-size:2rem}
.cz-ok .cz-cifra-v{color:var(--v-ok)}
.cz-mal .cz-cifra-v{color:var(--v-alerta)}
.cz-aviso-color .cz-cifra-v{color:var(--color-accent-dark)}

.cz-bloque-t{font-family:var(--f-titulo);font-size:1.1rem;color:var(--color-primary-deep);margin:0 0 .8rem}
.cz-reglas{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:.6rem;counter-reset:cz}
.cz-reglas li{counter-increment:cz;position:relative;padding-left:2.1rem;font-size:.97rem;
  line-height:1.6;color:var(--color-text-soft)}
.cz-reglas li::before{content:counter(cz);position:absolute;left:0;top:.05rem;
  width:1.4rem;height:1.4rem;display:grid;place-items:center;border-radius:50%;
  background:var(--color-primary);color:var(--color-white);font-size:.72rem;font-weight:700}

.cz-picado{border-left:3px solid var(--v-alerta);padding:.3rem 0 .3rem 1.2rem;margin-bottom:2rem;max-width:66ch}
.cz-picado p{font-size:.95rem;line-height:1.65;color:var(--color-text-soft);margin:0}

.cz-repaso{list-style:none;margin:0;padding:0}
.cz-repaso-item{position:relative;padding:1rem 0 1rem 1.2rem;border-top:1px solid var(--v-tarjeta-linea)}
.cz-repaso-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.cz-r-ok::before{background:var(--v-ok)}
.cz-r-mal::before{background:var(--v-alerta)}
.cz-repaso-item b{display:block;font-family:var(--f-titulo);font-size:.98rem;color:var(--color-primary-deep)}
.cz-repaso-v{display:block;font-size:.85rem;color:var(--color-text-muted);margin:.15rem 0 .3rem}
.cz-repaso-s{display:block;font-size:.92rem;line-height:1.55;color:var(--color-text-soft)}

.cz-aviso{font-size:.82rem;line-height:1.6;color:var(--color-text-muted);max-width:70ch;margin-top:1.4rem}

/* --- Foco visible --- */
.cz-juego button:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}

/* --- Pantallas estrechas --- */
@media (max-width:720px){
  .cz-etapas,.cz-veredicto{grid-template-columns:1fr}
  .cz-cuerpo{padding:1.1rem}
  .cz-resultado{gap:1.4rem}
  .cz-btn,.cz-acciones .cz-btn{width:100%}
}