/* ============================================================
   game.css · Juego "Llegar a fin de mes" · vertical Financial Education
   ------------------------------------------------------------
   Regla del contrato 02 y del contrato 03 (G6) para juegos nuevos:
   prefijo de clase propio (.fm-) y NINGUN color literal. Solo
   ranuras del Core (--color-*) y tokens de la vertical (--v-*).
   Aspecto sobrio, coherente con el resto de la vertical: sin
   degradados ni relieves, el color solo marca signo y estado.
   ============================================================ */

/* Alineado con el boton "Volver a Juegos" del Core, no centrado. */
.fm-juego{max-width:840px;font-family:var(--f-texto)}

/* --- Cabeceras --- */
.fm-cab{margin-bottom:1.4rem}
.fm-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}
.fm-sub{font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-accent-dark);margin:0}
.fm-intro{font-size:1rem;line-height:1.65;color:var(--color-text-soft);max-width:62ch;margin:0 0 1.8rem}

/* --- Eleccion de etapa --- */
.fm-etapas{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.4rem}
.fm-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:border-color .15s,box-shadow .15s}
.fm-etapa:hover{box-shadow:var(--sombra)}
.fm-etapa-eso{border-left-color:var(--v-eso)}
.fm-etapa-bach{border-left-color:var(--v-bach)}
.fm-etapa-n{display:block;font-family:var(--f-titulo);font-weight:700;font-size:1.2rem;
  color:var(--color-primary-deep)}
.fm-etapa-eso .fm-etapa-n{color:var(--v-eso)}
.fm-etapa-bach .fm-etapa-n{color:var(--v-bach)}
.fm-etapa-e{display:block;font-size:.85rem;color:var(--color-text-muted);margin-top:.1rem}
.fm-etapa-t{display:block;font-size:.95rem;color:var(--color-text-soft);margin-top:.6rem}

/* --- Ficha del mes --- */
.fm-ficha{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:1.6rem}
.fm-col h2{font-family:var(--f-texto);font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 .7rem;padding-bottom:.5rem;border-bottom:2px solid var(--v-tarjeta-linea)}
.fm-entra h2{color:var(--v-ok);border-bottom-color:var(--v-ok)}
.fm-sale h2{color:var(--color-accent-dark);border-bottom-color:var(--color-accent-dark)}
.fm-lista{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.fm-lista li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;
  font-size:.95rem;color:var(--color-text-soft);padding-bottom:.5rem;
  border-bottom:1px solid var(--v-tarjeta-linea)}
.fm-lista li b{color:var(--color-primary-deep);font-variant-numeric:tabular-nums}
.fm-nota{flex:0 0 100%;font-size:.82rem;line-height:1.55;color:var(--color-text-muted);margin-top:.3rem}

.fm-resumen-ficha{display:flex;flex-wrap:wrap;gap:2.4rem;padding:1.2rem 0;
  border-top:1px solid var(--v-tarjeta-linea);border-bottom:1px solid var(--v-tarjeta-linea)}
.fm-objetivo-texto{font-size:.95rem;line-height:1.65;color:var(--color-text-soft);
  max-width:62ch;margin:1.2rem 0 1.8rem}

/* --- Datos con etiqueta --- */
.fm-dato{display:flex;flex-direction:column;gap:.15rem}
.fm-dato-et{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-text-muted)}
.fm-dato-v{font-family:var(--f-titulo);font-size:1.25rem;color:var(--color-primary-deep);
  font-variant-numeric:tabular-nums}
.fm-grande .fm-dato-v{font-size:2rem}
.fm-rojo .fm-dato-v,.fm-rojo{color:var(--v-alerta)}
.fm-verde .fm-dato-v,.fm-verde{color:var(--v-ok)}

/* --- Marcador y progreso --- */
.fm-marcador{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2rem;margin-bottom:1.6rem;
  padding-bottom:1rem;border-bottom:1px solid var(--v-tarjeta-linea)}
.fm-barra{flex:1 1 160px;height:6px;min-width:120px;background:var(--v-tarjeta-linea);border-radius:3px;overflow:hidden}
.fm-barra-fill{display:block;height:100%;background:var(--color-primary);transition:width .25s ease}

/* --- Carta de decision --- */
.fm-carta{background:var(--color-white);border:1px solid var(--v-tarjeta-linea);border-radius:6px;
  padding:1.8rem;margin-bottom:1.4rem}
.fm-carta-imprevisto{border-left:5px solid var(--v-alerta)}
.fm-carta-leccion{border-left:5px solid var(--color-secondary)}
.fm-etiqueta{display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-accent-dark);margin-bottom:.5rem}
.fm-carta-imprevisto .fm-etiqueta{color:var(--v-alerta)}
.fm-carta-titulo{font-family:var(--f-titulo);font-size:1.3rem;line-height:1.25;
  color:var(--color-primary-deep);margin:0 0 .7rem}
.fm-carta-texto{font-size:1rem;line-height:1.65;color:var(--color-text-soft);margin:0 0 1.4rem;max-width:62ch}
.fm-impacto{font-family:var(--f-titulo);font-size:1.5rem;margin:0 0 1.2rem;font-variant-numeric:tabular-nums}

/* --- Opciones --- */
.fm-opciones{display:grid;gap:.7rem}
.fm-opcion{display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:left;
  background:var(--color-bg);border:1.5px solid var(--v-tarjeta-linea);border-radius:4px;
  padding:1rem 1.2rem;cursor:pointer;font-family:var(--f-texto);font-size:.98rem;
  color:var(--color-text);transition:border-color .15s,background-color .15s}
.fm-opcion:hover{border-color:var(--color-primary);background:var(--color-white)}
.fm-opcion-t{flex:1 1 auto}
.fm-opcion-c{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--v-alerta)}
.fm-opcion-c.fm-verde{color:var(--v-ok)}

.fm-elegiste{font-size:.9rem;font-weight:700;color:var(--color-primary);margin:0 0 .8rem}
.fm-leccion{font-size:1rem;line-height:1.7;color:var(--color-text-soft);margin:0 0 1.4rem;max-width:64ch}

/* --- Botones --- */
.fm-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}
.fm-btn:hover{border-color:var(--color-primary);color:var(--color-primary-deep)}
.fm-btn-principal{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}
.fm-btn-principal:hover{background:var(--color-primary-deep);border-color:var(--color-primary-deep);color:var(--color-white)}
.fm-acciones{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.8rem 0 1.4rem}

.fm-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 --- */
.fm-resultado{display:flex;flex-wrap:wrap;gap:2.4rem;padding:1.5rem 0;
  border-top:3px solid var(--v-tarjeta-linea);border-bottom:1px solid var(--v-tarjeta-linea)}
.fm-r-excelente{border-top-color:var(--v-ok)}
.fm-r-bien{border-top-color:var(--color-primary)}
.fm-r-justo{border-top-color:var(--color-accent)}
.fm-r-rojo{border-top-color:var(--v-alerta)}
.fm-veredicto{font-size:1.02rem;line-height:1.7;color:var(--color-text-soft);max-width:64ch;margin:1.3rem 0 2rem}

.fm-repaso-t{font-family:var(--f-titulo);font-size:1.1rem;color:var(--color-primary-deep);margin:0 0 .9rem}
.fm-repaso{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:fm}
.fm-repaso-item{counter-increment:fm;padding:1.1rem 0 1.1rem 3.2rem;position:relative;
  border-top:1px solid var(--v-tarjeta-linea)}
.fm-repaso-item::before{content:counter(fm,decimal-leading-zero);position:absolute;left:1.1rem;top:1.15rem;
  font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--color-text-muted)}
.fm-repaso-item::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.fm-repaso-item.fm-p0::after{background:var(--v-alerta)}
.fm-repaso-item.fm-p1::after{background:var(--color-accent)}
.fm-repaso-item.fm-p2::after{background:var(--color-primary)}
.fm-repaso-item.fm-p3::after{background:var(--v-ok)}
.fm-repaso-item b{display:block;font-family:var(--f-titulo);font-size:1rem;color:var(--color-primary-deep)}
.fm-repaso-op{display:block;font-size:.9rem;font-weight:700;color:var(--color-primary);margin:.2rem 0 .35rem}
.fm-repaso-lec{display:block;font-size:.92rem;line-height:1.6;color:var(--color-text-soft)}

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

/* Los puntos flotantes son del kit del Core; la vertical solo les da su rojo. */
.nepa-puntos.negativo{color:var(--v-alerta)}

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

/* --- Pantallas estrechas --- */
@media (max-width:720px){
  .fm-ficha,.fm-etapas{grid-template-columns:1fr;gap:1.4rem}
  .fm-carta{padding:1.3rem}
  .fm-resumen-ficha,.fm-resultado,.fm-marcador{gap:1.4rem}
  .fm-opcion{flex-wrap:wrap;gap:.4rem}
  .fm-btn,.fm-acciones .fm-btn{width:100%}
}