/* ── Escritorio: barra lateral y rejillas anchas ── */
@media (min-width:900px){
  body{
    display:grid; grid-template-columns:260px minmax(0,1fr); grid-template-rows:auto auto 1fr;
    column-gap:34px; max-width:1240px; margin:0 auto; padding:0 28px 90px;
  }
  /* Acotado como en 01-base.css: solo la cabecera de la app, no cualquier
   * <header> anidado de las secciones. */
  #lateral>header{grid-column:1; grid-row:1; flex-direction:column; gap:18px; padding:30px 0 8px; position:sticky; top:0}
  h1{font-size:2.1rem}
  /* En escritorio la cabecera es una columna de 260px: hay sitio de sobra, así
     que el logo va al ancho de la columna en vez de atado a una altura como en
     móvil, donde compite con los botones. */
  header h1.logo img{ max-height:none; width:100%; max-width:230px }
  .cab-acciones{ align-self:flex-start }
  nav{
    grid-column:1; grid-row:2; flex-direction:column; align-items:stretch; gap:6px;
    padding:8px 0; overflow:visible; position:sticky; top:150px; align-self:start;
  }
  nav button{text-align:left; padding:11px 14px 11px 26px; font-size:.78rem}
  /* LOS DOS CONTENEDORES VAN EN LA MISMA CELDA.
     #reactMain no tenía sitio asignado en la rejilla, así que la colocación
     automática lo metía en la COLUMNA DE LA BARRA LATERAL: todas las secciones
     de React —cuaderno, escapes, restaurantes, juegos, libros— se pintaban en
     300px de ancho en una pantalla de 1425. De ahí que en escritorio la página
     del viaje se viera apretada, el mapa enorme para su columna y las
     miniaturas pixeladas por estirarse en tarjetas diminutas.
     Compartir celda es seguro porque nunca están los dos a la vez: pintarTodo()
     esconde uno y muestra el otro con el atributo `hidden`. */
  main, #reactMain{grid-column:2; grid-row:1/4; padding:26px 0 0; max-width:820px; min-width:0; margin:0}
  .medallero{grid-template-columns:repeat(5,1fr)}
  .galeria{grid-template-columns:repeat(5,1fr)}
  /* Las rejillas de Juegos de mesa (.jdm-grid) y de Videojuegos (.vgj-lista)
     viven ahora en sus propios archivos (10-juegos.css y 13-videojuegos.css),
     con el sistema visual: aquí se pisaban con ellos. */
  .celda{min-height:72px; font-size:.8rem}
  .celda .icos{font-size:.85rem; margin-top:4px}
  .cal-nav h2{font-size:1.4rem}
  .portada{aspect-ratio:21/9}
  .fin{margin:0; padding:18px 18px 22px}
  footer{padding-left:calc(50% - 620px + 28px); padding-right:calc(50% - 620px + 28px)}
}
@media (min-width:1280px){
  body{max-width:2200px; grid-template-columns:300px minmax(0,1fr); column-gap:48px; padding:0 40px 90px}
  /* De 960 a 1180: en un monitor normal (1440-1920) main se quedaba muy por
     debajo del hueco real que dejaba el body de 2200 — de ahí la queja de
     "sobra espacio a la derecha". Las rejillas de tarjetas ganan columnas
     para llenar ese ancho con MÁS contenido, no con márgenes más gordos; los
     formularios y bloques de texto largo llevan su propio tope aparte (ver
     más abajo) para no volverse una pared de texto ilegible. */
  main, #reactMain{max-width:1180px; min-width:0; margin:0}
  .medallero{grid-template-columns:repeat(7,1fr)}
  .galeria{grid-template-columns:repeat(7,1fr)}
  footer{padding-left:40px; padding-right:40px}

  /* Formularios y texto largo: SIN este tope se estirarían a los 1180px de
     main entero — una caja de texto de esa anchura es incómoda de leer y de
     rellenar. Se quedan en una medida de lectura cómoda incluso en el
     monitor más ancho. */
  .cine-form, .vj-form{max-width:640px}
  .peli-sinopsis, .opo-tema-largo, .opo-ritmo-nota, .cue-notas,
  .esc-nota, .rest-nota-txt, .rest-platos, .texto-largo{max-width:70ch}
}
@media (min-width:1700px){
  body{grid-template-columns:340px minmax(0,1fr)}
  main, #reactMain{max-width:1320px}
  .medallero{grid-template-columns:repeat(8,1fr)}
  .galeria{grid-template-columns:repeat(8,1fr)}
}