/* La cola. Paleta propia: el sótano es casi negro y lo único que brilla es lo
   que importa —el cuerpo en verde, las arandelas en naranja y las placas
   apretadas en celeste—, así que el tablero se lee de un vistazo. */
.lc-intro { background: linear-gradient(170deg, #0c0f14 0%, #141922 100%); color: #eef1f7;
  padding: 54px 0 34px; }
.lc-intro h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 6px 0 14px; letter-spacing: -.02em; }
.lc-intro .lead { color: #a2abbd; max-width: 70ch; line-height: 1.65; }
.lc-intro .lead b { color: #8fffca; font-weight: 600; }
.lc-intro .eyebrow a { color: #8fffca; }

.lc-seccion { padding: 26px 0 60px; background: #0a0c11; }
.lc { display: grid; gap: 14px; }

/* el marcador de arriba */
.lc-marcador { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 10px 14px; min-height: 42px; }
.lc-marcador span { font-size: .8rem; color: #8a93a6; }
.lc-marcador b { color: #eef1f7; font-weight: 700; }
.lc-marcador span:first-child { color: #8fffca; font-size: .86rem; }
.lc-marcador span:first-child b { color: #8fffca; }

.lc-pantalla { position: relative; border-radius: 14px; overflow: hidden; background: #0c0f14;
  border: 1px solid #222736; }
.lc-pantalla > canvas { display: block; width: 100%; height: auto; outline: none; }

.lc-panel { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px;
  background: rgba(8,10,14,.94); overflow: auto; }
.lc-panel[hidden] { display: none; }
.lc-caja { width: min(560px, 100%); background: #141824; border: 1px solid #262c3c;
  border-radius: 14px; padding: 20px 22px; color: #eef1f7; }
.lc-caja.lc-ancha { width: min(820px, 100%); }
.lc-caja h2 { font-size: 1.5rem; margin: 2px 0 10px; letter-spacing: -.015em; }
.lc-caja p { margin: 0 0 10px; font-size: .94rem; line-height: 1.55; color: #c3cbd9; }
.lc-caja p b { color: #eef1f7; }
.lc-kicker { font-size: .7rem; text-transform: uppercase; letter-spacing: .13em;
  color: #8a93a6; font-weight: 700; margin: 0 0 4px !important; }
.lc-tenue { color: #8a93a6 !important; font-size: .86rem !important; }
.lc-bien { color: #8fffca !important; }
.lc-alerta { color: #ff9aa4 !important; }

.lc-botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.lc-cta, .lc-cta-2 { font: inherit; font-size: .9rem; font-weight: 600; padding: 10px 16px;
  border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
.lc-cta { background: #8fffca; color: #0b2018; }
.lc-cta:hover { background: #adffd9; }
.lc-cta-2 { background: rgba(255,255,255,.07); color: #eef1f7; border-color: rgba(255,255,255,.14); }
.lc-cta-2:hover { background: rgba(255,255,255,.13); }
.lc-cta[disabled], .lc-cta-2[disabled] { opacity: .4; cursor: not-allowed; }

/* la lista de piezas */
.lc-piezas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px; margin: 10px 0 4px; }
.lc-pieza { text-align: left; font: inherit; cursor: pointer; display: grid; gap: 4px;
  align-content: start; min-width: 0;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 10px 12px; color: #eef1f7; }
.lc-pieza b { font-size: .88rem; font-weight: 600; }
.lc-pieza span { font-size: .77rem; color: #9ba4b6; line-height: 1.45; }
.lc-pieza .lc-marca { color: #8fffca; font-size: .73rem; }
.lc-pieza:hover:not([disabled]) { background: rgba(255,255,255,.07); }
.lc-pieza[disabled] { opacity: .42; cursor: not-allowed; }
.lc-pieza.lc-hecha { border-color: rgba(143,255,202,.35); background: rgba(143,255,202,.06); }
.lc-pieza.lc-toca { border-color: rgba(143,255,202,.75); }

.lc-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px; margin: 12px 0; }
.lc-datos > div { background: rgba(255,255,255,.04); border-radius: 9px; padding: 9px 11px;
  min-width: 0; }
.lc-datos b { display: block; font-size: 1.2rem; color: #8fffca; }
.lc-datos span { font-size: .72rem; color: #8a93a6; }

/* el mando: una cruz y tres botones largos */
.lc-mando { display: grid; gap: 10px; grid-template-columns: auto 1fr; align-items: center; }
.lc-cruz { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px);
  gap: 5px; }
.lc-arriba { grid-area: 1 / 2; } .lc-izq { grid-area: 2 / 1; }
.lc-der { grid-area: 2 / 3; } .lc-abajo { grid-area: 3 / 2; }
.lc-fila { display: flex; flex-wrap: wrap; gap: 7px; }
.lc-bt { font: inherit; font-size: .92rem; font-weight: 700; border-radius: 10px;
  cursor: pointer; color: #eef1f7; user-select: none; touch-action: manipulation;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.lc-bt.lc-largo { font-size: .84rem; font-weight: 600; padding: 11px 14px; }
.lc-bt i { font-style: normal; font-size: .64rem; font-weight: 700; color: #a2abbd;
  background: rgba(0,0,0,.35); border-radius: 4px; padding: 2px 5px; }
.lc-bt:hover { background: rgba(255,255,255,.13); }
.lc-bt:active { background: rgba(143,255,202,.22); border-color: rgba(143,255,202,.5); }

.lc-ayuda { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.lc-ayuda > div { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 14px 16px; }
.lc-ayuda h3 { margin: 0 0 6px; font-size: .92rem; color: #8fffca; }
.lc-ayuda p { margin: 0; font-size: .86rem; line-height: 1.55; color: #a2abbd; }
.lc-ayuda p b { color: #eef1f7; font-weight: 600; }
.lc-pie { font-size: .84rem; color: #8a93a6; line-height: 1.6; max-width: 74ch; margin: 0; }

@media (max-width: 560px) {
  .lc-mando { grid-template-columns: 1fr; justify-items: center; }
  .lc-fila { justify-content: center; }
}