/* ==========================================================================
   RED HIDRÁULICA — hoja de estilos (versión clicker)
   Paleta de sala de control: el color codifica estado, no decora.
   ========================================================================== */

:root{
  --fondo:#060f18; --panel:#0f1c28; --panel-alto:#152535;
  --linea:#203547; --linea-viva:#2f5170;
  --texto:#cfdce8; --tenue:#6f8aa1; --apagado:#4d657c;
  --dinero:#a3e635; --agua:#38bdf8; --ok:#4ade80;
  --alarma:#f5a524; --critico:#ef4444;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow:hidden;}
body{
  background:var(--fondo); color:var(--texto);
  font-family:var(--sans); font-size:13px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* En tacto, el clic rápido es EL juego: sin esto, dos toques seguidos al
     pueblo eran un doble-tap de zoom del navegador y un resalte azul. */
  -webkit-tap-highlight-color:transparent;
}
button{touch-action:manipulation;}

/* 100dvh y no 100vh: en el móvil, la barra del navegador aparece y desaparece,
   y con vh el borde de abajo (las solapas) quedaba escondido tras ella. */
.app{display:flex; flex-direction:column; height:100vh; height:100dvh;}

/* ---------- BARRA SUPERIOR ---------- */
.superior{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:9px 16px; background:var(--panel);
  border-bottom:1px solid var(--linea-viva); flex:none;
}
.marca-titulo{
  display:block; font-family:var(--mono); font-size:14px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  background:linear-gradient(90deg,#2dd4bf,#38bdf8,#a78bfa);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.marca-sub{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--apagado);
}

.hud{display:flex; gap:1px; background:var(--linea); flex:1;
     border:1px solid var(--linea); min-width:300px;}
.hud-item{background:var(--panel-alto); padding:5px 12px; flex:1; min-width:96px;}
/* El GUIÑO de estreno: lo que acaba de nacer (una métrica del HUD, una
   solapa, un panel) se enciende un momento y vuelve solo a su color — la
   animación solo trae el fotograma inicial. Una vez y sin latido: nace,
   saluda y a trabajar. */
@keyframes estreno{from{background-color:rgba(56,189,248,0.55);}}
.hud-item.estreno, .solapa.estreno, .bloque.estreno{animation:estreno 1.6s ease-out;}
.hud-item .e{display:block; font-family:var(--mono); font-size:8px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--apagado);}
.hud-item .v{font-family:var(--mono); font-size:15px; font-weight:600;}
.v.dinero{color:var(--dinero);} .v.agua{color:var(--agua);}
.v.ok{color:var(--ok);} .v.alarma{color:var(--alarma);}
.v.critico{color:var(--critico);} .v.neutro{color:var(--texto);}

.acciones{display:flex; gap:6px; position:relative;}
/* EL ENGRANAJE: las opciones caben en un botón, como en cualquier juego.
   El menú es un desplegable anclado a la esquina; los botones de dentro son
   los de siempre, en columna y a lo ancho. */
#btn-ajustes{font-size:15px; line-height:1; padding:5px 12px;}
.ajustes-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:60;
  display:flex; flex-direction:column; gap:6px; min-width:170px;
  background:var(--panel); border:1px solid var(--linea-viva);
  border-radius:5px; padding:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
}
.ajustes-menu[hidden]{display:none;}
.ajustes-menu button{width:100%; text-align:left;}
.acciones button{
  background:none; border:1px solid var(--linea-viva); color:var(--tenue);
  padding:6px 11px; border-radius:3px; cursor:pointer;
  font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; transition:.15s;
}
.acciones button:hover{border-color:var(--critico); color:var(--critico);}
.acciones button:focus-visible{outline:2px solid var(--agua); outline-offset:2px;}

/* ---------- CUERPO ---------- */
.cuerpo{display:flex; flex:1; min-height:0;}
.lateral{
  width:290px; flex:none; overflow-y:auto; padding:11px;
  background:var(--fondo); display:flex; flex-direction:column; gap:11px;
}
.derecha{border-left:1px solid var(--linea);}

.mapa{flex:1; position:relative; min-width:0; display:flex; flex-direction:column;
      background:#040a10;}
.lienzo-caja{position:relative; flex:1; min-height:0;}

/* ---------- PESTAÑAS DE PUEBLOS ---------- */
/* La BARRA DEL MAPA: las alertas a la izquierda y el engranaje a la derecha,
   en una sola línea — así la cabecera queda solo para la marca y el HUD. */
.barra-mapa{display:flex; align-items:flex-start; background:#040a10; flex:none;}
.barra-mapa .acciones{padding:5px 8px 0;}
.pestanas{display:flex; flex-wrap:wrap; gap:2px; padding:6px 8px 0; flex:1; min-width:0;}
.pestana{
  cursor:pointer; font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.06em; padding:7px 14px; color:var(--tenue);
  background:var(--panel); border:1px solid var(--linea);
  border-bottom:none; border-radius:5px 5px 0 0; transition:.15s;
}
.pestana:hover{color:var(--texto); background:var(--panel-alto);}
.pestana.activa{color:var(--agua); background:var(--panel-alto);
  border-color:var(--linea-viva); box-shadow:inset 0 2px 0 var(--agua);}
.pestana.con-averia{color:var(--critico); border-color:var(--critico);}
/* Los CHIPS DE ALERTA de la barra: sed y averías, en rojo y a un toque del
   problema. Solo existen mientras el problema existe. */
.pestana.chip-alerta{
  color:var(--critico); border-color:var(--critico);
  background:rgba(240,90,74,0.08); white-space:nowrap;
}
.pestana.chip-alerta:hover{background:rgba(240,90,74,0.18);}
.pestana.bloqueada{color:var(--apagado); background:transparent;
  border-style:dashed; cursor:default;}
.pestana:focus-visible{outline:2px solid var(--agua); outline-offset:2px;}
/* touch-action:none = los gestos del lienzo son NUESTROS (arrastrar, pellizcar);
   sin esto el navegador se queda el movimiento para hacer scroll y corta el
   arrastre a mitad con un pointercancel. */
#escena{display:block; width:100%; height:100%; cursor:pointer; touch-action:none;}


/* ---------- SOLAPAS DEL LATERAL ----------
   Doce bloques apilados obligaban a bajar media pantalla para llegar al
   registro. Lo contextual (guía, avería, casilla, hallazgo) sigue arriba porque
   aparece solo cuando toca; el resto se reparte en tres solapas. */
.solapas{display:flex; gap:2px; flex:none;}
.solapa{
  flex:1; cursor:pointer; padding:8px 4px;
  background:var(--panel); border:1px solid var(--linea); border-bottom:none;
  border-radius:4px 4px 0 0; color:var(--tenue);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; transition:.15s;
}
.solapa:hover{color:var(--texto); background:var(--panel-alto);}
.solapa.activa{
  color:var(--agua); background:var(--panel-alto);
  border-color:var(--linea-viva); box-shadow:inset 0 2px 0 var(--agua);
}
.solapa:focus-visible{outline:2px solid var(--agua); outline-offset:2px;}
.hoja{display:flex; flex-direction:column; gap:11px;}
.hoja[hidden]{display:none;}

/* La tarjeta de ELECCIÓN (avería: jugar o llave): compacta, sin imagen,
   con las dos salidas a la vista. El botón secundario va apagado — la
   llave es el camino de siempre, no el premio. */
.eleccion{max-width:420px;}
.eleccion-botones{display:flex; gap:8px; margin-top:12px;}
.eleccion-botones .hito-btn{flex:1; margin-top:0;}
.hito-btn.eleccion-secundario{
  background:none; border:1px solid var(--linea-viva); color:var(--tenue);
}
.hito-btn.eleccion-secundario:hover{border-color:var(--critico); color:var(--critico);}

/* ---------- FICHA DIVULGATIVA DE UNA PIEZA ----------
   Va con otro aire que el resto de la interfaz —más texto, más aire entre
   líneas— porque no es un panel de juego: es lo que el jugador se lleva
   aprendido. Que se distinga de un vistazo es parte del asunto. */
.ficha{
  margin-top:8px; padding:9px 10px; border-radius:4px;
  border-left:3px solid var(--tono);
  background:rgba(255,255,255,.025);
}
/* Plegada por defecto en la pieza construida: una línea que invita, no un
   panel que empuja. El triángulo nativo de <summary> ya dice que se abre. */
.ficha-resumen{
  cursor:pointer; font-family:var(--mono); font-size:9px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tono);
}
.ficha[open] .ficha-resumen{margin-bottom:8px;}
.ficha-resumen:hover{filter:brightness(1.25);}
/* El libro del oficio: las páginas por conocer, en penumbra — que se vea
   cuánto queda por aprender es el coleccionismo. */
#libro .libro-cerrada{opacity:.5;}
#libro .ficha{margin:4px 0;}
.ficha-dib{
  display:block; width:100%; height:auto; border-radius:4px;
  border:1px solid var(--linea-viva); margin-bottom:9px; background:#0d1a26;
}
.ficha-tit{
  font-family:var(--mono); font-size:8.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tono);
  margin-top:7px;
}
.ficha-tit:first-child{margin-top:0;}
.ficha-txt{font-size:11px; line-height:1.55; color:var(--texto); margin-top:2px;}
.ficha-dato-tit{color:var(--alarma);}
.ficha-dato{color:var(--tenue); font-style:italic;}

/* ---------- FICHA DE LA CASILLA ---------- */
.casilla-cab{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
#casilla-lienzo{
  width:64px; height:64px; flex:none; border-radius:6px;
  border:1px solid var(--linea-viva); background:#0a141d;
}
.casilla-nom{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--tono);}
.casilla-fam{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tenue);
}
.casilla-datos{display:grid; gap:3px; margin-bottom:8px;}
.casilla-fila{
  display:flex; justify-content:space-between; gap:8px;
  font-size:11px; color:var(--tenue);
  border-bottom:1px dotted var(--linea); padding-bottom:2px;
}
.casilla-fila b{font-family:var(--mono); color:var(--texto);}
.casilla-cabe{font-size:10.5px; line-height:1.45; color:var(--tenue);}
.casilla-cabe b{color:var(--ok);}

/* El subsuelo: lo que se sabe del agua que no se ve. Va con su propio borde
   izquierdo porque no es un dato del terreno, es otra capa del mismo sitio. */
.subsuelo{
  border-left:2px solid var(--tono, #38bdf8); padding:6px 0 2px 8px;
  margin:2px 0 9px; background:rgba(56,189,248,0.04);
}
.subsuelo-cab{
  font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--tono, #38bdf8); margin-bottom:4px;
}
.subsuelo.seco, .subsuelo.esteril{
  --tono:#8b8578; background:rgba(139,133,120,0.05);
}
.subsuelo .mejora{margin-top:7px;}
/* El desglose de producción: números con su porqué al lado */
.diagnostico{display:grid; gap:3px;}
.diag-nota{
  display:block; font-style:normal; font-size:9.5px; color:var(--tenue);
}
.diag-nota.mala{color:#f0a04a;}
.diag-nota.buena{color:var(--ok);}
.diag-perdida{color:#f0a04a;}
.diag-total{border-top:1px solid var(--linea-viva); padding-top:4px; margin-top:2px;}
.diag-total b{color:var(--ok);}

/* "Por aquí pasa una línea": la casilla compartida enseña las dos cosas */
.linea-aqui{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border-left:2px solid var(--tono, #38bdf8); padding:5px 0 5px 8px;
  margin:2px 0 7px; font-size:10.5px; color:var(--tenue);
}
.linea-aqui b{color:var(--texto);}
.linea-aqui-btn{
  flex:none; background:none; border:1px solid var(--linea-viva);
  color:var(--tenue); padding:4px 8px; border-radius:3px; cursor:pointer;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.06em;
}
.linea-aqui-btn:hover{border-color:var(--tono, #38bdf8); color:var(--texto);}

/* El nivel del acuífero: lo único que se ve de un depósito que está bajo tierra */
.nivel-acuifero{display:flex; align-items:center; gap:7px; margin:6px 0 7px;}
.nivel-barra{
  flex:1; height:7px; background:rgba(0,0,0,0.35);
  border:1px solid var(--linea); overflow:hidden;
}
.nivel-barra i{display:block; height:100%; transition:width .4s;}
.nivel-acuifero span{font-family:var(--mono); font-size:10px; color:var(--tenue);}

/* ---------- BLOQUES DE PANEL ---------- */
.bloque{border:1px solid var(--linea); background:var(--panel);}
/* LA CARTA DEL TAJO: el "¿y ahora qué?" contestado. Con el borde encendido
   porque es LA tarjeta — pero sin latido: está siempre, no puede cansar. */
.bloque.tajo{border-color:rgba(56,189,248,0.45);}
.tajo-cab{display:flex; align-items:center; gap:9px; margin-bottom:6px;}
.tajo-cara{
  width:30px; height:30px; border-radius:50%; object-fit:cover; flex:none;
  border:1px solid var(--linea-viva);
}
.tajo-eti{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.16em;
  text-transform:uppercase; color:#67c6ee;
}
.tajo-tit{font-weight:600; font-size:13.5px; margin:1px 0 0;}
.tajo-txt{font-size:11.5px; line-height:1.5; color:var(--tenue); margin:0 0 4px;}
.tajo-btn{
  display:block; width:100%; margin-top:7px; padding:7px 10px; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:#dff2fc; text-align:center;
  background:rgba(56,189,248,0.14); border:1px solid rgba(56,189,248,0.5);
  border-radius:4px;
}
.tajo-btn:hover{background:rgba(56,189,248,0.26);}
.bloque h2{
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--tenue); padding:7px 11px;
  border-bottom:1px solid var(--linea); background:var(--panel-alto);
}
.bloque > div{padding:9px 11px;}

/* ---------- TIENDA / MEJORAS ---------- */
.tienda{display:grid; gap:7px;}
.mejora{
  display:grid; gap:3px; text-align:left; cursor:pointer;
  background:var(--panel-alto); border:1px solid var(--linea-viva);
  border-left:3px solid var(--agua); border-radius:3px;
  padding:9px 10px; color:var(--texto); font-family:inherit; transition:.15s;
}
.mejora:hover:not(:disabled){background:rgba(56,189,248,.12); border-color:var(--agua);}
.mejora:focus-visible{outline:2px solid var(--agua); outline-offset:2px;}
.mejora.inalcanzable{opacity:.55;}
.mejora.comprada{border-left-color:var(--ok); opacity:.8; cursor:default;}
.m-cab{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.m-nom{font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--agua);}
.mejora.comprada .m-nom{color:var(--ok);}
.m-nivel{font-family:var(--mono); font-size:9px; font-weight:600;
  color:var(--dinero); letter-spacing:.06em; white-space:nowrap;}
.m-desc{font-size:10.5px; color:var(--tenue); line-height:1.4;}
.m-coste{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--dinero);}
.mejora.comprada .m-coste{color:var(--ok);}
.mejora.inalcanzable .m-coste{color:var(--critico);}

/* ---------- LA TIENDA AGRUPADA POR SERVICIO ---------- */
.servicio{
  display:grid; gap:7px; padding:9px; border-radius:4px;
  border:1px solid var(--linea); border-left:3px solid var(--tono);
  background:rgba(255,255,255,.015);
}
.servicio.dormido{opacity:.5;}
.sv-cab{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.sv-nom{
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tono);
}
.sv-estado{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--tenue);
}
.sv-desc{font-size:10.5px; line-height:1.45; color:var(--tenue);}

.vaso{
  height:10px; border-radius:5px; overflow:hidden;
  background:rgba(8,18,28,.8); border:1px solid var(--linea-viva);
}
.vaso i{
  display:block; height:100%;
  background:linear-gradient(90deg,#6b5b3e,#a8896a);
  transition:width .3s linear;
}

/* ---------- LA RED: DIÁMETROS ---------- */
.red-tabs{display:flex; flex-wrap:wrap; gap:5px;}
.red-tabs .red-tab{flex:1 1 30%;}
.red-tab{
  cursor:pointer; padding:7px 6px; border-radius:4px;
  background:rgba(255,255,255,.02); border:1px solid var(--linea-viva);
  color:var(--tenue); font-family:var(--mono); font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; transition:.15s;
}
.red-tab:hover{border-color:var(--tono); color:var(--texto);}
.red-tab.activa{
  border-color:var(--tono); color:var(--tono);
  background:color-mix(in srgb, var(--tono) 14%, transparent);
}
.red-cuello{
  font-size:11.5px; line-height:1.5; color:var(--texto);
  border-left:3px solid var(--tono); padding-left:8px;
}
.red-cuello b{font-family:var(--mono); color:var(--tono);}
.red-cuello i{color:var(--tenue); font-style:normal; font-size:10.5px;}
.red-aviso{
  font-size:11px; line-height:1.5; color:var(--aviso, #fbbf24);
  background:rgba(251,191,36,.07); border:1px solid rgba(251,191,36,.28);
  border-radius:4px; padding:7px 9px;
}
.dn-selector{display:grid; grid-template-columns:repeat(3,1fr); gap:5px;}
.dn{
  display:grid; gap:2px; text-align:left; cursor:pointer; padding:7px;
  background:rgba(255,255,255,.02); border:1px solid var(--linea-viva);
  border-radius:4px; color:var(--texto); transition:.15s;
}
.dn:hover{border-color:var(--tono);}
.dn.activa{border-color:var(--tono); background:color-mix(in srgb, var(--tono) 12%, transparent);}
.dn b{font-family:var(--mono); font-size:11px; color:var(--tono);}
.dn em{font-style:normal; font-size:9.5px; color:var(--texto);}
.dn i{font-style:normal; font-size:9px; color:var(--tenue); line-height:1.35;}
.mejora.linea.hecha{opacity:.45;}

/* El ritmo de la caja: letra pequeña bajo el saldo, verde o rojo */
.hud-ritmo{display:block; font-family:var(--mono); font-size:9px; font-weight:600;}
.hud-ritmo.ok{color:#7ee2a8;}
.hud-ritmo.critico{color:#f77c7c;}

/* ---------- LA GUÍA FLOTANTE ----------
   Un bocadillo sobre el mapa con la cara del guía al lado: en la barra
   lateral no la veía nadie, y una guía que no se ve no guía. */
/* ARRIBA a la izquierda, no abajo: la cámara centra el pueblo en el lienzo
   y el bocadillo abajo-izquierda acababa PISÁNDOLO — dos probadores fríos
   clicaron el bocadillo creyendo clicar su pueblo, justo en el paso que
   enseña a clicarlo. Y pointer-events:none en el contenedor: solo el
   bocadillo y la cara bloquean clics, no su caja invisible. */
.guia-flotante{
  position:absolute; left:12px; top:14px; z-index:6;
  display:flex; align-items:flex-start; gap:9px;
  max-width:min(300px, calc(100% - 24px));
  pointer-events:none;
}
.guia-flotante .guia-avatar, .guia-flotante .guia-bocadillo{pointer-events:auto;}
/* EL ESQUIVE: si el bocadillo pisa el núcleo del pueblo (ventana estrecha),
   salta al lado derecho. Lo decide ui.esquivarPueblo cada ciclo. */
.guia-flotante.esquiva{left:auto; right:12px; flex-direction:row-reverse;}
.guia-flotante.esquiva .guia-bocadillo::after{display:none;}
.guia-avatar{
  flex:none; width:58px; height:58px; border-radius:50%; cursor:pointer;
  border:2px solid var(--ok); background:var(--panel); padding:0;
  overflow:hidden; position:relative;
  box-shadow:0 4px 14px rgba(0,0,0,0.45), 0 0 18px -8px var(--ok);
}
.guia-avatar img{width:100%; height:100%; object-fit:cover; display:block;}

/* LA VIDA DE MANUEL, por código: sin fotogramas generados (los generadores no
   mantienen la identidad entre frames) — tres animaciones y la cara quieta.
   El orden importa: hablar y el respingo pisan a la respiración. */
.guia-avatar{animation:guia-respira 3.4s ease-in-out infinite;}
@keyframes guia-respira{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(-2.5px);}
}
/* Mientras suena su voz, botecitos al ritmo: el "está hablando" universal */
.guia-avatar.hablando{animation:guia-habla .36s ease-in-out infinite;}
@keyframes guia-habla{
  0%, 100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-2px) scale(1.045);}
}
/* El respingo: algo nuevo que decir, o cambio de cara */
.guia-avatar.respingo{animation:guia-respingo .5s ease-out;}
@keyframes guia-respingo{
  0%{transform:scale(1);}
  30%{transform:scale(1.16) rotate(-5deg);}
  60%{transform:scale(0.95) rotate(3deg);}
  100%{transform:scale(1);}
}
/* Sin retrato aún, el interrogante sostiene el sitio */
.guia-avatar-reserva{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:19px; font-weight:700; color:var(--ok);
}
.guia-avatar img:not([hidden]) + .guia-avatar-reserva{display:none;}

.guia-bocadillo{
  position:relative; background:var(--panel);
  border:1px solid var(--ok); border-radius:10px; border-bottom-left-radius:2px;
  padding:9px 12px 10px; display:grid; gap:5px;
  box-shadow:0 8px 26px rgba(0,0,0,0.5), 0 0 26px -14px var(--ok);
  animation:guia-pop .3s ease-out;
}
/* El rabito del bocadillo, apuntando al guía (ahora arriba a la izquierda) */
.guia-bocadillo::after{
  content:''; position:absolute; left:-7px; top:16px;
  width:12px; height:12px; background:var(--panel);
  border-left:1px solid var(--ok); border-bottom:1px solid var(--ok);
  transform:rotate(45deg);
}
@keyframes guia-pop{
  0%{transform:scale(0.85) translateY(8px); opacity:0;}
  100%{transform:scale(1) translateY(0); opacity:1;}
}
.guia-cab{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--tenue);
}
.guia-nombre{color:var(--ok); font-weight:700;}
.guia-plegar{
  background:none; border:none; color:var(--tenue); cursor:pointer;
  font-size:14px; line-height:1; padding:0 2px;
}
.guia-plegar:hover{color:var(--texto);}
#guia-cuenta{font-size:8.5px; color:var(--ok); letter-spacing:.1em;}
.guia-titulo{font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--ok);}
.guia-texto{font-size:11.5px; color:var(--texto); line-height:1.5;}
.guia-saltar{
  justify-self:start; margin-top:2px; cursor:pointer;
  background:none; border:1px solid var(--linea-viva); border-radius:3px;
  color:var(--tenue); font-family:var(--mono); font-size:8.5px;
  letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; transition:.15s;
}
.guia-saltar:hover{border-color:var(--tenue); color:var(--texto);}
/* Plegada: queda solo la cara, y el juego entero a la vista */
.guia-flotante.plegada .guia-bocadillo{display:none;}

/* Herramientas de construcción sobre el mapa */
.mejora.obra{border-left-color:var(--tono);}
.mejora.obra .m-nom{color:var(--tono);}
.mejora.obra:hover{background:color-mix(in srgb,var(--tono) 14%,var(--panel-alto));}
.mejora.obra.activa{
  background:color-mix(in srgb,var(--tono) 26%,var(--panel-alto));
  border-color:var(--tono); box-shadow:0 0 16px -6px var(--tono);
}
.mejora.obra.activa .m-coste::after{content:'  · ESC para salir'; color:var(--tenue);}

/* ---------- FUNCIÓN ESPECIAL (auto-bombeo premium) ---------- */
.premium{
  display:grid; gap:5px; width:100%; text-align:left; cursor:pointer;
  background:linear-gradient(150deg, rgba(192,132,252,.16), rgba(56,189,248,.06));
  border:1px solid var(--premium); border-radius:4px;
  padding:10px 11px; color:var(--texto); font-family:inherit; transition:.15s;
  box-shadow:0 0 20px -10px var(--premium);
}
.premium.lista{animation:latirPremium 1.8s ease-in-out infinite;}
.premium.bloqueada{opacity:.75; cursor:default; box-shadow:none;}
.premium.activa{border-color:var(--ok); background:rgba(74,222,128,.10); cursor:default;}
.premium:focus-visible{outline:2px solid var(--premium); outline-offset:2px;}
@keyframes latirPremium{
  0%,100%{box-shadow:0 0 20px -10px var(--premium);}
  50%{box-shadow:0 0 26px -6px var(--premium);}
}
.p-cab{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.p-nom{font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--premium);}
.premium.activa .p-nom{color:var(--ok);}
.p-etq{font-family:var(--mono); font-size:8px; font-weight:600; letter-spacing:.14em;
  padding:2px 6px; border-radius:10px; border:1px solid currentColor; color:var(--premium);}
.premium.bloqueada .p-etq{color:var(--tenue);}
.premium.activa .p-etq{color:var(--ok);}
.p-desc{font-size:10.5px; color:var(--tenue); line-height:1.4;}
.p-reqs{display:grid; gap:2px; margin:2px 0;}
.p-req{font-family:var(--mono); font-size:10px; color:var(--tenue);}
.p-req.ok{color:var(--ok);}
.p-coste{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--dinero);}
.premium.activa .p-coste{color:var(--ok);}
.premium.bloqueada .p-coste{color:var(--tenue);}

/* ---------- AVERÍAS ---------- */
#panel-averias h2{color:var(--critico); border-color:var(--critico);}
.averias{display:grid; gap:8px;}
.averia-estado{font-size:11.5px; color:var(--alarma); line-height:1.4;}
.btn-reparar{
  width:100%; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(239,68,68,.14); border:1px solid var(--critico);
  border-radius:3px; padding:9px 11px; color:var(--critico);
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; text-align:left; transition:.15s;
  animation:latirAveria 1.6s ease-in-out infinite;
}
.btn-reparar:hover{background:rgba(239,68,68,.26);}
.btn-reparar:focus-visible{outline:2px solid var(--critico); outline-offset:2px;}
.btn-reparar b{font-size:11.5px;}
@keyframes latirAveria{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
  50%{box-shadow:0 0 18px -4px rgba(239,68,68,.75);}
}

/* ---------- CAUCE (común) ---------- */
#panel-cauce h2{color:var(--ok);}
.cauce{display:grid; gap:8px;}
.cauce-cab{display:flex; align-items:baseline; justify-content:space-between;}
.cauce-cab .v{font-family:var(--mono); font-size:14px; font-weight:600;}
.cauce-multa{font-size:10.5px; color:var(--tenue);}
.cauce-multa b{font-family:var(--mono); color:var(--alarma);}
.barra-cauce-fondo{
  height:9px; background:rgba(8,18,28,.8); border:1px solid var(--linea-viva);
  border-radius:5px; overflow:hidden;
}
.barra-cauce-relleno{height:100%; width:0%; transition:width .15s linear, background .3s;}
.barra-cauce-relleno.ok{background:linear-gradient(90deg,#0e5a86,#38bdf8);}
.barra-cauce-relleno.alarma{background:linear-gradient(90deg,#a3781f,#f5a524);}
.barra-cauce-relleno.critico{background:linear-gradient(90deg,#7a2f2f,#ef4444);}
.btn-limpiar{
  width:100%; cursor:pointer; display:flex; flex-direction:column; gap:1px;
  align-items:center; background:rgba(52,211,153,.12); border:1px solid var(--ok);
  border-radius:3px; padding:8px 10px; color:var(--ok); font-family:var(--mono);
  transition:transform .05s, background .15s;
}
.btn-limpiar span{font-size:11px; font-weight:700; letter-spacing:.1em;}
.btn-limpiar em{font-style:normal; font-size:9.5px; color:var(--tenue);}
.btn-limpiar:hover{background:rgba(52,211,153,.24);}
.btn-limpiar:active{transform:scale(.98);}
.btn-limpiar:focus-visible{outline:2px solid var(--ok); outline-offset:2px;}

/* ---------- DETALLE POBLACIÓN ---------- */
.detalle{display:grid; gap:5px;}
.d-fila{display:flex; justify-content:space-between; gap:10px;
  font-size:11.5px; padding:3px 0; border-bottom:1px solid var(--linea);}
.d-fila span{color:var(--tenue);}
.d-fila b{font-family:var(--mono); font-weight:600;}
.d-fila b.ok{color:var(--ok);} .d-fila b.alarma{color:var(--alarma);}
.d-fila b.critico{color:var(--critico);}

/* ---------- REGISTRO ---------- */
.registro{display:grid; gap:4px;}
.reg{font-size:11px; padding:5px 8px; border-left:3px solid var(--linea-viva);
  line-height:1.4; color:var(--texto); background:var(--panel-alto);}
.reg em{font-style:normal; color:var(--apagado); font-family:var(--mono);
  font-size:9px; margin-right:4px;}
.reg.ok{border-color:var(--ok);} .reg.alarma{border-color:var(--alarma);}
.reg.critico{border-color:var(--critico);}
.reg.vacio{color:var(--apagado); font-style:italic; background:none; border:none;}

/* ---------- EXPLICACIÓN ---------- */
.explica{font-size:11.5px; color:var(--tenue); line-height:1.55; display:grid; gap:7px;}
.explica b{color:var(--agua); font-weight:600;}

/* ---------- AVISO FLOTANTE SOBRE LA ESCENA ---------- */
.aviso-flotante{
  position:absolute; left:50%; top:22px; transform:translateX(-50%) translateY(-14px);
  background:rgba(15,28,40,.97); border:1px solid var(--alarma);
  border-left:4px solid var(--alarma); color:var(--alarma);
  padding:10px 16px; border-radius:3px; font-size:12.5px; font-weight:500;
  pointer-events:none; opacity:0; transition:opacity .2s, transform .2s;
  box-shadow:0 8px 32px -10px rgba(0,0,0,.9); max-width:min(460px,80%); z-index:10;
}
.aviso-flotante.visible{opacity:1; transform:translateX(-50%) translateY(0);}

/* EL ESCAPE DEL DEDO: cancela la herramienta armada. Flotando abajo del
   mapa, gordo para el pulgar, y solo existe con un modo activo. */
.cancelar-modo{
  position:absolute; bottom:52px; left:50%; transform:translateX(-50%);
  z-index:11; cursor:pointer;
  background:rgba(15,28,40,0.95); color:#f2c9c2;
  border:1px solid var(--critico); border-radius:20px;
  padding:10px 20px; font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.08em; box-shadow:0 6px 20px rgba(0,0,0,0.5);
}
.cancelar-modo:hover{background:rgba(40,20,20,0.95);}
.cancelar-modo[hidden]{display:none;}

/* ---------- PANTALLA MEDIANA (portátil, y el marco de itch.io) ----------
   La barra de arriba en UNA fila necesita ~1360px: la marca (175) + los ocho
   números (8 × 96 = 768) + los botones (~346) + huecos. Por debajo de eso los
   números NO caben... y no se envolvían solos, porque `.hud` es un flex sin
   wrap cuyos hijos tienen ancho mínimo: se DESBORDABAN por la derecha y los
   botones acababan pintados encima de Servicio, Cauce y Expansión.

   Se detectó jugando en el marco de itch.io, que mide 960 de ancho — justo en
   la franja que quedaba sin cubrir entre este corte y el de 900px. Ojo al
   tocar los botones de la barra: si añades uno, este número sube. */
@media(max-width:1400px){
  .hud{
    order:3; flex:1 1 100%; min-width:0;
    /* auto-fit y no un 8 fijo: con el HUD progresivo el número de métricas
       visibles cambia con la partida, y las escondidas no deben dejar hueco */
    display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
  }
  .hud-item{min-width:0;}
  .hud-item .v{white-space:nowrap;}
}

/* ---------- MÓVIL ---------- */
/* ---------- PANTALLA ESTRECHA (tablet en vertical, móvil grande) ---------- */
@media(max-width:900px){
  .cuerpo{flex-direction:column;}
  .lateral{width:100%; max-height:42vh; border:none; border-top:1px solid var(--linea);}
  .mapa{min-height:44vh;}
  /* Con menos de 900px los ocho números ya no caben ni ocupando la fila
     entera: se parten en dos filas de cuatro. (El corte de 1400px ya los bajó
     a su propia fila; aquí solo se pasa de ocho columnas a cuatro.) */
  .superior{gap:6px 10px;}
  .hud{grid-template-columns:repeat(auto-fit, minmax(23%, 1fr));}
}

/* ---------- MÓVIL ----------
   Lo que manda aquí: el MAPA es el juego y se queda con la pantalla; los
   números del HUD caben TODOS (antes se cortaban cuatro de ocho por la
   derecha, y entre ellos Servicio, que es el que dice si vas bien); y todo
   lo que se toca con el dedo crece hasta ser tocable. */
@media(max-width:640px){
  .superior{
    gap:6px 10px; padding:5px 8px 6px;
    padding-left:calc(8px + env(safe-area-inset-left));
    padding-right:calc(8px + env(safe-area-inset-right));
  }
  .marca-titulo{font-size:11px; letter-spacing:.09em;}
  .marca-sub{display:none;}          /* el lema no paga su sitio en 375px */
  .acciones button{padding:4px 8px; font-size:8px;}

  /* La MARCA no cabe en un teléfono: la portada ya presenta el juego, y esa
     fila entera es mapa que se gana (petición del autor: "la parte de
     arriba ocupa mucho"). El engranaje vive en la barra del mapa. */
  .marca{display:none;}
  .superior{padding:6px 8px; gap:4px 8px;}

  /* La rejilla viene del corte de 900px; aquí solo se encoge la letra */
  .hud-item{padding:3px 7px;}
  .hud-item .e{font-size:6.5px; letter-spacing:.08em;}
  .hud-item .v{font-size:11.5px;}

  /* La carta del tajo, compacta: en 46vh de lateral cada píxel es oro y la
     carta se partía por el pliegue en algunos teléfonos */
  .tajo-cab{gap:7px; margin-bottom:4px;}
  .tajo-cara{width:24px; height:24px;}
  .tajo-eti{font-size:7.5px;}
  .tajo-tit{font-size:12px;}
  .tajo-txt{font-size:10.5px; line-height:1.4;}
  .tajo-btn{margin-top:5px; padding:8px 10px;}

  /* El dedo no es un puntero: mínimo ~40px de alto en lo tocable */
  .solapa{padding:11px 4px; font-size:10px;}
  .pestana{padding:9px 12px;}
  .lateral{
    max-height:46vh; padding:8px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
  .mapa{min-height:40vh;}
  .lienzo-caja{min-height:0;}
}


/* ---------- TARJETA DE HITO ----------
   Tapa el juego a propósito. Se ve tres o cuatro veces en toda la partida, en el
   momento exacto en que cambia el problema: hasta ahora solo había que traer
   agua y de golpe hay que llevársela sucia. Eso no se anuncia con una línea en
   el registro. */
.hito-fondo{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(4,10,16,.82);
  animation:hitoEntra .25s ease-out;
}
.hito-fondo[hidden]{display:none;}
@keyframes hitoEntra{ from{opacity:0} to{opacity:1} }

.hito{
  width:min(560px, 100%); max-height:92vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--linea-viva);
  border-radius:8px; box-shadow:0 24px 60px -20px #000;
}
.hito-img{
  display:block; width:100%; height:auto;
  border-radius:8px 8px 0 0; border-bottom:1px solid var(--linea-viva);
}
.hito-img[hidden]{display:none;}
.hito-cuerpo{padding:16px 20px 20px;}
.hito-titulo{
  font-family:var(--mono); font-size:17px; font-weight:700;
  color:var(--agua); letter-spacing:.02em; margin-bottom:12px;
}
.hito-eti{
  font-family:var(--mono); font-size:8.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tenue);
  margin-top:13px;
}
.hito-eti-hacer{color:var(--ok);}
.hito-eti-porque{color:var(--alarma);}
.hito-txt{font-size:12.5px; line-height:1.6; color:var(--texto); margin-top:3px;}
.hito-porque{color:var(--tenue); font-style:italic;}
.hito-btn{
  display:block; width:100%; margin-top:18px; padding:11px; cursor:pointer;
  background:linear-gradient(180deg,#1d3a52,#0e2434);
  border:1px solid var(--agua); border-radius:4px; color:var(--agua);
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; transition:.15s;
}
.hito-btn:hover{background:linear-gradient(180deg,#24506f,#0e2434);}
.hito-btn:focus-visible{outline:2px solid var(--agua); outline-offset:2px;}

/* Un LOGRO es la misma tarjeta con otro tono. Con el mismo azul de aviso, "el
   río vuelve a estar vivo" se leía como otra regañina antes de leer nada. */
.hito.es-logro{border-color:var(--ok); box-shadow:0 24px 60px -20px #000, 0 0 0 1px var(--ok);}
.hito.es-logro .hito-titulo{color:var(--ok);}
.hito.es-logro .hito-btn{border-color:var(--ok); color:var(--ok);
  background:linear-gradient(180deg,#1b3a28,#0e2418);}
.hito.es-logro .hito-btn:hover{background:linear-gradient(180deg,#245036,#0e2418);}

/* EL MINIJUEGO: la caja del tablero. Oscura y sin adornos — ahí dentro manda
   el reloj, no la decoración. */
.mini-caja{
  width:min(560px, calc(100vw - 24px)); padding:14px 16px 16px;
  background:var(--panel); border:1px solid var(--linea-viva); border-radius:8px;
}
.mini-cab{display:flex; justify-content:space-between; align-items:center;}
.mini-titulo{
  font-family:var(--mono); font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--agua);
}
#mini-cancelar{
  background:none; border:1px solid var(--linea-viva); color:var(--tenue);
  padding:5px 10px; border-radius:3px; cursor:pointer;
  font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase;
}
#mini-cancelar:hover{border-color:var(--critico); color:var(--critico);}
.mini-desc{font-size:11.5px; line-height:1.5; color:var(--tenue); margin:7px 0 10px;}
#mini-lienzo{display:block; width:100%; height:auto; touch-action:none;
  border-radius:4px; cursor:pointer;}
/* En la línea, el puntero ES la mano del operario dibujada en el lienzo */
#mini2-lienzo{display:block; width:100%; height:auto; touch-action:none;
  border-radius:4px; cursor:none;}
/* La ruta del camión: mismo lienzo elástico, puntero normal (se conduce) */
#mini3-lienzo{display:block; width:100%; height:auto; touch-action:none;
  border-radius:4px; cursor:pointer;}

/* LA PORTADA: el telón de entrada. Más oscura que las tarjetas —debajo el
   juego ya corre y no debe competir— y con el título al estilo de la marca. */
.portada{background:rgba(2,6,12,0.88);}
.portada-caja{
  max-width:430px; padding:0 0 30px; text-align:center; overflow:hidden;
  background:var(--panel); border:1px solid var(--linea-viva); border-radius:8px;
}
/* La imagen va a sangre hasta los bordes: es el cartel, no una ilustración */
.portada-img{display:block; width:100%; height:auto; margin-bottom:22px;}
.portada-img[hidden]{display:none;}
.portada-titulo, .portada-lema{padding:0 30px;}
.portada-desc{padding:0 30px;}
.portada .hito-btn{width:calc(100% - 60px); margin-left:30px; margin-right:30px;}
/* Sin imagen, el texto no puede quedar pegado al techo */
.portada-img[hidden] + .portada-titulo{margin-top:34px;}
.portada-titulo{
  font-family:var(--mono); font-size:26px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  background:linear-gradient(90deg,#2dd4bf,#38bdf8,#a78bfa);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.portada-lema{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tenue); margin-top:6px;
}
.portada-desc{
  font-size:13px; line-height:1.6; color:var(--texto);
  margin-top:16px; text-align:left;
}
.portada .hito-btn{margin-top:22px;}
/* El cambio de idioma: un enlace discreto bajo el botón, no un segundo botón
   compitiendo con Empezar */
.portada-idioma{
  display:block; margin:12px auto 0; background:none; border:none;
  color:var(--tenue); font-family:var(--mono); font-size:11.5px;
  text-decoration:underline; cursor:pointer;
}
.portada-idioma:hover{color:var(--texto);}
.portada-idioma[hidden]{display:none;}

/* La tarjeta de VUELTA: un parte de resultados, no un momento del juego.
   Hereda el vestido del hito pero sin imagen: los números son la imagen. */
.hito.vuelta{max-width:420px;}
.vuelta-lineas{display:grid; gap:7px; margin-top:14px;}
.vuelta-fila{
  display:flex; justify-content:space-between; gap:12px; font-size:13px;
  border-bottom:1px dotted var(--linea-viva); padding-bottom:6px;
}
.vuelta-fila span{color:var(--tenue);}
.vuelta-fila b{font-family:var(--mono);}
.vuelta-fila.bien b{color:var(--ok);}
.vuelta-fila.mal b{color:var(--alarma);}
.vuelta-nota{font-size:10.5px; color:var(--tenue); margin-top:-3px;}

/* La edad de cada línea, al lado de su calibre */
.linea-edad{
  font-style:normal; font-family:var(--mono); font-size:9px;
  color:var(--apagado); margin-left:7px;
}
.linea-edad.vieja{color:#f0a04a; font-weight:700;}