/* Tabletas: las tarjetas usan dos columnas. */
@media (max-width: 980px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .welcome-card {
    grid-template-columns: 1fr;
  }

  .welcome-card__visual {
    display: none;
  }

  .activity-stage {
    grid-template-columns: 1fr;
  }

  .device-scene {
    min-height: 300px;
  }

  .device-scene svg {
    max-height: 215px;
  }

  .review-steps,
  .credit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Celulares: la barra lateral se convierte en navegación inferior. */
@media (max-width: 720px) {
  .app-shell {
    display: block;
  }

  .workspace {
    grid-column: auto;
  }

  .sidebar {
    inset: auto 0 0;
    width: 100%;
    height: 68px;
    padding: 8px 10px;
    background: #303ca2;
  }

  .brand,
  .sidebar__footer {
    display: none;
  }

  .main-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
  }

  .nav-link {
    flex-direction: column;
    gap: 0;
    padding: 5px 2px;
    font-size: 0.68rem;
  }

  .nav-link > span:first-child {
    height: 26px;
  }

  .topbar {
    min-height: 80px;
    padding: 14px 18px;
  }

  .eyebrow,
  .grade-control > span,
  .review-mode-badge {
    display: none;
  }

  .grade-control {
    max-width: 142px;
    padding-left: 9px;
  }

  .grade-control select {
    width: 100%;
  }

  .main-content {
    padding: 24px 16px 100px;
  }

  .card-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .welcome-card {
    padding: 28px 22px;
  }

  .notification {
    right: 16px;
    bottom: 84px;
  }

  .path-item {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
  }

  .learning-path::before {
    left: 20px;
  }

  .path-item__number {
    width: 42px;
    height: 42px;
    border-width: 3px;
  }

  .path-item__content {
    padding: 17px;
  }

  .path-item__heading,
  .activity__header {
    align-items: start;
    flex-direction: column;
  }

  .path-item__heading .button {
    width: 100%;
  }

  .activity-stage {
    min-height: 0;
  }

  .device-scene {
    min-height: 230px;
    padding: 24px;
  }

  .device-scene svg {
    max-height: 160px;
  }

  .activity-question {
    padding: 24px 18px;
  }

  .activity-actions .button {
    width: 100%;
  }

  .completion-summary {
    grid-template-columns: 1fr;
  }

  .classification-item {
    grid-template-columns: 1fr;
  }

  .sorting-item {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .sorting-item__controls {
    grid-column: 1 / -1;
    justify-content: end;
  }

  .tool-grid,
  .wireframe-layout {
    grid-template-columns: 1fr;
  }

  .wireframe-block--wide {
    grid-column: auto;
  }

  .web-simulation header {
    align-items: start;
    flex-direction: column;
  }

  .review-steps,
  .credit-grid {
    grid-template-columns: 1fr;
  }

  .review-callout__heading,
  .authorship-card,
  .review-mini-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .review-mini-bar a {
    flex-basis: auto;
  }

  .project-flow {
    align-items: stretch;
    flex-direction: column;
  }

  .project-flow > span[aria-hidden] {
    display: none;
  }
}