/* ============================================================
   mercado.css — lo que trajo el mundo 2 (el proceso de Poisson)

   Las pestañas de mundo del mapa, las tarjetas de los mundos en la
   portada (con la cuenta regresiva a la I3), «el caso real» de los
   jefes, el selector de mundo del formulario y las máquinas nuevas del
   arcade (¿es Poisson?, más o menos). El acento verde vive en
   tokens.css ([data-mundo="mercado"]); aquí solo se usa var(--acento).
   ============================================================ */

/* ---------------------------------------------------------------- mapa: pestañas de mundo */

.mp-mundos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem;
  margin: 0 0 1.4rem;
}
.mp-mundo {
  display: grid; gap: .1rem; padding: .6rem .8rem;
  border: 1px solid var(--filete); background: var(--noche-2);
  color: var(--crema-2); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.mp-mundo:hover { border-color: var(--acento); }
.mp-mundo.activo { border-color: var(--acento); background: var(--acento-velo); color: var(--crema); }
.mp-mundo-n { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.mp-mundo-t { font-family: var(--f-display); font-size: 1.15rem; color: var(--crema); }
.mp-mundo-s { font-size: .82rem; color: var(--crema-3); }

/* ---------------------------------------------------------------- portada: los dos mundos */

.po-mundos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: .8rem;
  margin: 1.4rem 0 2rem;
}
.po-mundo {
  --mundo: #4FD3EE;
  display: grid; gap: .3rem; padding: 1rem 1.1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--mundo) 45%, transparent);
  background: color-mix(in srgb, var(--mundo) 6%, var(--noche-2));
  color: var(--crema-2); text-decoration: none; position: relative;
  transition: transform .15s, border-color .15s;
}
.po-mundo-mercado { --mundo: #52E08C; }
.po-mundo-riesgo { --mundo: #FF9A3C; }
:root[data-tema="dia"] .po-mundo { --mundo: #0A6A80; }
:root[data-tema="dia"] .po-mundo-mercado { --mundo: #0B6B3A; }
:root[data-tema="dia"] .po-mundo-riesgo { --mundo: #A0450B; }
.po-mundo:hover { transform: translateY(-2px); border-color: var(--mundo); }
.po-mundo-n { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mundo); }
.po-mundo-t { font-family: var(--f-display); font-size: 1.55rem; color: var(--crema); line-height: 1.1; }
.po-mundo-s { font-size: .92rem; }
.po-mundo-datos { font-family: var(--f-mono); font-size: .78rem; color: var(--crema-3); }
.po-mundo-datos b { color: var(--oro); }
.po-mundo .po-jug-barra { max-width: none; }
.po-mundo-cuenta { margin-top: .2rem; font-family: var(--f-mono); font-size: .82rem; color: var(--crema); }
.po-mundo-cuenta b { color: var(--oro); font-size: 1.25rem; }

/* ---------------------------------------------------------------- jefes: el caso real */

.jf-contexto {
  margin: 0 0 1rem; padding: .9rem 1.1rem;
  border-left: 2px solid var(--acento); background: var(--acento-velo);
}
.jf-contexto-etq { display: flex; align-items: center; gap: .4rem; color: var(--acento); margin-bottom: .35rem; }
.jf-contexto-md { color: var(--crema-2); }
.jf-contexto-md strong { color: var(--crema); }

/* Un chip largo («Secreto · I3 · …») parte línea antes que desbordar en el teléfono. */
.jf-cab-txt .chip, .nv-chips .chip { white-space: normal; max-width: 100%; }

/* ---------------------------------------------------------------- formulario y relámpago */

.f-botones { flex-wrap: wrap; }
.rl-otra { margin-top: .6rem; }

/* ---------------------------------------------------------------- arcade: secciones por mundo */

.mj-mundo-tit { margin-top: 2rem; }
.mj-mundo-tit:first-of-type { margin-top: .6rem; }
.mj-mundo-tit[data-mundo-sec="mercado"] .h-seccion-num { color: #52E08C; }
:root[data-tema="dia"] .mj-mundo-tit[data-mundo-sec="mercado"] .h-seccion-num { color: #0B6B3A; }
.mj-mundo-tit[data-mundo-sec="riesgo"] .h-seccion-num { color: #FF9A3C; }
:root[data-tema="dia"] .mj-mundo-tit[data-mundo-sec="riesgo"] .h-seccion-num { color: #A0450B; }
.mp-mundos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- ¿es Poisson? */

.ep-guia { color: var(--crema-2); margin-bottom: .7rem; }
.ep-cintas { display: grid; gap: .55rem; }
.ep-cinta {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: .2rem .6rem;
  width: 100%; padding: .55rem .7rem; text-align: left; cursor: pointer;
  border: 1px solid var(--filete); background: var(--noche-2); color: var(--crema);
  font: inherit; transition: border-color .15s, background .15s, transform .15s;
}
.ep-cinta:hover:not(:disabled) { border-color: var(--oro); background: var(--oro-velo); transform: translateY(-1px); }
.ep-cinta:disabled { cursor: default; }
.ep-letra { font-family: var(--f-display); font-size: 1.4rem; color: var(--oro); text-align: center; }
.ep-svg, .sb-svg { display: block; width: 100%; height: 40px; }
.sb-svg { height: 48px; }
.ep-base { stroke: var(--crema-3); stroke-width: 1; }
.ep-marcas line { stroke: var(--crema); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ep-etq { grid-column: 2; font-family: var(--f-mono); font-size: .78rem; color: var(--crema-3); min-height: 1em; }
.ep-cinta.ep-poisson { border-color: var(--acento); }
.ep-cinta.ep-poisson .ep-etq { color: var(--acento); }
.ep-cinta.ep-poisson .ep-marcas line { stroke: var(--acento); }
.ep-cinta.elegida-mal { border-color: var(--alerta); background: var(--alerta-velo); }
.ep-cinta.elegida-bien { background: var(--acento-velo); }
.ep-pie { margin-top: .9rem; }

/* ---------------------------------------------------------------- más o menos */

.sb-escena { color: var(--crema-2); margin-bottom: .6rem; }
.sb-escena b { color: var(--crema); }
.sb-ventana { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .8rem; margin-bottom: .9rem; padding: .4rem .6rem; border: 1px solid var(--filete); background: var(--noche-2); }
.sb-cursor { stroke: var(--hielo); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.sb-cuenta { font-family: var(--f-mono); color: var(--oro); white-space: nowrap; }

@media (max-width: 760px) {
  .mp-mundos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .po-mundo-t { font-size: 1.35rem; }
}

/* ---------------------------------------------------------------- teléfono: tablas anchas */

/* Una matriz de 5×5 (el inventario) no cabe a 390 px: la tabla se desplaza sola, no la página. */
.ds-mat .ds-tabla { display: block; max-width: 100%; overflow-x: auto; }
/* «Si piden → usa»: columnas fijas, así una fórmula larga pasa a su bloque desplazable (math.js). */
.f-sipiden { table-layout: fixed; width: 100%; }
.f-sipiden td, .f-sipiden th { overflow-wrap: anywhere; }