/* ==========================================================================
   Sala de juegos · piel de consola (PlayStation 4 / Steam Deck).
   Se carga DESPUÉS de practica-arcade.css y reemplaza su piel clara y colorida por una interfaz
   sobria: fondo oscuro, escenario cinematográfico del juego enfocado, mosaicos horizontales con
   anillo blanco de foco, pestañas de categoría y barra de botones. Solo estilos: la lógica es la de
   practica.js (foco con flechas / mando, ficha del juego, modos).
   ========================================================================== */
.practica-body {
  --c-fondo: #090c11;
  --c-panel: #11151c;
  --c-panel2: #171c25;
  --c-linea: rgba(255, 255, 255, .08);
  --c-texto: #e8ecf2;
  --c-suave: #8a95a7;
  --c-acento: #2d8cff;
}
body.practica-body.juego-body {
  background: radial-gradient(1100px 520px at 78% -6%, rgba(45, 140, 255, .09), transparent 62%), radial-gradient(900px 500px at 0% 100%, rgba(120, 60, 255, .05), transparent 60%), #090c11 !important;
  background-attachment: fixed !important;
  color: var(--c-texto);
}
.practica-body .practica-cont { max-width: 1320px; gap: 10px; padding: 14px 18px 84px; color: var(--c-texto); }

/* Cabecera global: sobria también en esta sección */
.practica-body .nav-practica-especial { background: rgba(255, 255, 255, .12) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important; }

/* ---------- Barra superior: título, buscador y accesos ---------- */
.practica-body .practica-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 4px 2px 2px !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0;
}
.practica-body .practica-hero h1 {
  margin: 0 !important; font-size: 12px !important; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  color: var(--c-suave) !important; -webkit-text-fill-color: var(--c-suave) !important;
}
.practica-body .arc-hero-acc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.practica-body .arc-sorpresa, .practica-body .arc-sec {
  min-height: 34px; padding: 0 14px; border-radius: 6px; font: inherit; font-weight: 600; font-size: 12.5px; letter-spacing: .03em; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none;
  background: rgba(255, 255, 255, .06) !important; color: var(--c-texto) !important; border: 1px solid var(--c-linea) !important; box-shadow: none !important;
  transition: background .15s, border-color .15s;
}
.practica-body .arc-sorpresa:hover, .practica-body .arc-sec:hover { background: rgba(255, 255, 255, .13) !important; border-color: rgba(255, 255, 255, .3) !important; transform: none; filter: none; }
.deck-busca { position: relative; display: inline-flex; align-items: center; }
.deck-busca input {
  width: 190px; min-height: 34px; padding: 0 12px 0 32px; border-radius: 6px; font: inherit; font-size: 13px; color: var(--c-texto);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--c-linea); outline: none; transition: border-color .15s, background .15s, width .2s;
}
.deck-busca input::placeholder { color: var(--c-suave); }
.deck-busca input:focus { border-color: var(--c-acento); background: rgba(255, 255, 255, .1); width: 240px; }
.deck-busca::before { content: ""; position: absolute; left: 11px; width: 9px; height: 9px; border: 2px solid var(--c-suave); border-radius: 50%; }
.deck-busca::after { content: ""; position: absolute; left: 21px; top: 21px; width: 5px; height: 2px; background: var(--c-suave); transform: rotate(45deg); }

/* ---------- Pestañas de categoría ---------- */
.practica-body .arc-chips { gap: 2px; border: 0; padding: 0 2px; margin-top: 2px; }
.practica-body .arc-chip {
  padding: 10px 16px; font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-suave);
  border-bottom: 2px solid transparent; border-radius: 0; background: none; text-shadow: none; transition: color .15s, border-color .15s;
}
.practica-body .arc-chip small { opacity: .55; font-weight: 600; margin-left: 2px; }
.practica-body .arc-chip:hover { color: var(--c-texto); }
.practica-body .arc-chip.activo { color: #fff; border-bottom-color: #fff; text-shadow: none; }
.practica-body .arc-chip span[aria-hidden] { filter: grayscale(.8) brightness(1.2); opacity: .85; }

/* ---------- Escenario del juego enfocado ---------- */
.practica-body .deck-escenario {
  position: relative; top: auto; z-index: 1; min-height: clamp(260px, 42vh, 400px); border-radius: 10px; border: 1px solid var(--c-linea); overflow: hidden;
  background:
    radial-gradient(700px 360px at 82% 40%, hsl(var(--h) 60% 30% / .55), transparent 70%),
    linear-gradient(100deg, #0a0d12 8%, #0f141b 55%, hsl(var(--h) 38% 11%) 100%) !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .5) !important;
}
.practica-body .deck-fondo::after { background: linear-gradient(90deg, rgba(9, 12, 17, .94) 4%, rgba(9, 12, 17, .55) 48%, transparent 85%), linear-gradient(0deg, rgba(9, 12, 17, .85), transparent 45%); }
.practica-body .deck-fondo i { display: none; }
.practica-body .deck-fondo .arc-emoji {
  right: 7%; font-size: clamp(130px, 21vw, 230px); animation: none; opacity: .92;
  filter: saturate(.7) contrast(1.08) brightness(.88) drop-shadow(0 26px 40px rgba(0, 0, 0, .75));
}
.practica-body .deck-reloj { right: 18px; top: 14px; padding: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 600; letter-spacing: .08em; color: rgba(255, 255, 255, .78); }
.practica-body .deck-info { padding: 26px 30px 28px; gap: 9px; max-width: min(100%, 600px); }
.practica-body .deck-cat { font-size: 11.5px; font-weight: 700; letter-spacing: .22em; color: var(--c-suave); display: inline-flex; align-items: center; gap: 8px; }
.practica-body .deck-cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--h) 85% 62%); box-shadow: 0 0 10px hsl(var(--h) 90% 55% / .8); }
.practica-body .deck-info h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 800; letter-spacing: .01em; text-transform: uppercase; line-height: 1.04; text-shadow: 0 4px 24px rgba(0, 0, 0, .8); }
.practica-body .deck-meta { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; color: var(--c-suave); }
.practica-body .deck-desc { color: #aeb8c8; font-size: 14.5px; line-height: 1.5; max-width: 48ch; }
.practica-body .deck-acc { margin-top: 8px; gap: 10px; }
.practica-body .arc-jugar {
  display: inline-flex; align-items: center; gap: 10px; background: #fff !important; color: #0a0d12 !important; border: 0; border-radius: 6px; box-shadow: none !important;
  font-weight: 800; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; padding: 12px 26px; transition: transform .12s, background .15s;
}
.practica-body .arc-jugar:hover { background: #e3e8f0 !important; transform: none; filter: none; }
.practica-body .arc-jugar:focus-visible, .practica-body .deck-sec:focus-visible { outline: 3px solid var(--c-acento); outline-offset: 3px; }
.practica-body .deck-sec { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px; font-weight: 600; font-size: 12.5px; letter-spacing: .04em; padding: 12px 16px; }
.practica-body .deck-sec:hover { background: rgba(255, 255, 255, .15); transform: none; }

/* ---------- Estantes y mosaicos ---------- */
.practica-body .arc-lobby { gap: 0; }
.practica-body .arc-carril-cab { padding: 14px 4px 0; }
.practica-body .arc-carril-cab h3 { font-size: 12px; font-weight: 700; letter-spacing: .22em; color: var(--c-suave); }
.practica-body .arc-carril-cab h3 span[aria-hidden] { filter: grayscale(1) brightness(1.3); opacity: .7; }
.practica-body .arc-carril-n { color: #566074; font-weight: 700; }
.practica-body .arc-pista { gap: 16px; padding: 16px 26px 28px; scroll-padding: 0 26px; }
.practica-body .arc-grilla { grid-template-columns: repeat(auto-fill, minmax(clamp(170px, 18vw, 240px), 1fr)); gap: 22px 16px; padding: 20px 14px 30px; }
.practica-body .deck-cap {
  width: clamp(190px, 17.5vw, 250px); aspect-ratio: 16 / 9; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .07);
  background: radial-gradient(120% 140% at 85% 20%, hsl(var(--h) 50% 30% / .9), transparent 60%), linear-gradient(155deg, hsl(var(--h) 38% 18%), hsl(calc(var(--h) + 28) 48% 8%));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
  transition: transform .18s cubic-bezier(.2, .8, .25, 1), box-shadow .18s;
}
.practica-body .arc-grilla .deck-cap { width: auto; }
.practica-body .deck-cap-arte { inset: 0; display: grid; place-items: center end; padding-right: 9%; background: none; }
.practica-body .deck-cap .arc-emoji { font-size: clamp(46px, 5vw, 66px); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .65)); }
.practica-body .deck-cap-nombre {
  padding: 34px 11px 10px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: none;
  background: linear-gradient(0deg, rgba(5, 7, 10, .95) 8%, transparent);
}
.practica-body .deck-cap-play { display: none; }
.practica-body .deck-cap::after { display: none; }
.practica-body .deck-cap.enfocada, .practica-body .deck-cap:focus-visible {
  transform: scale(1.07); filter: none; z-index: 2; outline: 3px solid #fff; outline-offset: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 20px 42px hsl(var(--h) 70% 28% / .55);
}
.practica-body .deck-cap.enfocada .arc-emoji { animation: none; }
@media (min-width: 861px) { .practica-body .deck-cap { scroll-margin-top: 24px; scroll-margin-bottom: 90px; } }

/* ---------- Barra de botones (solo con teclado / mando) ---------- */
.practica-body .practica-cont::after { display: none !important; }
.deck-ayuda {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; justify-content: center; align-items: center; gap: 22px; padding: 9px 20px;
  background: linear-gradient(0deg, rgba(5, 7, 10, .96), rgba(5, 7, 10, .82)); border-top: 1px solid var(--c-linea); color: var(--c-suave); font-size: 12px; letter-spacing: .04em;
  backdrop-filter: blur(6px);
}
.deck-ayuda span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.deck-ayuda kbd {
  min-width: 24px; height: 24px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 6px; font: inherit; font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .22); border-bottom-width: 2px;
}
@media (min-width: 861px) and (hover: hover) { .deck-ayuda { display: flex; } body.deck-det-abierto .deck-ayuda { display: none; } }
.practica-body .footer-institucional {
  flex-shrink: 0;
  background: #ffffff !important;
  border-top: 1px solid #e4e2e1;
  color: #1a1a1a;
}
.practica-body .footer-institucional a { color: var(--c-suave); }

/* ---------- Mesas multijugador y notas ---------- */
.practica-body .practica-bloque-cab h2 { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--c-suave); }
.practica-body .practica-bloque-cab p, .practica-body .practica-bloque .suave { color: #5f6a7d; }
.practica-body .arc-mesas .practica-card {
  background: var(--c-panel) !important; border: 1px solid var(--c-linea) !important; border-radius: 10px !important; box-shadow: none !important; color: var(--c-texto);
}
.practica-body .arc-mesas .practica-card:hover { transform: none; border-color: rgba(255, 255, 255, .28) !important; background: var(--c-panel2) !important; }
.practica-body .arc-mesas .practica-card-icon { font-size: 30px !important; animation: none !important; filter: saturate(.7); }
.practica-body .arc-mesas .practica-card h3 { font-size: 14px; font-weight: 700; color: #fff !important; }
.practica-body .arc-mesas .practica-card p { color: var(--c-suave) !important; }
.practica-body .arc-mesas .practica-tag { background: transparent !important; border: 0 !important; padding: 0; color: #5f6a7d !important; font-weight: 700; letter-spacing: .12em; }
.practica-body .arc-mesas .practica-jugar { background: #fff !important; color: #0a0d12 !important; border-radius: 6px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.practica-body .practica-nota { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-top: 8px; }
.practica-body .practica-nota > div { background: transparent; border: 0; border-top: 1px solid var(--c-linea); border-radius: 0; box-shadow: none; padding: 12px 2px 0; }
.practica-body .practica-nota span { display: none; }
.practica-body .practica-nota b { color: var(--c-suave); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; margin: 0; }
.practica-body .practica-nota p { color: #5f6a7d; font-size: 12.5px; }
.practica-body .practica-esqueleto { background: linear-gradient(100deg, #12161d 30%, #1a202a 50%, #12161d 70%); background-size: 200% 100%; border-radius: 8px; min-height: 120px; }
.practica-body .tarjeta, .practica-body .aviso { background: var(--c-panel); color: var(--c-texto); border: 1px solid var(--c-linea); }
.practica-body .tarjeta h2 { color: #fff; }
.practica-body .tarjeta .suave { color: var(--c-suave); }

/* ---------- Ficha del juego (pantalla de detalle) en modo oscuro ---------- */
.practica-body .deck-det { color: var(--c-texto); background: radial-gradient(900px 500px at 72% -8%, hsl(var(--h) 45% 20%), transparent 70%), linear-gradient(180deg, #0a0d12, #0d1118 55%, #090c11); }
.practica-body .deck-det-portada { background: linear-gradient(120deg, #0a0d12, hsl(var(--h) 36% 13%) 60%, hsl(var(--h) 44% 20%)); border-bottom: 1px solid var(--c-linea); }
.practica-body .deck-det-portada::after { background: linear-gradient(0deg, #0a0d12 2%, rgba(10, 13, 18, .4) 55%, transparent), linear-gradient(90deg, rgba(9, 12, 17, .75), transparent 62%); }
.practica-body .deck-det-arte i { display: none; }
.practica-body .deck-det-arte .arc-emoji { animation: none; opacity: .9; filter: saturate(.7) contrast(1.08) brightness(.88) drop-shadow(0 26px 40px rgba(0, 0, 0, .75)); }
.practica-body .deck-det-titulo h2 { text-transform: uppercase; font-weight: 800; letter-spacing: .01em; }
.practica-body .deck-det-volver { border-radius: 6px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .2); font-weight: 600; letter-spacing: .04em; }
.practica-body .deck-det-barra { background: linear-gradient(180deg, #0a0d12 72%, transparent); }
.practica-body .deck-det-dato, .practica-body .deck-det-desc { background: var(--c-panel); border: 1px solid var(--c-linea); border-radius: 8px; }
.practica-body .deck-det-dato small, .practica-body .deck-det h3 { color: var(--c-suave); letter-spacing: .18em; }
.practica-body .deck-det-dato b { color: #fff; }
.practica-body .deck-det-desc p { color: #c6cedb; }
.practica-body .deck-modo { background: var(--c-panel); border: 1px solid var(--c-linea); border-radius: 8px; }
.practica-body .deck-modo:hover { background: var(--c-panel2); }
.practica-body .deck-modo.activo { border-color: #fff; background: var(--c-panel2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.practica-body .deck-modo-txt b { color: #fff; }
.practica-body .deck-modo-txt p { color: var(--c-suave); }
.practica-body .deck-modo-check { border-color: #566074; }
.practica-body .deck-modo.activo .deck-modo-check { border-color: #fff; background: #fff; box-shadow: inset 0 0 0 3px var(--c-panel2); }
.practica-body .deck-modo-ico { filter: grayscale(.6) brightness(1.15); }
.practica-body .deck-modo-dif button { color: #cfd6e2; background: rgba(255, 255, 255, .06); border: 1px solid var(--c-linea); border-radius: 6px; font-weight: 600; }
.practica-body .deck-modo-dif button:hover { transform: none; background: rgba(255, 255, 255, .13); }
.practica-body .deck-modo-dif button.activa { background: #fff; color: #0a0d12; border-color: #fff; box-shadow: none; }

/* ---------- Pantallas angostas (celular): mosaicos más chicos, escenario compacto ---------- */
@media (max-width: 860px) {
  .practica-body .practica-cont { padding: 10px 12px 90px; }
  .practica-body .deck-escenario { min-height: 250px; }
  .practica-body .deck-info { padding: 18px 18px 20px; max-width: 78%; }
  .practica-body .deck-info h2 { font-size: clamp(1.5rem, 8vw, 2.1rem); }
  .practica-body .deck-desc { font-size: 13.5px; -webkit-line-clamp: 2; }
  .practica-body .deck-fondo .arc-emoji { right: 2%; font-size: 120px; opacity: .6; }
  .practica-body .deck-cap { width: 158px; }
  .practica-body .arc-pista { padding: 12px 14px 24px; gap: 12px; }
  .practica-body .arc-grilla { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; padding: 14px 4px 26px; }
  .deck-busca input, .deck-busca input:focus { width: 150px; }
  .practica-body .arc-chip { padding: 10px 11px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .practica-body .deck-cap, .practica-body .deck-info.cambia { transition: none; animation: none; } }

/* Barras de desplazamiento discretas (las claras por defecto rompían el tono oscuro) */
.practica-body .arc-pista, .practica-body .arc-mesas, .practica-body .arc-chips, .practica-body .deck-det { scrollbar-width: thin; scrollbar-color: #343c4a transparent; }
.practica-body .arc-pista::-webkit-scrollbar, .practica-body .arc-mesas::-webkit-scrollbar { height: 6px; display: block; }
.practica-body .arc-pista::-webkit-scrollbar-thumb, .practica-body .arc-mesas::-webkit-scrollbar-thumb { background: #343c4a; border-radius: 6px; }
.practica-body .arc-pista::-webkit-scrollbar-track, .practica-body .arc-mesas::-webkit-scrollbar-track { background: transparent; }

/* Variables de tema de la plataforma: en la sala de juegos siempre son las oscuras, sin importar el tema elegido en el muro.
   (Las reglas de tema-global.css leen estas variables; así ningún texto queda oscuro sobre fondo oscuro.) */
body.practica-body.juego-body, body.practica-body.juego-body[data-tema-activo] {
  --perfil-bg: #090c11; --perfil-bg-2: #0d1118; --fondo: #090c11;
  --perfil-texto: #e8ecf2; --perfil-suave: #8a95a7; --suave: #8a95a7; --azul: #e8ecf2;
  --perfil-superficie: #11151c; --perfil-borde: rgba(255, 255, 255, .12); --borde: rgba(255, 255, 255, .12);
  --perfil-accent: #2d8cff; --perfil-acento-texto: #fff; --perfil-acento-tenue: rgba(255, 255, 255, .08); --perfil-acento-borde: #5aa7ff;
  color: #e8ecf2;
}
.practica-body .arc-chip.activo, body.practica-body[data-tema-activo] .arc-chip.activo { color: #fff !important; }

@media (max-width: 860px) {
  .practica-body .arc-hero-acc { width: 100%; flex-wrap: wrap; }
  .practica-body .deck-busca { flex: 1 1 100%; }
  .practica-body .deck-busca input, .practica-body .deck-busca input:focus { width: 100%; }
  .practica-body .arc-sorpresa, .practica-body .arc-sec { flex: 1 1 0; }
}

/* ---------- Celular: catálogo en vertical (sin carriles laterales) y sin huecos ---------- */
@media (max-width: 860px) {
  .practica-body .practica-cont { gap: 10px; padding: 8px 12px 10px; }
  .practica-body .arc-lobby { margin: 0; gap: 0; }
  .practica-body .arc-carril-cab { padding: 12px 2px 0; }
  .practica-body .arc-pista,
  .practica-body .arc-grilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    scroll-snap-type: none;
    scroll-padding: 0;
    padding: 10px 0 8px;
  }
  .practica-body .arc-pista .deck-cap,
  .practica-body .arc-grilla .deck-cap { width: auto; }
  /* Si queda uno suelto en la última fila, se centra en vez de dejar un hueco a un lado */
  .practica-body .arc-pista .deck-cap:last-child:nth-child(odd),
  .practica-body .arc-grilla .deck-cap:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
  .practica-body .arc-mesas {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    margin: 0;
    padding: 4px 0 6px;
  }
  .practica-body .arc-mesas .practica-card { flex: none; width: auto; }
  .practica-body .practica-bloque { margin-bottom: 0; }
  .practica-body .deck-cap.enfocada { transform: none; }
  .practica-body .practica-nota { display: none; }
  .practica-body .practica-bloque-cab { margin: 0 0 4px; }
  .practica-body .practica-bloque-cab h2 { color: #e8ecf2 !important; }
  .practica-body .practica-bloque-cab p { color: #cfd9ea !important; }
  .practica-body .practica-bloque-cab h2, .practica-body .practica-bloque-cab p, .practica-body .arc-carril-cab h3 { text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .6); }
  .practica-body .arc-carril-cab h3 { color: #c9d6ea !important; }
}

/* ---------- Favoritos: corazón en la esquina de cada tarjeta ---------- */
.practica-body .deck-cap-play { display: none; }
.practica-body .deck-cap-fav {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 18px; line-height: 1; color: #fff;
  background: rgba(8, 10, 16, .55); border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .15s, background .2s, color .2s;
}
.practica-body .deck-cap-fav:active { transform: scale(.88); }
.practica-body .deck-cap-fav.es-fav { color: #ff4d6d; background: rgba(8, 10, 16, .72); border-color: rgba(255, 77, 109, .55); text-shadow: 0 0 10px rgba(255, 77, 109, .7); }
.practica-body .deck-cap-fav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Celular: un toque entra al juego, así que ninguna tarjeta queda «seleccionada» con aro blanco */
@media (max-width: 860px) {
  .practica-body .deck-cap.enfocada { outline: none; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
}