/* ══════════ JUEGOS DE MESA (sistema visual, 29/09/2026) ══════════
   El área es como las demás: banda, pestañas, filtros, cajas, notas y
   etiquetas salen de 16-sistema.css. Lo único suyo es EL ESTANTE (tablero
   «SisFirma · Juegos · el estante»): las cajas de pie sobre una balda de
   madera, solo en la Colección. Fuera la madera de fondo de toda el área, la
   cinta «¡A JUGAR!», los KPI oscuros y las etiquetas de nueve colores. */

/* Sin márgenes ni rellenos propios: antes el envoltorio sangraba (-4px en
   móvil, 18px de relleno en escritorio) y se salía de su contenedor. */
.jdm{ min-width:0 }

/* ── El estante: la pieza propia ──
   El canto de madera se dibuja con un degradado repetido cuyo periodo es la
   ALTURA EXACTA de una fila (caja + hueco). Va en variables para que al
   cambiar el tamaño de las carátulas no haya que recalcular números a mano y
   las baldas se desalineen sin avisar.

   alto de caja = carátula + canto con el nombre */
.jdm-estante{
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l);
  padding:16px 0 0; overflow:hidden;
}
.jdm-grid{
  --jdm-caratula:132px;
  --jdm-info:52px;      /* nombre (1 línea) + una fila de datos + relleno */
  --jdm-caja-alto:calc(var(--jdm-caratula) + var(--jdm-info));
  --jdm-balda:10px;
  --jdm-hueco:24px;     /* la balda y aire hasta la fila siguiente */

  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:var(--jdm-caja-alto);
  gap:var(--jdm-hueco) 10px;
  /* Relleno lateral para que la balda asome a los dos lados de las cajas, y
     abajo el sitio de la balda de la última fila. Sin relleno arriba: el
     degradado se mide desde el borde superior. */
  padding:0 14px var(--jdm-balda);
  background-image:repeating-linear-gradient(180deg,
    #C9955F 0 3px,
    #B77C47 3px var(--jdm-balda),
    transparent var(--jdm-balda) calc(var(--jdm-caja-alto) + var(--jdm-hueco)));
  background-position:0 var(--jdm-caja-alto);
}
/* La caja, de pie. Altura FIJA e igual a la de la fila, para que la balda
   caiga siempre justo a sus pies. El contorno va como sombra INTERIOR, no
   como `border`: con un devicePixelRatio fraccionario (1.25 en el portátil)
   el navegador redondeaba el borde y la caja salía más baja de lo declarado,
   y sobre cinco filas los estantes se veían torcidos. Una sombra interior no
   ocupa espacio. Es un <button>: hay que devolverle letra y alineación. */
.jdm-caja{
  position:relative; display:flex; flex-direction:column; height:var(--jdm-caja-alto); min-width:0;
  padding:0; border:0; border-radius:var(--r-s) var(--r-s) 2px 2px; overflow:hidden; cursor:pointer;
  background:var(--sup2); box-shadow:inset 0 0 0 1px var(--borde-s), 0 2px 5px rgba(27,42,65,.14);
  font:inherit; color:inherit; text-align:left; -webkit-appearance:none; appearance:none;
  transition:transform .12s;
}
.jdm-caja:hover{ transform:translateY(-2px) }
.jdm-caja:active{ transform:scale(.98) }
/* La carátula se queda con lo que sobra dentro de la caja: el canto conserva
   sus píxeles exactos. */
.jdm-caja-visual{
  position:relative; flex:1 1 auto; min-height:0; width:100%;
  background-color:var(--area-suave); background-size:cover; background-position:center; background-repeat:no-repeat;
}
.jdm-caja-visual .sis-chapa{ position:absolute; right:6px; bottom:6px }
.jdm-caja-info{
  flex:0 0 var(--jdm-info); box-sizing:border-box; padding:6px 8px 7px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:4px;
}
.jdm-caja-nombre{
  font-family:var(--f-tit); font-weight:700; font-size:13px; line-height:1.2; color:var(--tx);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Una sola fila: si no cabe, se recorta por la derecha (el orden deja
   primero lo que más interesa: la nota de BGG y las partidas). */
.jdm-caja-datos{
  display:flex; align-items:center; gap:7px; min-width:0; overflow:hidden; white-space:nowrap;
  font-family:var(--f-mono); font-size:10.5px; font-weight:600; color:var(--tx2);
}
.jdm-caja-datos .sis-etq{ flex-shrink:0 }

/* El lazo de estado, arriba a la izquierda de la carátula, con la etiqueta
   común (un tono por estado; ver TONO_ESTADO en Juegos.tsx). */
.jdm-lazo{ position:absolute; top:6px; left:6px; z-index:1; max-width:calc(100% - 12px) }
.jdm-lazo .sis-etq{ max-width:100%; overflow:hidden; text-overflow:ellipsis; box-shadow:0 1px 3px rgba(27,42,65,.18) }

@media (min-width:600px){ .jdm-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (min-width:900px){
  /* Cinco cajas por balda: la caja es más estrecha y la carátula baja con ella
     para conservar una proporción parecida. */
  .jdm-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); --jdm-caratula:112px; padding:0 18px var(--jdm-balda) }
  .jdm-estante{ padding-top:18px }
}
@media (min-width:1280px){ .jdm-grid{ grid-template-columns:repeat(6,minmax(0,1fr)) } }
@media (min-width:1600px){ .jdm-grid{ grid-template-columns:repeat(7,minmax(0,1fr)); --jdm-caratula:124px } }

/* ── Partidas: filas limpias (una columna en el móvil, dos en escritorio) ── */
.jdm-partidas{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px }
@media (min-width:900px){ .jdm-partidas.dos{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.jdm-partida{
  display:flex; align-items:center; gap:12px; min-width:0; box-sizing:border-box;
  padding:10px 12px; background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-m);
}
.jdm-partidas.en-caja .jdm-partida{ background:var(--sup2) }
.jdm-partida-fecha{ flex:0 0 auto; min-width:78px; font-family:var(--f-mono); font-size:11px; color:var(--tx3) }
.jdm-partida-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.jdm-partida-txt b{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.jdm-partida-txt span{ font-size:12.5px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.jdm-partida-gana{ flex-shrink:0; font-size:13px; font-weight:600; white-space:nowrap }
.jdm-partida-acc{ flex-shrink:0; display:flex; gap:2px }
@media (max-width:599px){
  /* En el móvil la fila se parte: arriba fecha, juego y ganador; los botones debajo. */
  .jdm-partidas.dos .jdm-partida{ flex-wrap:wrap; row-gap:4px }
  .jdm-partida-acc{ width:100%; justify-content:flex-end }
}
/* Las de BGG se despliegan al tocarlas (con quién jugó Carlos y «¿Jugaste tú?»). */
.jdm-partida-bgg{ flex-direction:column; align-items:stretch; gap:8px }
.jdm-partida-fila{ display:flex; align-items:center; gap:12px; min-width:0; cursor:pointer }
.jdm-partida-mas{ padding-top:8px; border-top:1px solid var(--borde-s); display:flex; flex-direction:column; gap:8px }
.jdm-partida-mas p{ margin:0; font-size:12.5px; color:var(--tx2) }
.jdm-jugaste{ display:flex; align-items:center; gap:6px }
.jdm-bgg-bloque .sis-aviso{ margin:0 }
.jdm-bgg-bloque{ margin-top:14px }
.sis-col > .jdm-bgg-bloque{ margin-top:0 }
.jdm-bgg-acciones{ display:flex; flex-wrap:wrap; gap:8px }
.jdm-informe p{ margin:6px 0 0 }

/* ── Ficha de un juego ── */
.jdm-volver{ margin:0 0 12px }
.jdm-ficha-sola{ display:flex; flex-direction:column; gap:14px; max-width:880px }
.jdm-ficha-cab{
  display:flex; gap:16px; align-items:flex-start; box-sizing:border-box; min-width:0;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:16px;
}
.jdm-ficha-img{
  position:relative; flex:0 0 140px; height:140px; border-radius:var(--r-m); overflow:hidden;
  background-color:var(--area-suave); background-size:cover; background-position:center; background-repeat:no-repeat;
}
.jdm-ficha-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px }
.jdm-ficha-tit{ display:flex; align-items:flex-start; gap:12px }
.jdm-ficha-tit h2{
  flex:1; min-width:0; margin:0; font-family:var(--f-tit); font-weight:800; font-size:24px;
  letter-spacing:-.01em; line-height:1.15; color:var(--tx); overflow-wrap:anywhere;
}
.jdm-ficha-badges{ display:flex; flex-wrap:wrap; gap:6px }
.jdm-ficha-notas{ margin:0; font-size:14px; line-height:1.5; color:var(--tx2) }
.jdm-ficha-acciones{ display:flex; flex-wrap:wrap; gap:8px }
.jdm-cuenta{ font-family:var(--f-tit); font-weight:800; font-size:24px; line-height:1; color:var(--area) }
@media (max-width:599px){
  .jdm-ficha-cab{ padding:12px; gap:12px }
  .jdm-ficha-img{ flex-basis:96px; height:96px }
  .jdm-ficha-tit h2{ font-size:20px }
}

/* ── Estadísticas: cinco cajas en rejilla ── */
.jdm-stats{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:start }
@media (min-width:700px){ .jdm-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1280px){ .jdm-stats{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.jdm-stats-nada{ margin:0; font-size:13px; color:var(--tx2) }
.jdm-compara{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.jdm-compara li{ display:flex; align-items:center; gap:8px; font-size:14px }
.jdm-compara .nom{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ── Formularios (juego y partida) ──
   Los campos con la forma del tablero «Piezas · Campos»: rótulo en mono,
   caja de 40 px, radio 10 y borde de 1,5. Viven aquí con prefijo del área
   hasta que haya una pieza común de campo. */
.jdm-form-cab{ display:flex; align-items:center; gap:12px; margin:0 0 14px }
.jdm-form-cab h2{ margin:0; font-family:var(--f-tit); font-weight:800; font-size:20px; color:var(--tx) }
.jdm-form{
  max-width:640px; box-sizing:border-box;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:18px;
}
.jdm-form label{
  display:block; margin:16px 0 6px; font-family:var(--f-mono); font-size:10px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tx3);
}
.jdm-form label:first-child{ margin-top:0 }
.jdm-label-ayuda{ font-family:var(--f-txt); font-size:12px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--tx3) }
.jdm-form input, .jdm-form select, .jdm-form textarea{
  width:100%; box-sizing:border-box; height:var(--h-m); padding:0 12px; margin:0;
  border-radius:var(--r-m); border:1.5px solid var(--borde); background:var(--sup); color:var(--tx);
  font-family:var(--f-txt); font-size:14px;
}
.jdm-form textarea{ height:auto; min-height:76px; padding:10px 12px; resize:vertical; line-height:1.45 }
.jdm-form input:focus, .jdm-form select:focus, .jdm-form textarea:focus{ outline:none; border-color:var(--tx) }
.jdm-ayuda{ margin:6px 0 0; font-size:12.5px; line-height:1.45; color:var(--tx2) }
.jdm-ayuda.error{ color:var(--error) }
.jdm-form-error{ margin:12px 0 0 }
.jdm-form .sis-acciones{ margin-top:20px }
.jdm-par{ display:flex; gap:8px }
.jdm-par-alta{ margin-top:8px }
.jdm-par-alta .sis-btn{ flex-shrink:0 }
.jdm-chips{ display:flex; flex-wrap:wrap; gap:6px }
.jdm-preview-img{ width:100%; height:150px; margin-top:8px; border-radius:var(--r-m); background-size:cover; background-position:center }
.jdm-bgg-box{
  margin-top:18px; padding:14px; border-radius:var(--r-m);
  background:var(--sup2); border:1px solid var(--borde-s); display:flex; flex-direction:column; gap:0;
}
.jdm-bgg-box .jdm-bgg-acciones{ margin-top:10px }
/* Los candidatos de BGG a elegir: la carátula de verdad, porque sin ella dos
   ediciones del mismo juego se leen igual. Con imagen o sin ella ocupa lo
   mismo, así que la lista no salta al ir cargando las miniaturas. */
.jdm-sugerencias{ display:flex; flex-direction:column; gap:4px; margin-top:6px }
.jdm-sugerencia{
  display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:var(--r-m); cursor:pointer;
  background:var(--sup2); border:1px solid var(--borde-s);
}
.jdm-sugerencia:hover, .jdm-sugerencia:focus-visible{ background:var(--sup); border-color:var(--tx2) }
.jdm-sugerencia .miniatura{
  width:32px; height:32px; border-radius:var(--r-s); flex-shrink:0;
  background-color:var(--area-suave); background-size:cover; background-position:center;
}
.jdm-sugerencia .info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px }
.jdm-sugerencia .nombre{ font-size:14px; font-weight:600; color:var(--tx); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.jdm-sugerencia .anio{ font-family:var(--f-mono); font-size:11px; color:var(--tx3) }

/* Reglas generales que vivían en este archivo desde el principio (no son de
   Juegos, pero moverlas cambiaría el orden de la cascada para otras áreas). */
@media (min-width:640px){
  h1{font-size:2.4rem}
  .resumen{grid-template-columns:repeat(6,1fr)}
  .resumen.tres{grid-template-columns:repeat(3,1fr)}
}

/* La colección de Carlos en BGG, revisada (ColeccionBgg.tsx) */
.jdm-coleccion-bgg{ margin:0 0 12px }
.jdm-col-franja{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between }
.jdm-col-revisar{ margin-top:4px }
.jdm-col-revision{ background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:14px 16px }
.jdm-col-intro{ margin:0 0 10px; font-size:13.5px; color:var(--tx2) }
.jdm-col-revision h4{ margin:14px 0 8px; font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tx2) }
.jdm-col-lista{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:6px 14px }
.jdm-col-fila{ display:flex; align-items:center; gap:10px; padding:6px 4px; border-radius:var(--r-m); cursor:pointer }
.jdm-col-fila:hover{ background:var(--sup2) }
.jdm-col-foto{ width:40px; height:40px; border-radius:8px; flex-shrink:0; background:var(--sup2) center/cover no-repeat; border:1px solid var(--borde-s) }
.jdm-col-fila b{ display:block; font-weight:600; font-size:14px }
.jdm-col-fila small{ display:block; font-size:12px; color:var(--tx3) }