/* Guía FastAPI · puntos de quiebre. Mobile-first: aquí solo lo que cambia al crecer.
 * Consume los tokens de css/tokens.css. Ningún color literal vive aquí. */

/* ---------- Tableta y escritorio ---------- */

@media (min-width: 48rem) {
  .diag-flow { flex-direction: row; align-items: stretch; flex-wrap: wrap; }
  .diag-flow .diag-node { flex: 1 1 8rem; }
  .diag-arrow { transform: none; flex: 0 0 auto; }
  .compare { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .contract__body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .sim-split { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
}

@media (min-width: 62rem) {
  .app-header { grid-template-columns: auto 1fr auto; }
  .app-status { grid-column: auto; justify-content: flex-end; }

  /* El atajo de teclado solo se anuncia donde hay teclado. */
  .tool-btn__key { display: inline-block; }
  .progress-wrap { flex: 0 1 14rem; }
  .icon-btn { display: none; }

  .app-layout { grid-template-columns: var(--g-sidebar-w) minmax(0, 1fr); }

  .sidebar {
    position: sticky;
    top: var(--g-header-h);
    inset-inline-start: auto;
    width: auto;
    height: calc(100vh - var(--g-header-h));
    transform: none;
  }
  .sidebar-backdrop { display: none; }

  .app-main { padding: var(--sdk-spacing-xl) var(--sdk-spacing-xl) 6rem; }

  /* A partir de tableta, los tres botones caben en una fila. */
  .page-nav {
    inset-inline-start: var(--g-sidebar-w);
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'anterior completar siguiente';
  }
}

@media (min-width: 100rem) {
  :root {
    --g-max-content: 84ch;
    /* En monitores muy anchos los listados aún ganan: 148 caracteres cubren
       casi cualquier línea de Python o de Dart sin desplazamiento lateral. */
    --g-max-ancho: 148ch;
  }
}

/* Por debajo del ancho de tableta las dos medidas se funden: no hay espacio
   sobrante que repartir y mantenerlas separadas solo añadiría reglas muertas. */
@media (max-width: 47.99rem) {
  :root { --g-max-ancho: var(--g-max-content); }
}

/* Pantallas estrechas: el rótulo del botón de búsqueda cede y queda el icono,
   que sigue teniendo su nombre accesible. */
@media (max-width: 29.99rem) {
  .tool-btn__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}