/* mobile.css — ajustes responsivos consolidados.
 * Carregado por último; sobrescreve via media queries.
 * Breakpoints: 700px (mobile/tablet) e 380px (mobile pequeno).
 *
 * Já são responsivos sem precisar mexer aqui:
 *   - viewport meta (index.html)
 *   - img { max-width: 100% } (base.css)
 *   - .app-outlet padding reduzido < 900px, junto do cajón (sidebar.css, Task 7)
 *   - .topic-grid auto-fill minmax (dashboard.css) → vira 1 col automático
 *   - .topic-tabs overflow-x: auto (topic.css)
 *   - .aprender-toc nunca é montado no DOM, em nenhuma largura (Task 6) —
 *     abaixo de 900px o índice vive no cajão (sidebar.css, Task 7)
 *   - .margin-note inline < 1100px (content.css)
 */

@media (max-width: 700px) {
  /* El padding de .app-nav encoge acá (12px→8px verticales), así que la
     altura real del header cae de 55px a 47px — --header-h tiene que seguirla
     o el carril (top: var(--header-h)) y el scrim (inset: var(--header-h) ...)
     quedan calculados contra un header más alto de lo que es, abriendo una
     franja donde el fondo es clickeable a través del scrim (Important 1 del
     review final). Ver medición y el valor base (55px) en tokens.css. */
  :root {
    --header-h: 47px;
  }

  /* === HEADER === */
  .app-nav {
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
  }
  .app-nav .crumbs {
    font-size: 10px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-nav .crumbs .sep:last-of-type ~ * {
    /* destaque pro último crumb (página atual) — mantém visível mesmo com truncate */
  }
  .app-nav-link {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  /* === TOPIC PAGE === */
  .topic-shell-head {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .topic-tabs {
    /* edge-to-edge dos tabs scrolláveis (escapam o padding lateral do outlet) */
    margin: var(--sp-3) calc(var(--sp-3) * -1) var(--sp-3);
    padding: 0 var(--sp-3);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  /* scrollbar discreta nos tabs (Webkit) */
  .topic-tabs::-webkit-scrollbar { height: 2px; }
  .topic-tabs::-webkit-scrollbar-thumb { background: var(--border); }
  .topic-tabs::-webkit-scrollbar-track { background: transparent; }
  .topic-tab {
    scroll-snap-align: start;
    padding: var(--sp-3);
    min-height: 44px; /* touch target */
    display: inline-flex;
    align-items: center;
  }

  /* === CONTENT (aprender, summary) === */
  .content {
    font-size: var(--fs-md);
  }
  .content h2 {
    font-size: var(--fs-xl);
    line-height: 1.25;
  }
  .content h3 {
    font-size: var(--fs-lg);
  }
  .content p,
  .content ul,
  .content ol {
    line-height: 1.6;
  }
  /* tabelas com scroll horizontal — evita estourar viewport */
  .content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }
  .content thead th,
  .content tbody td {
    padding: var(--sp-2);
    font-size: 12px;
  }
  /* figures full-bleed (ocupam toda a largura, mais imersivas) */
  .content figure {
    margin-left: calc(var(--sp-3) * -1);
    margin-right: calc(var(--sp-3) * -1);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* === DASHBOARD === */
  .subject-section { margin: var(--sp-5) 0; }
  .subject-title { font-size: var(--fs-lg); }
  .era-header {
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 var(--sp-3);
  }
  .era-count { margin-left: 0; }
  .topic-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }

  /* === QUIZ === */
  .quiz-option {
    min-height: 44px;
    padding: var(--sp-3);
    font-size: var(--fs-md);
    line-height: 1.4;
  }
  .quiz-question {
    font-size: var(--fs-md);
    line-height: 1.4;
  }
  .quiz-filters {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .quiz-filter-btn {
    min-height: 44px;
  }

  /* === FLASHCARDS === */
  .fc-card {
    min-height: 260px;
    padding: var(--sp-4);
    font-size: var(--fs-md);
    line-height: 1.5;
  }

  /* === ORAL === */
  .oral-question {
    font-size: var(--fs-md);
    line-height: 1.5;
  }
  .oral-actions button,
  .oral-controls button {
    min-height: 44px;
  }
  .oral-timer { font-size: var(--fs-lg); }
}

/* Mobile pequeno (iPhone SE etc.) — ajustes mais agressivos */
@media (max-width: 380px) {
  .app-nav .crumbs { display: none; } /* libera espaço pro brand */
  .topic-tab {
    padding: var(--sp-3) var(--sp-2);
    font-size: var(--fs-sm);
  }
  .content table { font-size: 11px; }
}