/* Cabina · Línea 2 del Cablebús de Puebla. Todo el CSS vive bajo .cabina para no chocar con el sitio. */
.cabina{
  --bg:#f6f3ec; --fg:#26281f; --muted:#5d6070; --line:#d9d6cc; --card:#ffffff;
  --accent:#b03e30; --navy:#243653; --focus:#1f6fd1;
  --sky1:#9fd0ee; --sky2:#f6ead2; --mtn1:#8e9ab8; --mtn2:#a9b2c8; --snow:#f4f6fb;
  --hill:#c9bf9a; --ground:#a39a76; --grass:#8fae6a; --steel:#3a4150; --cable:#2b2f3a;
  --cloud:#ffffffcc; --night:0;
  --display:"Titillium Web","Titillium Web Fallback",Arial,system-ui,sans-serif;
  --body:"Titillium Web","Titillium Web Fallback",Arial,system-ui,sans-serif;
  box-sizing:border-box;max-width:60rem;margin-inline:auto;color:var(--fg);font-family:var(--body);padding:1rem 0;
}
.cabina[data-game]:not(.cb-on){aspect-ratio:800/480;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.5rem;border:1px solid var(--line);border-radius:10px;background:linear-gradient(var(--sky1),var(--sky2))}
.cabina[data-game]:not(.cb-on) p{margin:0;max-width:34rem;font-size:1rem;line-height:1.4}
@media (max-width:620px){.cabina[data-game]:not(.cb-on){aspect-ratio:auto;min-height:39rem}} /* en móvil la tarjeta de inicio va bajo el lienzo: se reserva ese alto */
.cabina *,.cabina *::before,.cabina *::after{box-sizing:border-box}
/* Tema: sigue el del visitante; fuerza uno con data-theme="light" o "dark" en el contenedor .cabina,
   o en <html>/<body> si tu sitio ya usa ese atributo. */
@media (prefers-color-scheme: dark){
  .cabina:not([data-theme="light"]){  --bg:#14161d; --fg:#eceae4; --muted:#a3a6b3; --line:#32353f; --card:#1d2029;
  --accent:#ef7d6b; --navy:#9db4da; --focus:#7db3f5;
  --sky1:#0e1430; --sky2:#3a3358; --mtn1:#2a3354; --mtn2:#38426a; --snow:#8f9bc0;
  --hill:#2c2f45; --ground:#2a2c3b; --grass:#2f4a3a; --steel:#9aa3b8; --cable:#c9cfdc;
  --cloud:#ffffff22; --night:1; color-scheme:dark;}
}
.cabina[data-theme="dark"],html[data-theme="dark"] .cabina,body.dark .cabina{  --bg:#14161d; --fg:#eceae4; --muted:#a3a6b3; --line:#32353f; --card:#1d2029;
  --accent:#ef7d6b; --navy:#9db4da; --focus:#7db3f5;
  --sky1:#0e1430; --sky2:#3a3358; --mtn1:#2a3354; --mtn2:#38426a; --snow:#8f9bc0;
  --hill:#2c2f45; --ground:#2a2c3b; --grass:#2f4a3a; --steel:#9aa3b8; --cable:#c9cfdc;
  --cloud:#ffffff22; --night:1; color-scheme:dark;}
.cabina .cb-title{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,5vw,2.6rem);line-height:1.1;margin:0 0 .4rem;text-wrap:balance}
.cabina .cb-sub{font-size:clamp(1rem,2.6vw,1.15rem);color:var(--muted);margin:0 0 1rem;max-width:44rem}
.cabina .cb-stage{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--sky1);touch-action:none;user-select:none;-webkit-user-select:none}
.cabina canvas{display:block;width:100%;height:auto;aspect-ratio:800/440}
.cabina .cb-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(10,14,30,.28)}
.cabina .cb-ov[hidden]{display:none}
.cabina .cb-card{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.3rem;max-width:25rem;text-align:center;box-shadow:0 10px 34px rgba(0,0,0,.25)}
.cabina .cb-card h2{font-family:var(--display);font-size:1.5rem;margin:0 0 .35rem;color:var(--fg)}
.cabina .cb-card p{margin:.2rem 0;font-size:.95rem;color:var(--muted);line-height:1.4}
.cabina .cb-card .cb-big{font-family:var(--display);font-size:1.15rem;color:var(--fg)}
.cabina button{font:600 1rem var(--display);letter-spacing:.02em;padding:.65rem 1.3rem;border-radius:8px;border:0;background:var(--accent);color:#fff;cursor:pointer;margin-top:.7rem;touch-action:manipulation}
.cabina button.cb-sec{background:transparent;color:var(--fg);border:1px solid var(--line);margin-left:.4rem}
.cabina button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.cabina .cb-keys{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.9rem;color:var(--muted);margin:.7rem 0 0}
.cabina kbd{font:600 .8rem var(--body);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:.05rem .4rem;background:var(--card);color:var(--fg)}
.cabina .cb-touch{display:none;gap:.6rem;margin-top:.7rem}
.cabina .cb-touch button{flex:1;margin:0;background:var(--navy);color:var(--bg);padding:1rem}
@media (pointer:coarse){.cabina .cb-touch{display:flex}.cabina .cb-keys{display:none}}
.cabina .cb-src{font-size:.8rem;font-style:italic;color:var(--muted);margin:.5rem 0 0}
.cabina .cb-snd,.cabina .cb-fs{position:absolute;right:8px;bottom:8px;width:2.2rem;height:2.2rem;margin:0;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(10,14,30,.55);color:#fff;z-index:2}
.cabina .cb-fs{right:3.1rem}
.cabina .cb-note{font-size:.85rem;color:var(--muted);line-height:1.5;margin:1.1rem 0 0;border-top:1px solid var(--line);padding-top:.8rem;max-width:46rem}
@media (max-width:620px){
  .cabina .cb-stage{overflow:visible;border:0;background:none}
  .cabina canvas{border:1px solid var(--line);border-radius:10px}
  .cabina .cb-ov{position:static;background:none;padding:.8rem 0 0}
  .cabina .cb-card{max-width:none;box-shadow:none}
}
/* Pantalla completa (API nativa o modo CSS): la imagen se ajusta sin deformarse y deja sitio a los botones táctiles. */
.cabina.cb-full{position:fixed;inset:0;z-index:99999;max-width:none;margin:0;padding:.5rem;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;overflow:hidden}
.cabina.cb-full .cb-stage{width:min(100%,calc((100vh - 1rem - var(--cb-tk,0px))*800/440));width:min(100%,calc((100dvh - 1rem - var(--cb-tk,0px))*800/440));overflow:hidden;border:1px solid var(--line);background:var(--sky1)}
.cabina.cb-full canvas{border:0;border-radius:0}
.cabina.cb-full .cb-ov{position:absolute;padding:1rem;background:rgba(10,14,30,.28)}
.cabina.cb-full .cb-card{max-width:25rem;box-shadow:0 10px 34px rgba(0,0,0,.25)}
.cabina.cb-full .cb-keys{display:none}
.cabina.cb-full .cb-touch{width:min(100%,32rem);margin-top:0}
@media (pointer:coarse){.cabina.cb-full{--cb-tk:4.8rem}}