/* responsive.css — tabletas y computadora. */
@media (min-width: 640px) {
  .view { max-width: 720px; margin: 0 auto; padding-inline: 1.5rem; }
  dialog#modal { margin: auto; }
  .modal { border-radius: 22px; }
  .today-clock { font-size: 4.2rem; }
}

@media (min-width: 1000px) {
  body { padding-bottom: 0; padding-left: 104px; }
  .tabbar {
    top: 0; right: auto; width: 104px; grid-template-columns: 1fr; grid-auto-rows: 76px;
    align-content: center; border-top: 0; border-right: 1px solid var(--line);
  }
  .view { max-width: 960px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .view > .today, .view > .stats, .view > .now-card, .view > .page-head, .view > .chips,
  .view > .task-list, .view > .empty, .view > [data-body], .view > .clock-face { grid-column: 1 / -1; }
  .view-tareas, .view-agenda, .view-reloj, .view-ajustes, .view-progreso { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .toasts { bottom: 1.5rem; }
  .livebar { left: calc(104px + 1rem); right: auto; width: 420px; bottom: 1rem; }
  body.has-livebar:not([data-route="reloj"]) { padding-bottom: 5rem; }
  .view > .subtabs, .view > .tab-body, .view > .keep-awake { grid-column: 1 / -1; }
}