/* Guía FastAPI · mejoras de lectura: tema, búsqueda y progreso del módulo.
 * Consume los tokens de css/tokens.css. Ningún color literal vive aquí. */

/* ---------- Controles del encabezado ---------- */

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--sdk-spacing-xs);
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  /* 2.75rem ≈ 44 px: objetivo táctil mínimo cómodo. */
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.6rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--sdk-text-secondary);
  background: var(--sdk-bg-card);
  border: 1px solid var(--sdk-glass-border);
  border-radius: var(--sdk-radius-sm);
  cursor: pointer;
  transition: color var(--g-fast), border-color var(--g-fast);
}
.tool-btn:hover { color: var(--sdk-text-primary); border-color: var(--g-fastapi); }
.tool-btn__icon { font-size: 1.05rem; line-height: 1; }

/* La tecla del atajo solo se anuncia donde hay teclado. */
.tool-btn__key {
  display: none;
  padding: 0.05rem 0.3rem;
  font-family: var(--sdk-font-code);
  font-size: 0.66rem;
  color: var(--g-text-faint);
  border: 1px solid var(--sdk-glass-border);
  border-radius: 4px;
}

/* ---------- Progreso de lectura del módulo ---------- */

/* Franja fina bajo el encabezado. La barra global mide módulos completados;
   esta mide cuánto queda del módulo que se está leyendo, que es la pregunta
   real de alguien a mitad de un módulo de noventa minutos. */
.reading-progress {
  /* Última fila del encabezado, que ya es sticky. Como capa aparte chocaba
     con el borde superior de la barra lateral. */
  grid-column: 1 / -1;
  height: 3px;
  margin: var(--sdk-spacing-sm) calc(-1 * var(--sdk-spacing-md)) calc(-1 * var(--sdk-spacing-sm));
  background: var(--g-track);
}
.reading-progress__fill {
  height: 100%;
  width: 0;
  background: var(--g-fastapi);
  transition: width var(--g-fast);
}

/* ---------- Búsqueda ---------- */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: var(--sdk-spacing-md);
  padding-top: max(var(--sdk-spacing-lg), 8vh);
  background: var(--g-veil);
  backdrop-filter: blur(4px);
}
.search-overlay[hidden] { display: none; }

.search-panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 46rem);
  max-height: min(80vh, 40rem);
  background: var(--sdk-bg-secondary);
  border: 1px solid var(--sdk-glass-border);
  border-radius: var(--sdk-radius-lg);
  box-shadow: var(--g-shadow-lg);
  overflow: hidden;
}

.search-head {
  display: flex;
  align-items: center;
  gap: var(--sdk-spacing-sm);
  padding: var(--sdk-spacing-md);
  border-bottom: 1px solid var(--sdk-glass-border);
}
.search-head__icon { font-size: 1.1rem; }

#search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 1rem;
  color: var(--sdk-text-primary);
  background: var(--sdk-bg-primary);
  border: 1px solid var(--sdk-glass-border);
  border-radius: var(--sdk-radius-sm);
}
#search-input::placeholder { color: var(--g-text-faint); }

.search-summary {
  padding: 0.5rem var(--sdk-spacing-md);
  font-size: 0.78rem;
  color: var(--sdk-text-secondary);
  border-bottom: 1px solid var(--sdk-glass-border);
}

.search-results {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: var(--sdk-spacing-sm);
  overflow-y: auto;
}

.search-result { margin-bottom: 0.35rem; }
.search-result__btn {
  display: block;
  width: 100%;
  padding: 0.6rem 0.7rem;
  text-align: left;
  font: inherit;
  color: var(--sdk-text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--sdk-radius-sm);
  cursor: pointer;
}
.search-result__btn:hover,
.search-result.is-active .search-result__btn {
  background: var(--sdk-bg-card);
  border-color: var(--g-fastapi);
}

.search-result__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
  font-size: 0.76rem;
}
.search-result__num { color: var(--g-text-faint); font-family: var(--sdk-font-code); }
.search-result__mod { color: var(--g-fastapi); font-weight: 600; }
.search-result__where { color: var(--sdk-text-secondary); }
.search-result__lock { color: var(--g-warn); }

.search-result__snippet {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--sdk-text-secondary);
  overflow-wrap: anywhere;
}
.search-result__snippet mark {
  padding: 0 0.15rem;
  color: var(--sdk-text-primary);
  background: var(--g-mark-bg);
  border-radius: 3px;
}
.search-result__hidden { font-style: italic; color: var(--g-text-faint); }

.search-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sdk-spacing-md);
  padding: 0.5rem var(--sdk-spacing-md);
  font-size: 0.72rem;
  color: var(--g-text-faint);
  border-top: 1px solid var(--sdk-glass-border);
}
.search-foot kbd {
  padding: 0.05rem 0.3rem;
  font-family: var(--sdk-font-code);
  font-size: 0.7rem;
  border: 1px solid var(--sdk-glass-border);
  border-radius: 4px;
}

/* Mientras la búsqueda está abierta el fondo no se desplaza. */
body.is-searching { overflow: hidden; }

/* Cambio de tema sin animación.
 *
 * Sin esto, alternar el tema dispara la transición de color de cada elemento a
 * la vez: 150 ms de parpadeo general que no comunica nada y que molesta a quien
 * es sensible al movimiento. El cambio debe ser instantáneo; lo que se anima es
 * la interacción con un control, no el repintado de la página entera. */
:root.is-switching-theme,
:root.is-switching-theme *,
:root.is-switching-theme *::before,
:root.is-switching-theme *::after {
  transition: none !important;
}

/* Solo para lectores de pantalla: confirma la copia sin ocupar espacio. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}