/* ── 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)}
  /* 5 columnas fijas, no auto-fill: con auto-fill el número de columnas
     cambiaba con el ancho de la ventana y las carátulas no cuadraban. El main
     mide 820px como máximo, así que cada caja sale a unos 158px. */
  .jdm-grid{
    grid-template-columns:repeat(5,1fr);
    /* Algo menos alta que en móvil porque la caja también es más estrecha:
       así la carátula mantiene una proporción parecida (~4:3). */
    --jdm-caratula:116px;
    /* En escritorio las etiquetas caben en UNA fila (el diseño de .jdm-pie ya
       es de fila única, con el wrap solo como red): los 64px de móvil —que
       reservan sitio para dos filas— dejaban un hueco muerto bajo los datos.
       52px = título + una fila de etiquetas + relleno, sin aire de sobra. */
    --jdm-info:52px;
  }
  /* Y lo que quede de holgura se reparte, en vez de acumularse todo abajo. */
  .jdm-caja-info{justify-content:center}
  .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}
  .rock,.telon,.fin,.jdm{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)}
  .jdm-grid{grid-template-columns:repeat(6,1fr); --jdm-caratula:96px}
  .vgj-lista{grid-template-columns:repeat(5,1fr)}
  .vgj-saga-juegos{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. */
  .jdm-form, .cine-form, .vj-form, .vgj-form-manual{max-width:640px}
  .peli-sinopsis, .vgj-nota, .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)}
  .jdm-grid{grid-template-columns:repeat(7,1fr); --jdm-caratula:84px}
  .vgj-lista{grid-template-columns:repeat(6,1fr)}
}