/* ============================================================
   JUEGO DE LA CERVEZA — estilos propios (se carga después de estilos.css)
   ============================================================ */
:root {
  --cerveza: #d99a1e;
  --cerveza-tint: #fbf0d9;
  --pedido: #5b6fa8;
  --pedido-tint: #e6eaf6;
}

.nav-modulos { display: flex; gap: 0.25rem; }
.nav-modulos a { text-decoration: none; font-size: 0.88rem; padding: 0.35em 0.8em; border-radius: 999px; color: var(--ink-soft); }
.nav-modulos a.activo { background: var(--cerveza-tint); color: #6b4a0c; font-weight: 600; }
.nav-modulos a:hover { background: var(--surface-alt); }

/* ---------- Preparación ---------- */
.intro-cerveza { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.cadena-mini { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; margin: 0.8rem 0 0.4rem; flex-wrap: wrap; }
.cadena-mini .eslabon { text-align: center; font-size: 0.78rem; color: var(--ink-soft); }
.cadena-mini .eslabon span { display: block; font-size: 1.7rem; line-height: 1.2; }
.cadena-mini .flechas { display: flex; flex-direction: column; font-size: 0.7rem; line-height: 1.3; text-align: center; }
.cadena-mini .flechas .f-cerveza { color: var(--cerveza); font-weight: 600; }
.cadena-mini .flechas .f-pedido { color: var(--pedido); font-weight: 600; }
.reglas { margin: 0; padding-left: 1.1em; font-size: 0.9rem; }
.reglas li { margin-bottom: 0.3em; }

.paso-config { margin-top: 1.25rem; }
.paso-config > h3 .num-paso {
  display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--steel); color: #fff; font-size: 0.8rem; margin-right: 0.4em; vertical-align: 2px;
}
.opciones-tarjeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.75rem; }
.opcion {
  position: relative; display: flex; flex-direction: column; gap: 0.25rem; text-align: left;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 0.9rem 1rem; cursor: pointer; font-weight: 400;
}
.opcion:hover { background: var(--surface-alt); border-color: var(--steel); }
.opcion.seleccionada { border-color: var(--steel); background: var(--steel-tint); box-shadow: 0 0 0 2px var(--steel) inset; }
.opcion .ico-opcion { font-size: 1.6rem; line-height: 1.1; }
.opcion strong { font-family: var(--font-display); font-size: 1rem; }
.opcion small { color: var(--ink-soft); font-size: 0.8rem; line-height: 1.4; }
.opcion .marca-rec { position: absolute; top: 0.6rem; right: 0.7rem; }

.avanzadas { margin-top: 1.25rem; }
.avanzadas summary { cursor: pointer; font-weight: 600; color: var(--steel-dark); }
.avanzadas .rejilla-campos { margin-top: 0.9rem; }
.check-linea { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; margin: 0.4rem 0; }
.check-linea input { width: auto; margin-top: 0.3em; }

/* ---------- Barra superior del juego ---------- */
.barra-juego {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-m); padding: 0.7rem 1rem; margin-bottom: 0.75rem;
}
.barra-juego .dato { display: flex; flex-direction: column; }
.barra-juego .dato b { font-family: var(--font-mono); font-size: 1.15rem; }
.barra-juego .dato span { font-size: 0.72rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.barra-juego .controles { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.barra-juego select { width: auto; padding: 0.35em 0.5em; }

.pasos-semana { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0 0 0.6rem; }
.pasos-semana span {
  font-size: 0.78rem; padding: 0.3em 0.7em; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-mute); transition: all 0.2s ease;
}
.pasos-semana span.activo { background: var(--steel); color: #fff; border-color: var(--steel); }
.pasos-semana span.hecho { color: var(--green); border-color: var(--green); background: var(--green-tint); }
.leyenda-pasos { font-size: 0.9rem; color: var(--ink-soft); min-height: 1.5em; margin-bottom: 0.5rem; }

/* ---------- Tablero SVG ---------- */
.tablero-envoltorio {
  background: #f7f6f1; border: 1px solid var(--line); border-radius: var(--radius-m);
  overflow-x: auto; padding: 0.4rem;
}
.tablero-envoltorio svg { display: block; width: 100%; min-width: 900px; height: auto; font-family: var(--font-body); }
.cv-carril { fill: none; stroke: #d6d2c3; stroke-width: 1; stroke-dasharray: 4 4; }
.cv-ranura { fill: #efece2; stroke: #dcd8ca; }
.cv-ranura.pedido { fill: #eceef6; stroke: #d6dbeb; }
.cv-etiqueta-carril { font-size: 12px; fill: #8a8577; }
.cv-etiqueta-carril.pedido { fill: var(--pedido); }
.cv-etiqueta-carril.cerveza { fill: #9a6a0f; }
.cv-carril-activo .cv-ranura { stroke: var(--steel); stroke-width: 1.5; }

.cv-nodo rect.caja { fill: #fff; stroke: #c9c6b8; stroke-width: 1.2; }
.cv-nodo.jugador rect.caja { stroke: var(--steel); stroke-width: 2.5; }
.cv-nodo rect.cabeza { fill: #3d4a44; }
.cv-nodo.jugador rect.cabeza { fill: var(--steel); }
.cv-nodo text.nombre { fill: #fff; font-weight: 600; font-size: 14.5px; }
.cv-nodo text.ico { font-size: 20px; }
.cv-nodo text.rotulo { font-size: 11.5px; fill: #7a857f; text-transform: uppercase; letter-spacing: 0.05em; }
.cv-nodo text.valor { font-family: var(--font-mono); font-size: 30px; font-weight: 600; fill: var(--green); }
.cv-nodo text.valor.debe { fill: var(--rust); }
.cv-nodo text.valor.oculto-num { fill: #b5b2a6; }
.cv-nodo text.dato { font-family: var(--font-mono); font-size: 12.5px; fill: #4a5750; }
.cv-nodo rect.medidor-fondo { fill: #eeede6; }
.cv-nodo rect.medidor-inv { fill: var(--cerveza); transition: width 0.4s ease; }
.cv-nodo rect.medidor-pend { fill: var(--rust); transition: width 0.4s ease; }
.cv-nodo .insignia-tu { fill: var(--cerveza); }
.cv-nodo text.tu { font-size: 10px; font-weight: 700; fill: #3b2a05; }
.cv-nodo.pulso rect.caja { animation: cvPulso 0.8s ease; }
@keyframes cvPulso { 0% { stroke: var(--cerveza); stroke-width: 4; } 100% { } }

.cv-token { transition: transform var(--cv-dur, 700ms) ease-in-out, opacity var(--cv-dur, 700ms) ease; }
.cv-token rect.caja-envio { fill: var(--cerveza); stroke: #a8740f; }
.cv-token rect.caja-envio.vacio { fill: #efe3c6; stroke: #d8c79c; }
.cv-token rect.caja-prod { fill: #c9b27c; stroke: #9a8448; }
.cv-token rect.hoja { fill: #fff; stroke: var(--pedido); }
.cv-token text.cant { font-family: var(--font-mono); font-weight: 600; font-size: 16px; text-anchor: middle; dominant-baseline: central; }
.cv-token text.cant.env { fill: #3b2a05; }
.cv-token text.cant.ped { fill: var(--pedido); }
.cv-token text.mini { font-size: 10px; text-anchor: middle; }
.sin-animacion .cv-token { transition: none !important; }

.cv-flotante { font-family: var(--font-mono); font-weight: 700; font-size: 14px; text-anchor: middle; pointer-events: none;
  animation: cvSube 1.4s ease-out forwards; }
.cv-flotante.mas { fill: var(--green); }
.cv-flotante.menos { fill: #9a6a0f; }
.cv-flotante.alerta { fill: var(--rust); }
@keyframes cvSube { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }

.leyenda-tablero { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.78rem; color: var(--ink-soft); margin: 0.5rem 0 0; }
.leyenda-tablero i { display: inline-block; width: 14px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 0.3em; }
.leyenda-tablero .l-cerveza { background: var(--cerveza); }
.leyenda-tablero .l-pedido { background: #fff; border: 1.5px solid var(--pedido); }
.leyenda-tablero .l-prod { background: #c9b27c; }
.leyenda-tablero .l-inv { background: var(--cerveza); height: 6px; }
.leyenda-tablero .l-pend { background: var(--rust); height: 6px; }

/* ---------- Panel de decisión ---------- */
.zona-decision.bloqueada { opacity: 0.55; transition: opacity 0.2s; }
.zona-decision { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 0.8rem; margin-top: 1rem; }
.tarjeta-decision { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--steel); border-radius: var(--radius-m); padding: 0.9rem 1rem; }
.tarjeta-decision h3 { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.hechos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.8rem; margin-bottom: 0.8rem; }
.hecho { font-size: 0.8rem; color: var(--ink-soft); display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px dashed var(--line-soft); padding-bottom: 0.2rem; }
.hecho b { font-family: var(--font-mono); color: var(--ink); font-size: 0.95rem; }
.hecho.ancho { grid-column: 1 / -1; }
.hecho.malo b { color: var(--rust); }
.hecho.bueno b { color: var(--green); }
.hecho.tuberia b { color: var(--pedido); }
.entrada-pedido { display: flex; align-items: center; gap: 0.4rem; }
.entrada-pedido label { font-weight: 600; font-size: 0.9rem; margin-right: auto; }
.entrada-pedido input { width: 84px; text-align: center; font-family: var(--font-mono); font-size: 1.2rem; font-weight: 600; padding: 0.3em; }
.entrada-pedido button { padding: 0.3em 0.75em; font-size: 1.05rem; }
.atajos { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.5rem; }
.atajos button { font-size: 0.75rem; padding: 0.25em 0.6em; }
.sugerencia { margin-top: 0.6rem; font-size: 0.8rem; background: var(--cerveza-tint); border-left: 3px solid var(--cerveza); padding: 0.5em 0.7em; border-radius: var(--radius-s); }
.boton-avanzar { margin-top: 1rem; display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.boton-avanzar button { font-size: 1.05rem; padding: 0.7em 1.6em; }
.esperando { font-size: 0.85rem; color: var(--ink-mute); }

/* ---------- Registro ---------- */
details.registro { margin-top: 1rem; }
details.registro summary, details.grafico-vivo summary { cursor: pointer; font-weight: 600; color: var(--steel-dark); padding: 0.4rem 0; }
.tabla-registro { max-height: 300px; overflow-y: auto; }

/* ---------- Estilo de decisión ---------- */
.estilo-param { display: grid; grid-template-columns: 7.5em 1fr 3.2em; gap: 0.6rem; align-items: center; font-size: 0.85rem; margin-bottom: 0.5rem; }
.estilo-param .barra { height: 10px; background: var(--line-soft); border-radius: 5px; position: relative; overflow: hidden; }
.estilo-param .barra i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--steel); border-radius: 5px; }
.estilo-param .barra b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--cerveza); }
.estilo-param .num { font-family: var(--font-mono); text-align: right; }
.estilo-nota { font-size: 0.78rem; color: var(--ink-mute); }

/* ---------- Laboratorio ---------- */
.presets { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.presets button { font-size: 0.85rem; }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.9rem; }
.interruptor:last-child { border-bottom: none; }
.interruptor select { width: auto; }
.interruptor input[type=checkbox] { width: 1.2em; height: 1.2em; }
.interruptor small { display: block; color: var(--ink-mute); font-size: 0.76rem; }
.delta-bueno { color: var(--green); font-weight: 600; }
.delta-malo { color: var(--rust); font-weight: 600; }

@media (max-width: 900px) {
  .intro-cerveza { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .barra-juego .controles { margin-left: 0; }
  .hechos { grid-template-columns: 1fr; }
  .cabecera-app { flex-wrap: wrap; }
  .nav-modulos { order: 3; width: 100%; justify-content: center; }
  .nav-modulos a { padding: 0.3em 0.6em; font-size: 0.82rem; }
}