/* wlst · Ajustes › Importar (ui/js/ajustes-importar.mjs): la barra de
 * progreso, la vista previa y los que no se encontraron. Solo tokens de
 * estilo.css. */

.imp-caja { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-4); }
.imp-caja .fila-botones { justify-content: flex-end; margin-top: var(--esp-1); }
.imp-texto { margin: 0; font-size: var(--tam-m); color: var(--texto); overflow-wrap: anywhere; }
.imp-cifra { font-weight: 600; }
.imp-resenas { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-4); flex-wrap: wrap; padding: var(--esp-3) 0 var(--esp-1); border-top: 1px solid var(--borde); }
.imp-resenas + .imp-detalle { margin-top: var(--esp-1); }
.imp-detalle { margin: 0; font-size: var(--tam-s); line-height: 1.45; color: var(--texto-2); }

.imp-barra { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--hundido); overflow: hidden; }
.imp-barra::-webkit-progress-bar { border-radius: 999px; background: var(--hundido); }
.imp-barra::-webkit-progress-value { border-radius: 999px; background: var(--acento); transition: width 0.3s ease; }
.imp-barra::-moz-progress-bar { border-radius: 999px; background: var(--acento); }

.imp-perdidos { font-size: var(--tam-s); color: var(--texto-2); }
.imp-perdidos summary { min-height: 40px; display: flex; align-items: center; color: var(--acento); cursor: pointer; }
.imp-perdidos ul { max-height: 240px; margin: var(--esp-1) 0 0; padding-left: var(--esp-5); overflow-y: auto; line-height: 1.6; overflow-wrap: anywhere; }

/* En el móvil, la fila de la subida deja el botón debajo del texto si no cabe. */
@media (max-width: 899px) {
  [data-fila='letterboxd'], [data-fila='myanimelist'] { flex-wrap: wrap; }
  [data-fila='letterboxd'] .aj-fila-control, [data-fila='myanimelist'] .aj-fila-control { max-width: none; }
}