/* ══════════════════════════════════════════════
   CUMBRE v2 · Desktop — 3 columnas tipo cuaderno
   Activado a partir de 1024px. Hace de wrapper sobre
   las secciones v2 ya pintadas en móvil — no requiere
   markup nuevo.
   ══════════════════════════════════════════════ */

@media (min-width: 1024px) {
  /* Página de tiempo en grid 3 col: izq favs/score · centro verdict+forecast · der details */
  #weatherContent {
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr) 320px;
    gap: 0;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    min-height: calc(100vh - 80px);
  }

  /* Centro: verdict + breakdown + now + hourly + forecast */
  #verdictV2, #scoreBreakdownV2, #nowStripV2, #hourlyV2, #forecastV2 {
    grid-column: 2;
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
  }

  /* Izquierda: favs */
  #favsStripV2 {
    grid-column: 1;
    grid-row: 1 / span 6;
    align-self: stretch;
    padding-top: 18px;
    border-right: 1px solid var(--rule);
  }

  /* Derecha: details grid */
  #detailsGridV2 {
    grid-column: 3;
    grid-row: 1 / span 6;
    align-self: stretch;
    padding-top: 18px;
    border-left: 1px solid var(--rule);
  }

  /* Verdict card más generosa en desktop */
  .vc-num { font-size: 5.5rem; }
  .vc-sub { font-size: 1.25rem; }
  .vc-score-val { font-size: 2.4rem; }

  /* Página Escuelas en grid: izq filtros · der lista */
  #sectorsPage .sectors-container {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 0;
    max-width: 1280px;
    margin: 0 auto;
    align-items: start;
  }
  #sectorsPage .filters-bar,
  #sectorsPage .filters-more {
    border-right: 1px solid var(--rule);
    padding-right: 18px;
  }
  #sectorsPage #escuelasHeroV2,
  #sectorsPage .sector-results {
    grid-column: 2;
    padding-left: 18px;
  }

  /* Bottom nav: ocultar en desktop, usar la propia barra header arriba. */
  /* (Por ahora la dejamos visible para no romper navegación, pero la fijamos
     más sutil.) */
  .bottom-nav {
    max-width: 600px;
    margin: 0 auto;
    border-top: 1px solid var(--rule);
  }
}

@media (min-width: 1440px) {
  #weatherContent {
    grid-template-columns: 360px minmax(0, 1fr) 360px;
    max-width: 1440px;
  }
}