/* Mi Ruta B V9.2 · Ajustes finales de escritorio
   Objetivo: evitar vistas cortadas sin que queden estiradas. */

@media (min-width: 1000px) {
  .page {
    padding-left: clamp(22px, 3vw, 42px) !important;
    padding-right: clamp(22px, 3vw, 42px) !important;
  }

  .page-content {
    width: 100% !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
  }

  /* Vista inicio */
  .page-content.view-home {
    max-width: 1240px !important;
  }

  /* Práctica / biblioteca: anchas pero sin exagerar */
  .page-content.view-practice,
  .page-content.view-library,
  .page-content.view-study,
  .page-content.view-errors,
  .page-content.view-profile,
  .page-content.view-ruti,
  .page-content.view-results {
    max-width: 1160px !important;
  }

  .view-practice .form-card {
    max-width: 980px !important;
    margin-inline: auto !important;
    padding: 26px !important;
  }

  .view-library .search-wrap,
  .view-library .filter-row,
  .view-library #library-results,
  .view-library > .panel-head,
  .view-library > div[style*="justify-content:space-between"] {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .view-library #library-results {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* Simulacro / prueba: centrado y más cómodo */
  .page-content.view-quiz,
  .page-content.view-examIntro,
  .page-content.view-examSubmit {
    max-width: 960px !important;
  }

  .view-quiz .qtop,
  .view-quiz .progress-track,
  .view-quiz .panel-head,
  .view-quiz .question,
  .view-quiz .question-img,
  .view-quiz .option,
  .view-quiz .quiz-actions,
  .view-quiz .exam-end,
  .view-quiz .small-note,
  .view-quiz .callout,
  .view-quiz > .pill,
  .view-examIntro .exam-kpis,
  .view-examIntro .card,
  .view-examSubmit .card {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .view-quiz .question {
    font-size: clamp(21px, 2vw, 26px) !important;
  }

  .view-quiz .question-img {
    display: block !important;
    max-height: 340px !important;
    width: auto !important;
  }

  .view-quiz .option {
    width: 100% !important;
  }

  .view-quiz .quiz-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 12px;
    margin-top: 16px !important;
  }

  .view-quiz .exam-end,
  .view-quiz .small-note.center {
    text-align: center !important;
    display: block;
  }

  /* Calendario: más contenido sin verse estirado */
  .page-content.view-calendar {
    max-width: 1120px !important;
  }

  .view-calendar .stat-grid {
    max-width: 1120px !important;
  }

  .view-calendar .calendar-card {
    max-width: 900px !important;
    margin-inline: auto !important;
    padding: 28px !important;
  }

  .view-calendar .card:not(.calendar-card),
  .view-calendar .review-card,
  .view-calendar .section-head {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .view-calendar .calendar-grid,
  .view-calendar .calendar-weekdays {
    gap: 8px !important;
  }

  .view-calendar .cal-day,
  .view-calendar .cal-empty {
    min-height: 64px !important;
    height: 64px !important;
  }

  .view-calendar .daily-breakdown {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Battle: amplio, pero contenido */
  .page-content.view-battle {
    max-width: 1160px !important;
  }

  .view-battle .battle-setup.card,
  .view-battle .card,
  .view-battle .callout {
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .view-battle .question,
  .view-battle .question-img,
  .view-battle .option,
  .view-battle .qtop,
  .view-battle .progress-track {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .view-battle .question-img {
    display: block !important;
    max-height: 320px !important;
  }

  .view-battle .battle-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .view-battle .battle-mode-option {
    min-height: 96px !important;
    padding: 18px !important;
  }

  .view-battle .battle-settings-row {
    grid-template-columns: minmax(220px, 380px) minmax(220px, 1fr) !important;
  }

  /* Detalles visuales generales */
  .heading,
  .subhead,
  .eyebrow {
    max-width: 100% !important;
  }
}

@media (min-width: 1200px) {
  .view-library #library-results {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Tema oscuro refinado */
body.dark .view-battle .battle-mode-option {
  background: #1a2b43 !important;
  border-color: #344b68 !important;
  color: #e7f0ff !important;
}
body.dark .view-battle .battle-mode-option strong {
  color: #e9f2ff !important;
}
body.dark .view-battle .battle-mode-option small,
body.dark .view-battle .battle-pool-info small,
body.dark .view-battle .small-note,
body.dark .view-battle .subhead,
body.dark .view-calendar .subhead,
body.dark .view-quiz .small-note {
  color: #b6c7de !important;
}
body.dark .view-battle .battle-mode-option:hover {
  background: #203651 !important;
  border-color: #5378ad !important;
}
body.dark .view-battle .battle-mode-option.selected {
  background: rgba(70, 126, 219, 0.18) !important;
  border: 2px solid #5c8fe2 !important;
}
body.dark .view-battle .battle-config-badge {
  background: rgba(72, 112, 180, 0.18) !important;
  border-color: #466283 !important;
  color: #dce8fb !important;
}
body.dark .view-calendar .calendar-card,
body.dark .view-calendar .card,
body.dark .view-quiz .option,
body.dark .view-quiz .callout,
body.dark .view-examIntro .card,
body.dark .view-examSubmit .card {
  background: #18283f !important;
  border-color: #314660 !important;
}
body.dark .view-calendar .cal-day.has-data {
  background: #253a5b !important;
}
body.dark .view-calendar .cal-day.active {
  background: #2f5da8 !important;
}
body.dark .view-calendar .daily-breakdown > div {
  background: #223652 !important;
}
body.dark .view-quiz .option.selected,
body.dark .view-battle .option.selected {
  background: #284776 !important;
  border-color: #5b86d6 !important;
}
body.dark .view-quiz .option .letter,
body.dark .view-battle .option .letter {
  background: #355076 !important;
  color: #e5efff !important;
}